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é.

102 articles trouvés

Sujets populaires

📚 Nos articles

Angular : ton back button refetch la liste et perd les filtres (les 3 stratégies pour garder le state)

29 juillet 2026

Quand l'utilisateur revient sur ta liste après avoir ouvert un item, il perd ses filtres, son scroll et attend que la data recharge. RouteReuseStrategy, souvent brandi comme LA solution, est presque toujours le mauvais outil. Voici les 3 vraies stratégies pour préserver le state entre navigations, dans l'ordre où tu devrais les essayer. Valide Angular 17+.

Angular Routing RouteReuseStrategy Signals State Management

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

27 juillet 2026

Tu exposes ton state via `readonly user = this.userSignal` typé `Signal<User>`. En review, ça a l'air propre. Au runtime, un cast d'une ligne dans un composant feuille (`as WritableSignal<User>`) suffit pour écraser ton store : TypeScript refuse l'appel direct, mais ne voit pas passer le cast. Voici les 2 faux amis d'encapsulation signal, ce que `asReadonly()` protège vraiment (et ce qu'il ne protège pas), et le test à ajouter pour être sûr.

Angular Signals Service Bonnes pratiques Architecture

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

26 juillet 2026

Ton `enum` produit un objet dans ton bundle, refuse de passer dans un template Angular, et le jour où quelqu'un insère un état au milieu, tes commandes déjà persistées en `Sent` redeviennent `Pending`. Node 22 refuse purement et simplement de l'exécuter. Ce qu'il coûte vraiment, l'argument honnête en sa faveur (et pourquoi il tient moins qu'on croit), et les trois patterns de remplacement.

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 : `.sort()` trie en place, et rien dans le type ne l'en empêche. Comment déplacer l'immutabilité de la discipline vers le type - `readonly`, `ReadonlyArray`, `as const` - pourquoi `Readonly<T>` te trahit, et pourquoi le `DeepReadonly` qu'on trouve partout casse dès qu'il y a une `Date` dans ton état.

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 `?`, donc seize combinaisons, dont la plupart n'ont aucun sens métier. Résultat : des `!` partout, un dernier `return` poubelle, et un ordre de `if` qui tient lieu de spécification. Comment passer d'un sac d'optionnels à une union discriminée, ce que le narrowing te rend, les 4 pièges qui cassent le discriminant, et un piège de narrowing que les templates Angular rendent quasi inévitable (vérifié au compilateur).

TypeScript Angular Signals Bonnes pratiques Architecture Templates

ngComponentOutlet en Angular 20 : rendre des composants pilotés par la donnée, sans forêt de @switch

22 juillet 2026

Tu as un dashboard, un feed ou un formulaire dont la composition dépend de la donnée. Tu empiles les @switch et ça devient ingérable. ngComponentOutlet rend le bon composant à partir d'une classe, avec ses inputs, son injector et son contenu projeté. Version moderne, typage, registry et la limite à connaître sur les outputs.

Angular ComponentOutlet Composants dynamiques Signals

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

20 juillet 2026

Tu passes tes `@Output() EventEmitter` en `output()` et d'un coup ton `.pipe(debounceTime())` ne compile plus, ton service RxJS ne se branche plus, et tes tests hurlent. Les deux fonctions d'interop existent depuis Angular 17.3 (stables depuis la 19) mais 90% des migrations les ratent. Tour des 5 pièges qui cassent ton flux RxJS quand tu passes aux outputs signals, avec les patterns pour reprendre la main.

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

providers vs viewProviders : le service qui disparaît quand tu projettes ton contenu

10 juillet 2026

Ton Form fournit un Validation. Ton Field l'injecte. Ça marche en interne, ça pète en NG0201 quand le Field est projeté via ng-content. La différence entre providers et viewProviders tient en une règle de 3 lignes, et elle change la surface DI complète de ton composant. Démonstration, explication de la résolution, 4 patterns à connaître.

Angular Dependency Injection providers viewProviders Content Projection

SSR Angular : 4 erreurs avec `window` qui plantent ton rendu serveur (et le fix propre en 3 primitives)

8 juillet 2026

Tu actives le SSR, ton app fonctionnait très bien. Puis `ReferenceError: window is not defined` au premier build. Ou pire : ça build, mais ton API est refetchée, tes observers restent actifs côté serveur et ton bundle SSR gonfle. Voici les 4 erreurs Angular 17+ qui te piègent avec `window` / `document` / `localStorage` et le fix propre avec `PLATFORM_ID`, `DOCUMENT` et `afterNextRender`.

Angular SSR PLATFORM_ID afterNextRender Hydration Performance

ng-content : 6 patterns de projection Angular qui séparent le composant réutilisable du jetable

6 juillet 2026

Tu poses un <ng-content> dans ton composant Card et tu penses que c'est réutilisable. Sauf que le slot vide casse ton layout, l'ordre de tes select te joue des tours, un <ng-container> disparait dans un slot à sélecteur de tag, et détecter un slot vide te force à toucher au DOM. 6 patterns concrets, tous vérifiés en test, avec du signal-based contentChild pour boucler proprement en Angular 20+.

Angular Content Projection ng-content Composants Signals

Lazy-loader la CSS de co-branding : comment j'ai retiré 2,5 Mo du bundle initial sur une app à 30 marques

1 juillet 2026

Une app multi-marques qui charge les 30 thèmes CSS après le login alors qu'un user n'en verra qu'un seul. On est passés de 6,5 Mo à 4 Mo de bundle initial en lazy-loadant la feuille de la marque active. Voici la ligne de décision entre token-swap global et lazy-load, et le code Angular 17+ qui va avec (resolver, injection de link, FOUC, SSR).

Angular Performance CSS Co-branding Lazy Loading Bundle

Stylelint : arrête de reprendre tes devs sur les px en review, laisse la CI le faire

1 juillet 2026

Sur un gros projet Angular avec des devs qui tournent et une majorité de profils back, tu passes tes revues à répéter les mêmes remarques CSS : px au lieu de rem, hex en dur au lieu des tokens. Voici comment Stylelint transforme ces conventions en règles qui échouent la CI, avec la config exacte (px, hex, fonts) et le piège Tailwind v4 à désamorcer.

Stylelint CSS Angular Tailwind Accessibilité Design System

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

19 juin 2026

Tu skips l'auth avec un header X-Skip-Auth que ton interceptor lit puis supprime ? Tu désactives ton loader avec un meta non typé passé en query string ? HttpContext résout ça depuis Angular 12 : des tokens typés, scopés à une requête, lus dans n'importe quel interceptor fonctionnel. 5 patterns concrets, le before/after, et comment tester.

Angular HttpClient Architecture Interceptors Bonnes pratiques

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

AngularKit

Suite d'outils pour développeurs Angular francophones. Apprends, modernise tes réflexes, audite ta codebase.

Produits

Contact

Légal

© 2026 AngularKit. Tous droits réservés.