Bonnes pratiques

40 articles du blog EasyAngularKit sur Bonnes pratiques.

Articles sur Bonnes pratiques

Typed Forms : 4 pièges qui corrompent tes payloads et ton typage

19 août 2026

Ton PATCH part en prod sans le champ role. disabled, null, Partial et get() : 4 pièges des Typed Forms, et le cast qui les masque tous.

Angular Forms TypeScript Bonnes pratiques

Combien de tests par feature ? 23 pour toute une app

10 août 2026

Rapport de couverture à l'appui : ce que 23 tests couvrent vraiment sur une app Angular, et pourquoi viser un pourcentage est une mauvaise idée.

Angular TDD Tests Vitest Couverture Bonnes pratiques

Angular : le Page Model, des tests qui restent lisibles

10 août 2026

Tes tests Angular se noient dans les querySelector ? Le Page Model sépare le comment du quoi. Anatomie, montée en puissance progressive et pièges à éviter.

Angular TDD Tests Vitest Page Model Bonnes pratiques

TDD Angular : par où commencer quand rien n'existe ?

10 août 2026

Page blanche, aucun composant, aucun test. Le premier cycle RED-GREEN-REFACTOR pas à pas en Angular zoneless avec Vitest, et les erreurs à éviter.

Angular TDD Tests Vitest Zoneless Bonnes pratiques

Angular : quand faut-il vraiment mocker dans un test ?

10 août 2026

Une suite Angular de 23 tests avec un seul mock. Pourquoi le fake bat le mock presque partout, et le seul cas qui justifie vraiment un spy.

Angular TDD Tests Vitest Architecture Bonnes pratiques

TDD : supprimer un test, ce n'est pas tricher

10 août 2026

Un test n'est pas un acquis définitif. Les cinq cas où le supprimer est la bonne décision, le seul cas où c'est de la triche, et comment faire la différence.

Angular TDD Tests Bonnes pratiques Refactoring

NgRx Signal Store : les hooks onInit et onDestroy

10 août 2026

inject() marche dans onInit et plante dans onDestroy. Le mécanisme derrière cette asymétrie, les deux formes de withHooks, et quand le hook tourne vraiment.

Angular Signal Store NgRx Signals Architecture Bonnes pratiques

`disabled="false"` désactive quand même ton bouton : le piège des signal inputs sans `booleanAttribute`

7 août 2026

Pourquoi disabled="false" désactive quand même ton bouton, et comment brancher booleanAttribute et numberAttribute sur tes signal inputs Angular.

Angular Composants Signals Bonnes pratiques

Ton `Signal<T>` public n'est pas readonly : le bug runtime Angular que TypeScript te cache

27 juillet 2026

Tu exposes ton state en readonly typé Signal<T> et ça a l'air propre. Un cast d'une ligne rouvre .set(). Ce que asReadonly() verrouille vraiment.

Angular Signals Dependency Injection Bonnes pratiques Architecture

`enum` laisse du JavaScript derrière lui, et Node refuse déjà de l'exécuter

26 juillet 2026

Ce que ton enum TypeScript émet en JavaScript, les pièges de réordonnancement et de reverse mapping, et les 3 patterns d'union de littéraux qui le remplacent.

TypeScript Angular Bonnes pratiques Architecture Migration Bundle

`readonly` n'est pas un commentaire : rends la mutation impossible au lieu d'y survivre

26 juillet 2026

Ton computed() qui trie réécrit sa propre source, et rien dans le type ne l'en empêche. readonly, as const, et pourquoi DeepReadonly casse sur une Date.

TypeScript Angular Signals Bonnes pratiques Architecture Réactivité

4 champs optionnels = 16 états possibles, 4 valides : passe aux unions discriminées

26 juillet 2026

Ton type d'état a quatre champs optionnels, donc seize combinaisons dont la plupart n'ont aucun sens. Union discriminée : narrowing et 4 pièges du discriminant.

TypeScript Angular Signals Bonnes pratiques Architecture Templates

markForCheck() en 2026 : les 4 cas où tu peux enfin le virer (et le seul où tu dois le garder)

24 juillet 2026

Avec les signals partout, markForCheck() ressemble à un fossile. Presque : les 4 patterns où tu peux le supprimer, et le cas où il reste obligatoire.

Angular Signals Performance Bonnes pratiques Migration

Ton @HostBinding avec un signal ne fait rien : le silent bug que host: {} corrige

22 juillet 2026

Tu passes ta propriété en signal, ton @HostBinding reste figé, sans erreur ni warning. Le silent bug, le workaround par getter, et la forme host: {}.

Angular Signals Composants Bonnes pratiques Migration Angular 20

`outputFromObservable` et `outputToObservable` : les 2 ponts que ta migration `EventEmitter` → `output()` ignore

20 juillet 2026

Migrer EventEmitter vers output() casse tes pipes RxJS : les 5 pièges de outputFromObservable et outputToObservable, et ce qu'il faut changer à la source.

Angular Signals RxJS Composants Migration Bonnes pratiques

Signal `equal` : pourquoi ton `set()` avec un objet ne re-render rien (et les 5 pièges qui te bouffent la journée)

17 juillet 2026

Tu appelles set() avec un nouvel objet, ton composant ne bouge pas. Ou pire : tu appelles set() avec la même valeur, et Angular re-render quand même. La fonction equal des signals est piégeuse dès que tu quittes les primitives. Tour des 5 pièges qui sabotent tes re-renders et les patterns pour reprendre la main sans casser les perfs.

