Angular Angular-22 Onpush Change-Detection Changedetectionstrategy Eager Markforcheck Signals Performance Zoneless Migration Typescript Front-End Detectchanges

Maitrisez OnPush devenu strategie par defaut en Angular 22 : declencheurs de detection, echappatoire Eager, pieges de migration, markForCheck et Signals avec exemples.

Sommaire
- Le grand basculement d'Angular 22
- Rappel : Default vs OnPush
- Ce qui change concrètement en v22
- Ce qui rend une vue « sale » en OnPush
- L'échappatoire : ChangeDetectionStrategy.Eager
- Les pièges courants après migration
- markForCheck() et Signals : qui fait quoi
- Migrer son application étape par étape
- Tester un composant OnPush
- Performance : mesurer le gain réel
- Conclusion

Le grand basculement d'Angular 22

Pendant des années, créer un composant Angular performant impliquait un geste rituel : ajouter changeDetection: ChangeDetectionStrategy.OnPush dans chaque @Component. Oublier ce réglage condamnait l'application à vérifier l'intégralité de l'arbre de composants à chaque clic, chaque setTimeout, chaque requête HTTP.




Angular 22 met fin à ce rituel
: OnPush devient la stratégie de détection de changement
*par défaut*
.

Ce n'est pas un détail cosmétique. C'est l'un des changements les plus structurants de la version, dans la continuité des Signals (Angular 16+), de la détection sans zone (
*zoneless*
, Angular 18+) et de la stabilisation du graphe réactif. Le message d'Angular est clair : la réactivité fine pilotée par Signals remplace la détection globale héritée de Zone.js. Faire de OnPush le défaut, c'est aligner le comportement par défaut du framework sur ses propres recommandations de performance.

Mais un changement de défaut est aussi un
breaking change
. Des composants qui « marchaient » uniquement parce qu'Angular vérifiait tout en permanence peuvent cesser de se rafraîchir. Cet article explique le mécanisme, ce qui change précisément, comment repérer et réparer les composants cassés, et comment utiliser l'é

📌 Angular 22 : OnPush par défaut, le guide pratique (Front)
🏢 angularforall
📍 Front