Angular - 4.1 Lire et corriger un message d'erreur Angular

Les erreurs font partie du développement, et il est normal d'en rencontrer. La console des outils de développement du navigateur affiche un message qui indique où se trouve le problème. Cette leçon montre comment lire ce message et remonter jusqu'à la cause, sur un exemple concret.

Ouvrir la console et lire le message

Lorsqu'un bouton ne fait rien, ouvrez la console JavaScript des outils de développement. Le message d'erreur est affiché en haut. Il indique d'abord le composant concerné, puis le numéro de ligne et la colonne. Ces informations permettent de retrouver l'endroit du problème.

Trouver la cause

Dans l'exemple, le message signale qu'il est impossible de lire la propriété push de undefined. Le numéro de ligne ne correspond pas toujours à votre code, car le projet est fusionné et reconstruit avant l'exécution. Il faut donc chercher le texte du message dans le code. L'appel à push se trouve dans la méthode addServer, déclenchée par le bouton.

Corriger la déclaration

La propriété servers est déclarée, mais elle n'est pas initialisée : sa valeur est undefined. Il suffit de l'initialiser avec un tableau vide. Après rechargement, le bouton ajoute bien les serveurs à la liste.

servers = [];

En résumé

Un message d'erreur Angular indique le composant, la ligne et la colonne concernés. Il ne faut pas paniquer : on lit le message exact et le fichier signalé. Dans l'exemple, une propriété déclarée mais non initialisée provoquait l'erreur.

Points clés

  • La console des outils de développement affiche le message d'erreur.
  • Le message indique le composant, le numéro de ligne et la colonne.
  • Le numéro de ligne peut différer du code source après reconstruction.
  • Une propriété déclarée sans valeur reste undefined.
  • Initialiser la propriété avec un tableau vide corrige l'erreur.

Questions fréquentes

Que faire si le message ne montre pas le problème clairement ?

Lisez le message exact et le fichier qu'il indique. Il faut essayer d'arriver à la racine de l'erreur, sans paniquer.

Pourquoi ouvrir la console dès le début ?

Quand rien ne se passe après un clic, la console affiche souvent le message qui explique le problème. C'est une bonne habitude de développement.

Le numéro de ligne est-il toujours exact ?

Non, la ligne indiquée peut correspondre au code final fusionné. Il faut alors chercher le texte du message dans votre propre code.