Angular Signals Réactivité Bonnes pratiques Performance

abortSignal avec resource() : le pattern anti race condition que tout le monde oublie

13 juillet 2026

Ton composant affiche le mauvais utilisateur quand tu cliques vite. Les 4 pièges qui laissent passer une race condition malgré resource() et son abortSignal.

Angular Signals Réactivité HttpClient Bonnes pratiques

`inject()` : 4 flags qu'on oublie (et qui ferment tes bugs DI hiérarchique)

26 juin 2026

Tu re-provides un service pour contourner une mauvaise instance reçue ? Le bon flag d'inject() suffit : optional, self, skipSelf et host, sur cas réels.

Angular Dependency Injection Bonnes pratiques Architecture

HttpContext Angular : 5 patterns pour configurer tes interceptors sans header magique

19 juin 2026

Tu skippes l'auth avec un header X-Skip-Auth que ton interceptor supprime ensuite ? HttpContext le remplace par des tokens typés. 5 patterns et leurs tests.

Angular HttpClient Architecture Bonnes pratiques

Zod parse vs safeParse : lequel choisir en Angular

18 juin 2026

parse() lance une exception, safeParse() retourne un résultat typé. Quand choisir l'un ou l'autre en Angular : API, HttpClient, httpResource, formulaires.

Zod Angular TypeScript Validation HttpClient Bonnes pratiques

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

5 juin 2026

Pourquoi passer tes guards, resolvers et interceptors Angular en fonctions : CanActivateFn, ResolveFn, HttpInterceptorFn, tree-shaking, factories, tests.

Angular Routing HttpClient Architecture Bonnes pratiques

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

5 juin 2026

Angular 22 ajoute @Service, plus ergonomique que @Injectable pour 90 % de tes services. Singleton root, inject() obligatoire, et les cas qui résistent.

Angular 22 Dependency Injection Bonnes pratiques 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 subscribe ou après un await. Les 4 scénarios, et comment les corriger.

Angular Dependency Injection Erreurs Bonnes pratiques

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

22 mai 2026

Tu écris encore input() + output() + emit() pour un simple [(banana)] ? model() supprime 60 % de ce boilerplate. Forme required, alias, et les 5 pièges.

Angular Signals Bonnes pratiques

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

17 mai 2026

Attacher des directives sur le host d'un composant avec hostDirectives : extraire un comportement dupliqué, aliaser ses inputs, composer plusieurs directives.

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 Composants CSS DOM Accessibilité SEO Bonnes pratiques

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

13 mai 2026

Quand remplacer un effect() de synchronisation par linkedSignal(), stable depuis Angular 20 : forme courte, forme longue avec previous, sélection et pagination.

Angular Signals Bonnes pratiques Réactivité

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

9 mai 2026

Remplacer le trio Subject + takeUntil + ngOnDestroy par takeUntilDestroyed() : contexte d'injection, erreur NG0203, DestroyRef dans un service, toSignal().

Angular RxJS Signals Bonnes pratiques Lifecycle

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

4 mai 2026

Quand remplacer effect() par computed(), pourquoi untracked() cache un mauvais découpage, comment détruire un effect dans un service et son vrai timing.

Angular Signals Bonnes pratiques Réactivité

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 Bonnes pratiques Angular

type vs interface en TypeScript : il est temps de trancher

13 décembre 2025

Ce que seul type sait faire, ce que seule interface sait faire, l'argument sémantique données contre contrats, et la règle ESLint qui fige le choix.

TypeScript Outillage Bonnes pratiques

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

27 octobre 2025

Quand utiliser input(), @Attribute() ou InjectionToken dans tes composants : données réactives, valeurs statiques, config globale et pattern hybride.

Performance Composants Signals Dependency Injection Bonnes pratiques

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

20 octobre 2025

Éliminer les div wrappers de tes composants Angular : styler l'élément host avec :host, définir son display, poser des host bindings, et les cas d'exception.

Composants DOM Performance Bonnes pratiques CSS

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

13 octobre 2025

Ton || écrase le 0 et la chaîne vide que ton utilisateur a saisis. Ce que ?? change vraiment : table de vérité, opérateur ??= et les pièges à éviter.

TypeScript Bonnes pratiques Angular

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 Clean Code Clean Architecture Signals Bonnes pratiques

📦 Installer et utiliser Zod en TypeScript

8 septembre 2025

Installer Zod, choisir entre parse et safeParse, valider une réponse HttpClient ou httpResource, inférer tes types avec z.infer et transformer tes données.

Angular TypeScript Zod Validation HttpClient Bonnes pratiques

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

15 août 2025

Le style guide Angular v20 (par feature, inject(), protected) et les pièges de la migration v19 vers v20 sur stack Nx + Vitest, côté tests.

Angular Angular 20 Migration Bonnes pratiques Architecture Zoneless Vitest Nx

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

17 juillet 2025

Ton backend te répond toujours en anglais ? Centralise l'en-tête Accept-Language dans un HttpInterceptor fonctionnel, depuis Transloco ou LOCALE_ID.

Angular HttpClient i18n Transloco Bonnes pratiques Angular 20

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 Bonnes pratiques

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

27 mai 2025

withComponentInputBinding injecte params, queryParams et data de route dans les input() d’un composant. Le piège des valeurs par défaut écrasées.

Angular Routing Signals Bonnes pratiques

Voir tous les sujets du blog