Angular lève une ExpressionChangedAfterItHasBeenCheckedError lorsque la valeur d'une expression a été modifiée après la fin de la détection de changements. Angular ne lève cette erreur qu'en mode développement.
En mode développement, Angular effectue une vérification supplémentaire après chaque passage de la détection de changements, pour s'assurer que les bindings n'ont pas changé. Cela permet de repérer les erreurs où la vue reste dans un état incohérent. Cela peut se produire, par exemple, si une méthode ou un getter renvoie une valeur différente à chaque appel, ou si un composant enfant modifie des valeurs de son parent. Si l'un de ces cas se produit, c'est le signe que la détection de changements ne s'est pas stabilisée. Angular lève l'erreur pour garantir que les données sont toujours correctement reflétées dans la vue, ce qui évite un comportement erratique de l'interface ou une éventuelle boucle infinie.
Cette erreur survient souvent lorsque vous avez ajouté des expressions de template ou commencé à implémenter des lifecycle hooks comme ngAfterViewInit ou ngOnChanges. Elle est aussi fréquente lors de la gestion d'états de chargement et d'opérations asynchrones, ou lorsqu'un composant enfant modifie les bindings de son parent.
Déboguer l'erreur
Les source maps générées par la CLI sont très utiles pour le débogage. Remontez la pile d'appels jusqu'à trouver une expression de template dont la valeur affichée dans l'erreur a changé.
Assurez-vous que les bindings du template ne changent pas après l'exécution de la détection de changements. Cela implique souvent un refactoring pour utiliser le lifecycle hook de composant adapté à votre cas d'usage. Si le problème se situe dans ngAfterViewInit, la solution recommandée est d'utiliser un constructeur ou ngOnInit pour définir les valeurs initiales, ou d'utiliser ngAfterContentInit pour les autres bindings de valeurs.
Si vous faites un binding vers des méthodes dans la vue, assurez-vous que leur appel ne met à jour aucun des autres bindings du template.
Pour savoir quelle solution vous convient, lisez 'Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error', et pour comprendre l'utilité de cette vérification, lisez 'Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'.