Angular : Les tests et le débogage

Solution : Corriger du code

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avez-vous réussi à corriger le code de l'exercice précédent ? Découvrez ici une des solutions proposées par votre formateur.
06:17

Transcription

En souhaitant, que vous n'ayez pas eu trop de misères avec le challenge de la dernière vidéo, si oui, pas de problème, nous allons parcourir chacune des erreurs. Donc, il y avait trois erreurs, qui avaient été insérées et qui correspondent avec les types d'erreurs, qui peuvent se produire usuellement. Dont des injections, les erreurs avec les modules et des erreurs avec les décorateurs. En fait, la première chose qu'on va faire, on va s'assurer que tout est bien installé ici, donc, si vous voulez aller dans le terminal, on clique dans Afficher, Terminal intégré et on tente de démarrer le serveur avec ng serve. Si jamais vous n'avez pas fait un mpm-install avant, si vous voyez pas un fichier qui s'appelle Node, vous avez un petit problème. Juste s'assurer qu'il est ici, comme moi je l'ai ici, si vous ne l'avez pas, assurez-vous de faire mpm-install avant, autrement, vous allez voir qu'il va y avoir beaucoup d'erreurs, qui vont se passer à ce moment-là. Donc, si vous avez fait mpm-install, on est prêt à faire ng serve, donc on retourne dans le terminal, on fait ng serve, l'application part et on voit la première erreur. Cannot find module ../../hero donc, on ne trouve pas ce chemin d'accès dans le fichier dashboard.component.ts. Donc on va commencer ici, on va aller dans dashboard, dashboard.component.ts et on demande le fichier hero. Donc on monte en haut ici, on voit déjà qu'il y a une erreur ici, donc le fichier hero, en fait, le chemin d'accès, si on sort deux fois d'un folder, on se retrouve carrément à l'extérieur de la source ici, y'a pas de fichier qui s'appelle hero ici, donc on n'est pas dans le bon chemin. Donc si on sort une fois de dashboard, on voit qu'il y a un fichier hero donc on doit sortir seulement une fois, dans le chemin d'accès, donc, on va enlever deux dot puis un dash, on se retrouve dans le bon fichier ici, l'import ou l'injection d'un hero ne semble pas être bonne. Donc, on va aller voir dans le fichier hero.ts ici, on va voir l'export, l'export c'est hero au singulier et non heroes, donc on va aller ici, on voit que moi j'ai rajouté un s, c'est pas bon, donc, on va faire l'import comme il faut, on sauvegarde ça, ça devrait fixer cette erreur, je vois qu'il y a une autre erreur ici, sur la ligne 22 au cinquième caractère, error: Cannot find name 'heroService'. Did you mean the instance number ? Donc, qu'est ce qu'il dit ici, c'est qu'il peut pas trouver le nom heroService, est ce que vous vouliez dire this.heroService ? Bien souvent, vous avez des indications où est le problème. On va aller à la ligne 22, ici 22, comme de fait, j'ai enlevé le mot this. Ça c'est pas une erreur directement liée avec les modules, les injections, ou les décorateurs, c'est vraiment une erreur de JavaScript ou de TypeScript. Parce qu'ici on est pas dans cette classe hero.service, donc, le seul moyen d'accéder à hero.service, c'est d'être this parce qu'on est dans la classe, donc faire this.heroService, pour être en mesure d'accéder à ce fichier ou au service ici. Donc, on sauvegarde ça, tout semble bon ici, OK, donc on peut fermer le terminal ici, et on va dans l'application, ici, on fait un refresh du navigateur, on voit qu'il n'y a absolument rien ici, oh, il y a une petite erreur dans la console ici et comme je peux voir, il manque quelque chose. Donc on a une autre erreur ici. On voit qu'ici, Uncaught (in promise): Error: StaticIjectorError[HttpClient]. Comme on peut voir, c'est quelque chose relié au module, donc on va dans les modules ici, donc on retourne dans l'application on peut fermer les deux fichiers ici, on va aller directement dans les modules, la seule place qu'on a dans les modules c'est le app.module.ts, donc on est corrects, là ici, on a même pas de commentaire, on a rien, donc, on regarde par exemple, on charge HttpClientModule ici, mais on l'utilise pas, nulle part. On l'a pas dans les imports, donc c'est un petit problème, parce qu'on l'utilise dans notre service heroService, on l'utilise aussi dans le messageService, donc, on veut absolument que ça soit chargé dans l'application, on va le rajouter ici, donc HttpClientModule et on met une virgule à la fin, on sauvegarde, on retourne à l'application, elle recharge, tout est beau, donc, l'application marche de nouveau. Une chose que vous auriez pu faire, c'est, au fur et à mesure que vous faites vos tests, voir exactement où ce qui se passe le problème avec des breakpoints, comme par exemple, quand on a été dans le dashboard ici. Juste avant de passe this.getHeroes, parce que lui demande get.Heroes ici, il fait référence au this, on aurait pu faire un console.log ici, pour voir qu'est ce qui se passe, on aurait pu le faire un ici aussi, puis on aurait vu, ici, qu'il se passe rien. Qu'il n'y a rien qui passe ici avec le breakpoint. On serait pas rendus à cette console.log de toute façon, parce qu'avec la mention manquante de this, on aurait jamais passé au travers de la fonction ici. Donc, c'est très important en premier de tout le temps vérifier les messages dans le terminal, de l'application même, avant de passer à la console du navigateur, pour être certain d'avoir toutes les erreurs qui pourraient être dans notre code avant et ensuite, on peut faire d'autres tests avec les breakpoints. Donc, ceci conclut le challenge, en souhaitant que vous avez eu du plaisir à vous challenger avec ce petit problème.

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 !