Angular : Les tests et le débogage

Corriger les décorateurs Angular

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, Emmanuel Henri vous explique comment corriger les décorateurs dans votre code Angular.
04:22

Transcription

Maintenant, que vous êtes familier avec les décorateurs, regardons les types d'erreurs, qui peuvent arriver. La première chose que je veux que vous fassiez, c'est enlever le debugger ici ou mettez un commentaire, comme ça et sauvegardez. Ensuite, quand vous allez dans votre navigateur, assurez-vous que toutes les breakpoints qu'on avait mis antérieurement sont enlevées ici, donc, la seule chose que vous devriez voir, si on reprend l'application, vous devriez voir votre dashboard component, qui charge normalement l'application. Cliquez sur la console ici, parce que la plupart des erreurs des décorateurs apparaissent dans la console ici et non dans la console de l'application qu'on regarde depuis tantôt ici, dans le terminal. Donc, on va insérer quelques erreurs ici. La première chose que je veux que vous fassiez, c'est aller dans le component ici et tout simplement enlever la référence au HTML ici, comme ça. Donc, si on fait un résumé des décorateurs, c'est du metadata qui est passé à la classe qui est créée dans votre fichier, comme par exemple ici, Component passe un selector, un templateUrl et un styleUrls et il le passe au composant, qui est DashboardComponent, ici. Donc, la première erreur qu'on voit ici, elle est passée directement dans la classe, c'est parce qu'il n'y a pas de chargement ici d'application on la voit ici, donc c'est un peu normal, ensuite on va l'enlever celle-là, ici. Mais si, admettons que je faisais une erreur sur le nom du sélecteur ici, comme ça, je vois pas l'erreur ici, je ne vois pas l'erreur ici non plus, on peut même la recharger et tout va marcher pareil, donc si on clique sur Dashboard, il n'y a pas de problème, tout marche normalement. Donc, des fois, il va falloir faire des tests, pour s'assurer de capter ces erreurs-là, ici. Pour ce type d'erreur ici, on doit faire un test. Donc, si on fait une autre erreur dans le app.module.ts, si vous cliquez sur app, il est ici, app.module.ts, ouvrez-le, on va enlever une injection du HttpClientModule, qui est nécessaire pour faire un call vers les services, donc je vais mettre un commentaire ici, donc, il ne sera plus chargé dans l'application, on voit aucun commentaire ici, on retourne dans l'application et maintenant, on a un commentaire. Donc, il y a trois places que vous pouvez voir des commentaires d'injecteurs. La plupart du temps, les erreurs de décorateurs et des injections vont se retrouver pratiquement ici et si on lit ici, Uncaught (in promise): Error: StaticInjectorError[HttpClient]: donc on voit qu'il y a un problème, ici, il n'est pas injecté et il est utilisé dans un autre fichier. Donc, on va aller ici dans notre fichier et on va aller s'assurer qu'on l'injecte normalement. La plupart des erreurs des décorateurs vont se trouver où c'est qu'il y a des décorateurs, évidemment, mais il faut tout le temps vérifier la syntaxe de nos injections, ici. Faut s'assurer également que toutes les metadata qu'on passe dans la classe est bien nommée, comme, par exemple, on fasse pas d'erreur de syntaxe, @Component est vraiment ce qu'on a importé ici à la ligne 11, donc, on s'assure que la syntaxe est pareille ici et ainsi de suite. La plupart des erreurs que vous allez voir dans vos applications, que ça soit décorateur, que ça soit autre chose, bien souvent, c'est des erreurs de syntaxe. Bien souvent, c'est des erreurs où ce que vous avez pas écrit le mot comme il faut, il n'est pas rentré à la bonne place. Donc, regardez les erreurs, assurez-vous de bien comprendre ce que le terminal ou la console du navigateur vous donne comme erreur et ensuite, allez corriger ces erreurs-là. Mais, pour la plupart des erreurs, à 80, 90 % du temps, vous allez voir que c'est des erreurs, qui sont simples à corriger et c'est probablement une erreur que vous avez faite au niveau de la syntaxe.

Angular : Les tests et le débogage

Découvrez les erreurs communes de cet environnement de développement telles que les erreurs d'injection ou de transformation de données, ainsi que les bonnes pratiques de conduite de tests.

1h24 (20 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :7 juin 2018

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !