Le Blog EasyAngularKit

Apprendre Angular, un pas à la fois.

Des articles clairs, pratiques, et sans blabla, pour apprendre Angular comme on code vraiment et suivre sa communauté.

69 articles trouvés

Sujets populaires

📚 Nos articles

Angular SSR : 4 erreurs qui font fetcher ton API deux fois (et coûtent 800ms à ton TTI)

17 juin 2026

Ton SSR rend la page côté serveur, puis ton client refetch la même API au mount. Bravo, tu paies deux fois et ton Time To Interactive prend 800ms dans la tronche. Voici les 4 erreurs Angular 17+ qui causent le double-fetch en SSR et comment chaque correction prend moins de 5 lignes.

Angular SSR Performance TransferState Hydration

Vitest config Angular : setup, jsdom et couverture de code

17 juin 2026

Vitest config Angular : anatomie de vitest.config.ts, fichier test-setup, environnement jsdom, couverture v8 et seuils. Le guide complet pour bien configurer.

Vitest Tests Angular Couverture CI

Karma to Vitest : migrer ses tests Angular sans douleur

17 juin 2026

Karma to Vitest : pourquoi et comment migrer tes tests Angular vers Vitest. Équivalences Jasmine, builder officiel, pièges zoneless et tableau comparatif.

Vitest Tests Angular Migration Karma Jasmine

canMatch vs canActivate : pourquoi ton guard HTTP marche en cliquant mais casse en collant l'URL

16 juin 2026

Ton guard avec un appel HTTP fonctionne quand tu navigues par les liens, et part en 404 quand tu colles l'URL directement ? Tu l'as mis dans canMatch au lieu de canActivate. Les deux ne tournent pas dans la même phase du Router, et l'un échoue en silence. Explication, signature de diagnostic, et le before/after qui répare.

Angular Routing Guards Architecture Debug

Router Angular : les 17 events de navigation et pourquoi ton loader tourne dans le vide

16 juin 2026

Ton spinner de navigation tourne à l'infini sur un guard qui refuse ? Ton resolver annule la navigation en silence et personne ne comprend pourquoi ? Le cycle d'events du Router Angular explique tout : la séquence complète, ce qui interrompt la nav, et les 3 cas d'erreur. Avec le pattern de loader qui ne te lâche jamais.

Angular Routing RxJS Architecture Debug

@for et track : 5 erreurs qui rebuild ton DOM à chaque tick

12 juin 2026

Le track de @for n'est pas un détail cosmétique : c'est ce qui décide si Angular réutilise tes lignes ou les recrée toutes à chaque changement. 5 erreurs classiques qui transforment une liste fluide en diaporama, avec le before/after qui te rend les 60 FPS.

Angular Performance Templates Signals

Angular 19+ : `provideAppInitializer` enterre `APP_INITIALIZER` (et te fait gagner 70% de boilerplate)

10 juin 2026

Angular 19 a introduit provideAppInitializer et marqué le vieux token APP_INITIALIZER deprecated. Plus de useFactory, plus de deps array typé any, plus de double lambda : un callback qui tourne en contexte d'injection, avec inject() qui marche directement. Migration complète en 4 minutes, avec les pièges qui restent.

Angular APP_INITIALIZER provideAppInitializer Bootstrap Dependency Injection

Formulaire de création et d'édition : un composant ou deux ?

7 juin 2026

Create et edit qui se ressemblent à 90 % : un seul composant avec un mode, ou deux ? La réponse avec Signal Forms (Angular 22), un critère de décision binaire et un pattern qui supprime les if(mode).

Angular Signal Forms Architecture Forms Angular 22

Guards, Resolvers, Interceptors Angular : 5 raisons d'arrêter d'écrire des classes

5 juin 2026

Tes guards sont encore des @Injectable() avec un constructor de 4 paramètres ? Tes interceptors sont enregistrés via HTTP_INTERCEPTORS multi: true ? Tu écris du code Angular 14. Voici 5 raisons concrètes (bundle, tests, composition) de passer en fonctionnel, avec le before/after qui va bien.

Angular Routing HttpClient Architecture Bonnes pratiques

@let dans les templates Angular : 5 patterns pour virer tes computed() de présentation

5 juin 2026

Tu colles un computed() à chaque fois que t'as besoin d'une expression dérivée dans ton template. Sauf que 80% du temps, c'est juste de l'affichage qui n'a rien à faire dans le TypeScript. @let, stable depuis Angular 19, fait le boulot dans le template avec un type narrowing propre et zéro boilerplate. 5 patterns concrets pour nettoyer ton code.

Angular Templates Signals Refactoring

@Service : le décorateur qui remplace @Injectable (et quand il ne faut pas l'utiliser)

5 juin 2026

Angular 22 introduit @Service, un décorateur plus ergonomique que @Injectable pour 90% de tes services. Singleton root par défaut, inject() obligatoire, scoping via autoProvided. On compare les deux ligne par ligne, et on voit les cas où @Injectable reste indispensable.

Angular 22 Injection de dépendances Service Bonnes pratiques Migration

knip sur Angular + Nx : traquer le code mort sans crouler sous les faux positifs

5 juin 2026

knip détecte fichiers, dépendances et exports morts en un seul outil. Mais sur un projet Angular SSR + Nx, le run brut flag tes entrypoints serveur et ton tooling. Voici la config qui sépare le signal du bruit, tirée d'un cas réel.

Angular Nx knip Qualite Outillage SSR CI

Angular 22 : le guide complet de la release signal-first

3 juin 2026

Angular 22 est sorti et signe la fin des expérimentations : OnPush par défaut, Signal Forms stables, FetchBackend par défaut, décorateur @Service, injectAsync, outils MCP, et un gros ménage d'APIs legacy. On passe tout en revue, avec du code.

Angular 22 Nouveautés Signals Signal Forms HttpClient Routing Migration

NG0203 : inject() hors contexte d'injection, le piège silencieux qui crashe en prod

2 juin 2026

NG0203 te tombe dessus dès que tu déplaces un inject() dans un setTimeout, un Observable ou après un await. L'erreur n'apparaît pas toujours en dev, parfois seulement en SSR ou en prod. Tour des 4 scénarios qui déclenchent l'erreur et des bonnes manières de la corriger sans casser ton architecture.

Angular Dependency Injection inject Erreurs Bonnes pratiques

NgOptimizedImage : 5 erreurs qui plombent ton LCP (et ton score Lighthouse)

27 mai 2026

Tes images sont presque toujours l'élément LCP de ta page, et c'est souvent elles qui font chuter ton score Lighthouse. NgOptimizedImage corrige le CLS, le lazy-loading mal placé et les images servies en 2000px sur mobile, à condition de ne pas tomber dans les 5 pièges classiques. Guide pratique avec before/after.

Angular Performance NgOptimizedImage Core Web Vitals LCP

model() : supprime 60% du boilerplate de tes two-way bindings Angular

22 mai 2026

Tu écris encore input() value + output() valueChange + un emit() manuel pour un simple [(banana)] ? model() fusionne les deux signaux en un seul, reste writable des deux côtés et s'intègre nativement aux signals. Guide complet : forme courte, required, validations, pièges de boucle et quand NE PAS l'utiliser.

Angular Signals model Two-way binding Bonnes pratiques

afterNextRender() et afterRender() : remplace tes setTimeout(0) et tes ngAfterViewInit qui plantent en zoneless

20 mai 2026

ngAfterViewInit lit le DOM trop tôt. setTimeout(0) est un hack. Et en zoneless, les deux explosent. Angular 16 a introduit afterNextRender() et afterRender() pour synchroniser proprement le code avec le rendu : guide complet avec phases, SSR et pièges.

Angular Lifecycle DOM Zoneless SSR Signals

`hostDirectives` : partage des comportements entre composants sans copier-coller une seule ligne

17 mai 2026

La Directive Composition API d'Angular 15+ te permet d'attacher des directives directement sur l'élément host d'un composant, sans héritage, sans mixin, sans duplication. Un pattern que la majorité des équipes ignore encore.

Angular Directives Architecture Composants Bonnes pratiques Angular 15

:host display: contents en Angular : astuce ou code smell ?

15 mai 2026

L'astuce CSS :host { display: contents } en Angular : pourquoi c'est tentant, pourquoi c'est souvent un wrapper qui s'ignore, et quand c'est légitime.

Angular host CSS DOM Sémantique SEO Bonnes pratiques

Angular 19 — FormValueControl en 5 minutes

13 mai 2026

Angular 19 remplace ControlValueAccessor par FormValueControl : zéro provider, zéro callback, un simple model(). Guide de migration avant/après.

Angular Forms Signals FormValueControl ControlValueAccessor Angular 19

linkedSignal() : le signal writable qui élimine tes anti-patterns effect()

13 mai 2026

linkedSignal() est le chaînon manquant entre computed() (trop rigide) et effect() (trop dangereux pour synchroniser de l'état). Guide complet avec forme courte, forme longue, use cases pagination et sélection intelligente.

Angular Signals linkedSignal Bonnes pratiques Réactivité

`takeUntilDestroyed` : arrête de gérer tes subscriptions à la main

9 mai 2026

Le pattern Subject + takeUntil + ngOnDestroy est verbeux, fragile et franchement dépassé. Angular 16 a introduit takeUntilDestroyed() et DestroyRef — voici comment les utiliser correctement, y compris hors contexte d'injection.

Angular RxJS Signals Bonnes pratiques Memory Leaks DestroyRef

Angular effect() : les 5 pièges qui attendent tout le monde (et comment les éviter)

4 mai 2026

effect() paraît simple — une fonction qui réagit aux signals. En pratique, elle concentre les erreurs les plus vicieuses : boucles infinies, memory leaks, timing surprenant. Voici les 5 pièges à éviter absolument.

Angular Signals effect Bonnes pratiques Réactivité

J'ai refondu la landing EasyAngularKit avec impeccable, voici ce que ça donne

29 avril 2026

Retour d'expérience sur l'utilisation de la skill open-source impeccable pour auditer et refondre la landing page EAK : du score 10/20 au score 19/20 en 28 commits, avec les commandes, les chiffres et les pièges rencontrés.

Design Angular Tooling Claude Code Retour d'expérience

Tu utilises encore @ViewChild ? Voici le piège SSR qu'il te cache

24 avril 2026

viewChild(), viewChildren(), contentChild() remplacent les décorateurs @ViewChild et @ContentChild en Angular 17+. Plus réactifs, compatibles signals, et sans le piège de timing SSR. Guide complet avec avant/après.

Angular Signals ViewChild SSR Composants Réactivité

@defer : le lazy loading de composants que tu ignores (et qui peut transformer tes Core Web Vitals)

17 avril 2026

Angular 17 a introduit @defer pour charger les composants à la demande, sans toucher au routing. Viewport, interaction, idle, prefetch — voici comment l'utiliser pour vraiment alléger ton bundle initial.

Angular Performance Defer Lazy Loading Core Web Vitals Bundle

i18n en Angular : @angular/localize, ngx-translate ou Transloco ?

16 avril 2026

Comparatif détaillé des trois solutions d'internationalisation Angular — compile-time vs runtime, lazy loading, SSR, API Signals — pour choisir celle qui correspond à ton contexte.

Angular i18n Transloco ngx-translate @angular/localize

Git Worktree : travaillez sur plusieurs branches en même temps

14 avril 2026

Découvrez git worktree, la fonctionnalité Git méconnue qui permet de travailler sur plusieurs branches simultanément sans stash ni clone — cas d'usage concrets, commandes essentielles et retour d'expérience avec Claude Code.

Git Worktree Productivité Claude Code Workflow

Ajouter un flux RSS à ton blog Angular en mode SSG

14 avril 2026

Comment générer un flux RSS 2.0 statique à partir d'articles markdown sur un blog Angular SSG — script TypeScript, intégration au build, pièges à éviter.

Angular RSS SSG Build TypeScript

Angular Signals — Cheatsheet complet

8 avril 2026

Toutes les APIs Signals d'Angular (17+ à 21+) dans une fiche mémo : signal, computed, effect, input, output, model, linkedSignal, resource, httpResource, rxResource, interop RxJS et patterns avancés.

Angular Signals Cheat Sheet Réactivité RxJS

Les templates Angular ont changé plus vite que tes habitudes — v17 à v21.2

10 mars 2026

Récapitulatif complet des évolutions du moteur de template Angular : control flow, @let, template literals, spread operator, arrow functions et plus encore, de la v17 à la v21.2.

Angular Templates Control Flow Signals TypeScript

Angular 21.2 : le changelog commenté — tout ce qui change pour toi

26 février 2026

Angular 21.2 est une minor release anormalement dense : TypeScript 6, Signal Forms matures, @switch exhaustifs, instanceof dans les templates, arrow functions et resource snapshots.

Angular 21 Nouveautés Signal Forms TypeScript 6 Templates

httpResource est-il un anti-pattern ? Clean architecture et pragmatisme en Angular

4 février 2026

Angular 19.2 a introduit httpResource, une API déclarative pour charger des données HTTP via les signals. Simple, élégante… mais qui fait grincer des dents les puristes de la clean architecture. Faut-il l'adopter ou la fuir ?

Angular httpResource Clean Architecture Signals HttpClient

InjectionToken tree-shakable : arrête de polluer ton bundle

18 janvier 2026

Découvre comment rendre tes InjectionToken Angular tree-shakable avec providedIn et factory. Moins de boilerplate, bundle plus léger, code plus propre.

Angular InjectionToken Tree-shaking Performance Dependency Injection

Angular 21.1 — Ce qui change vraiment pour ton code

15 janvier 2026

Angular 21.1 apporte des changements pratiques au quotidien : @switch fall-through, spread syntax dans les templates, évolutions de Signal Forms et nouvelle fonction isActive() standalone pour le router.

Angular 21 Nouveautés Signal Forms Routing Templates

TypeScript : Arrête d'utiliser any (et fais ça à la place)

6 janvier 2026

Utiliser any en TypeScript, c'est comme conduire sans ceinture. Découvre comment unknown, les type guards et Zod peuvent sauver ton code (et ta carrière).

TypeScript Zod Type Safety Bonnes pratiques Angular

type vs interface en TypeScript : il est temps de trancher

13 décembre 2025

Faut-il utiliser type ou interface en TypeScript ? Guide complet avec exemples pratiques, différences techniques et recommandations ESLint pour faire le bon choix.

TypeScript ESLint Type Interface Bonnes pratiques

Comment j'ai réduit de 25% la taille de mon bundle Angular

10 décembre 2025

Découvre comment j'ai fait passer mon bundle Angular de plus d'1 MB à 750 KB en remplaçant Zod par Zod Mini. Guide complet avec visualisation du bundle et astuces d'optimisation.

Angular Performance Bundle Zod Optimisation esbuild

Angular 21 : les nouveautés visibles dès la création d’un projet

6 décembre 2025

Angular 21 apporte plusieurs changements majeurs dès le simple `ng new` : Tailwind intégré, Vitest par défaut, zoneless, simplification HTTP et évolution du linter. Voici ce qui change concrètement.

Angular 21 Nouveautés Tailwind Vitest Zoneless HttpClient

Tester ses composants Angular avec inputBinding / outputBinding

27 novembre 2025

Modernise tes tests Angular avec inputBinding et outputBinding : moins de fixture.detectChanges(), plus de signaux et des specs plus déclaratives.

Angular Tests Vitest Signals inputBinding outputBinding EasyAngularKit

ControlValueAccessor : Crée Tes Propres Inputs Comme Un Pro

10 novembre 2025

Guide complet pour créer des composants Angular personnalisés qui fonctionnent avec ngModel et FormControl. Apprenez ControlValueAccessor pas à pas avec des exemples pratiques.

Angular Forms ControlValueAccessor Composants ngModel FormControl Validation

Comment J'ai Saboté Mon Scroll Pendant 2 Heures (Et Ce Que J'ai Appris)

3 novembre 2025

Histoire d'un bug de scroll Angular causé par un simple overflow-y: auto. Comment j'ai passé 2 heures à chercher un problème que j'avais créé moi-même.

Angular CSS Debug Routing Scroll Overflow

input(), @Attribute(), ou InjectionToken ? Le Guide Pour Choisir La Bonne Approche

27 octobre 2025

Découvre quand utiliser input(), @Attribute() ou InjectionToken dans tes composants Angular. Guide complet avec exemples pratiques, comparaisons et patterns recommandés.

Eco conception Composants input() @Attribute() InjectionToken Bonnes pratiques Performance

Angular : le piège du double subscribe (et les 5 alternatives modernes)

25 octobre 2025

Du double subscribe au rxResource : découvre comment moderniser ton data flow Angular pas à pas, de RxJS à Signals.

Angular RxJS Signals httpResource Clean Code

Angular : Supprime Les Div Inutiles, Utilise Le Host Élément

20 octobre 2025

Découvre comment éliminer les div wrappers inutiles dans tes composants Angular et utiliser l'élément host pour un DOM plus propre et performant. Guide complet avec exemples pratiques.

Composants host dom Performance Bonnes pratiques styles CSS

?? vs || : L'Opérateur Que 90% Des Devs Utilisent Mal

13 octobre 2025

Découvre la différence cruciale entre les opérateurs ?? et || en TypeScript et pourquoi l'opérateur nullish coalescing devrait devenir ton nouveau réflexe pour éviter les bugs subtils.

TypeScript JavaScript Opérateurs Bonnes pratiques Angular

Erreur NG0401 après mise à jour Angular 20.2.4 → 20.3.3 (SSR) : cause, explication et correctif

10 octobre 2025

Pourquoi votre build casse en Angular 20.3.x avec un NG0401 sur une app SSR, et comment corriger en passant à la nouvelle API de bootstrap côté serveur avec BootstrapContext.

Angular SSR v20 Error NG0401 Migration

SOLID en Angular 20+ : le bon réflexe (avec contre‑exemples)

22 septembre 2025

Chaque principe SOLID illustré en Angular moderne (Signals, control flow, InjectionToken) avec '❌ mauvaise façon' vs '✅ bonne façon' pour guider ta refacto.

Angular SOLID Clean Architecture Signals Bonnes pratiques

Ports & Adapters en Angular (débutant) — un même composant, 2 backends (HTTP & InMemory)

19 septembre 2025

Apprends étape par étape à brancher un composant Angular sur un Port avec deux Adapters interchangeables : HTTP réel et InMemory pour la démo/tests. Compatible Angular v19+, Signals et nouveau control flow.

Angular Ports & Adapters Clean Architecture Inversion de Contrôle

Nx + Angular + Rspack : l'alliance qui accélère tes builds

11 septembre 2025

Découvre comment Nx et Rspack transforment l'expérience Angular : monorepo structuré, bundling ultra-rapide et DX améliorée. Comparaison avec Webpack et Vite, exemples pratiques et cas d'usage réels.

Angular Nx Rspack Monorepo Performance

📦 Installer et utiliser Zod en TypeScript

8 septembre 2025

Apprends à installer et utiliser Zod pour sécuriser tes données en TypeScript et Angular : validation runtime, parse vs safeParse, cas d’usage concrets avec API, formulaires et transformations.

Angular TypeScript Zod Validation API Bonnes pratiques

Mocker une API REST dans Angular avec JSON Server : tuto complet

29 août 2025

Tuto pas-à-pas pour simuler un backend REST en local avec json-server, lancer Angular et l'API en parallèle, gérer les CORS, simuler des erreurs et choisir entre json-server, MSW et Mirage.js.

Angular json-server mock MSW Mirage.js apprentissage tooling

Angular v20 — NG0201: No provider found for `MonServiceXXX`

25 août 2025

Pourquoi cette erreur survient dans Angular v20, comment la diagnostiquer et 3 façons propres de la corriger (providedIn, providers de route, provider global).

Angular v20 DI Injectable Routing

4 patterns de routing Angular pour des URLs propres et SEO-friendly

22 août 2025

Routes dynamiques simples, segments hybrides statique+dynamique, UrlMatcher custom, data resolver : les 4 patterns de routing Angular que j'utilise sur EasyAngularKit, avec leurs forces et leurs pièges côté SSR/SEO.

Angular Routing SEO SSR Architecture

Angular v20 : style guide et migration depuis v19, le guide complet

15 août 2025

Le nouveau style guide Angular v20, et le retour d'expérience d'une migration v19 → v20 sur stack Nx + Vitest. Cohérence, organisation par feature, inject(), zoneless, pièges de tests : tout ce qu'il faut savoir avant de migrer.

Angular v20 Migration Style Guide Architecture Zoneless Vitest Nx

EasyAngularKit explosé après l’upgrade Tailwind v4 ? Voici pourquoi… (et comment j’ai réparé)

6 août 2025

Retour d'expérience sur la migration vers Tailwind CSS v4 avec un projet Nx + Angular + Vitest. Symptômes, débug et fix.

Angular Tailwind Migration

Angular : simplifie ta navigation avec routerLinkActive

6 août 2025

Évite le HTML répétitif en centralisant la config des liens de navigation dans ton TypeScript. Découvre comment utiliser routerLinkActive efficacement avec Angular v19+.

Angular routerLinkActive Navigation Routing

Angular : Afficher dynamiquement des composants avec ngComponentOutlet

24 juillet 2025

Apprenez à simplifier des menus ou interfaces répétitives en projetant dynamiquement des composants Angular à l’aide de *ngComponentOutlet.

Angular ComponentOutlet Bonnes pratiques Composants

Angular : ajouter dynamiquement l'en-tête Accept-Language avec un HttpInterceptor

17 juillet 2025

Apprenez à utiliser les HttpInterceptors Angular pour centraliser l'ajout de l'en-tête Accept-Language à toutes vos requêtes HTTP, en fonction de la langue active de votre application.

Angular HttpInterceptor Multilingue Transloco Bonnes pratiques v20

Transloco Angular : gérer le multilingue (i18n) en standalone

9 juillet 2025

Transloco Angular : ajoute le multilingue (i18n) à un projet standalone moderne, avec une configuration clean et un exemple pas à pas.

Angular Transloco Internationalisation i18n v20

Angular : Smart vs Dumb Components

27 juin 2025

Comprenez la différence entre composants intelligents et composants présentiels, et structurez vos applications Angular proprement.

Angular Architecture Composants Smart Dumb Bonnes pratiques

Cheat Sheet RxJS & Signal (Angular v17+)

25 juin 2025

Une fiche mémo des concepts et opérateurs clés RxJS et Signal à connaître pour vos projets Angular modernes.

Angular RxJS Signals Cheat Sheet Réactivité

Faut-il un store dans votre projet Angular ?

25 juin 2025

Une grille de décision simple pour savoir si votre projet Angular a vraiment besoin d’un store comme NgRx ou Signal Store.

Angular State Management NgRx Architecture Signal Store

Angular : Quelle différence entre Constructor et OnInit ?

12 juin 2025

Faut-il utiliser le constructor ou ngOnInit dans un composant Angular ? Ce guide rapide clarifie leur rôle et t’aide à faire le bon choix.

Angular Lifecycle Composants Constructor ngOnInit Clean Code

Vitest Angular 20 : Guide complet d'installation et configuration

6 juin 2025

Guide complet pour installer et configurer Vitest avec Angular 20. Remplacez Karma/Jasmine par Vitest pour des tests plus rapides et modernes.

Vitest Angular Tests Zoneless v20

Découverte du Signal Store de NgRx : ce que j’en pense après l’avoir testé dans EasyAngularKit

6 juin 2025

Un retour d'expérience concret sur l'utilisation du Signal Store de NgRx dans une reproduction simplifiée d'EasyAngularKit.

NgRx Angular Signals State Management EasyAngularKit

Et si withComponentInputBinding était plus structurant qu’on ne le croit ?

27 mai 2025

Depuis Angular v16, l’apparition de withComponentInputBinding transforme la façon dont les composants reçoivent les données des routes. Voici ce que ça change, ses avantages, ses limites… et un piège à connaître.

Angular Routing Signals Bonnes pratiques

NgBaguette 2025 : ce que j’ai retenu de la 1ère édition

25 mai 2025

Retour d’expérience sur la première édition de NgBaguette, l'évènement Angular 100% francophone. Talks, rencontres et coups de cœur.

Angular NgBaguette Évènement Communauté France

De Zone.js à Zoneless : le guide complet de migration Angular

25 janvier 2025

Angular 21 active le mode zoneless par défaut. Ce guide couvre tout : contexte historique, concepts clés, stratégie de migration progressive en 4 phases, patterns courants et pièges à éviter.

Angular 21 Zoneless Zone.js Signals Migration Performance OnPush