web-dev-qa-db-fra.com

Comment vérifier si Angular Module de chargement paresseux fonctionne sur chrome?

Comment vérifiez-vous si les fichiers JS sont paresseux chargés pour le module ouvert à l'aide de Chrome Dev Outils?

javascriptangulargoogle-chromedebugginggoogle-chrome-devtools
7
Cold Cerberus

outre les autres réponses qui sont correctes, vous pouvez utiliser l'outil Augury pour déterminer quel module et composant chargé paresseusement, Augury angulaire EXTENDURE DE Chrome ET FireFox Dev outil pour le débogage Angular Applications.

  • une fois que vous l'installez et exécutez votre application angular, vous pouvez accéder à vos outils de développeur et cliquer sur l'onglet Augury, il vous montrera d'abord l'arborescence de composants comme suit:

enter image description here

  • vous cliquez ensuite sur Tree de routeur onglet et c'est la partie intéressante qui vous montre quel module/composant est chargé de manière dynamique et qui est chargé paresseusement ​​comme suit:

enter image description here

Augury aide également les développeurs Angular visualisez l'application à travers des arbres composants et des outils de débogage visuel. Les développeurs reçoivent une idée immédiate de leur structure d'application, de modifier les caractéristiques de détection et de performance.

1
Mahmoud Fawzy

Il y a plusieurs façons de vérifier cela.

  1. Après le service NG, le morceau de modules (pour lesquels le chargement paresseux est appliqué) sera affiché dans la borne. image montrant le morceau de fichier

  2. Augury angulaire sous l'arbre du routeur, il montrera ([paresseux]) pour les modules chargés de paresseux. Mais assurez-vous que vous n'avez pas importé que des modules dans App.Module.ts ou un module indépendant importé inutilement, car il chargera ce fichier (point de lecture 3)

  3. Dans les outils de développeur Web recherchez un fichier/composant (pour lequel une chargement paresseux est appliquée). Si le fichier est présent, même avant le chargement du module, le chargement paresseux ne fonctionne pas (le composant ne doit pas être visible avant que le module ne soit chargé). Le même fichier sera affiché après que ce module a été chargé.

disons que le projet contient un seul modules -> abc.module.ts abc.module.ts contient deux composants abc1.component.ts et abc2.component.ts Si le chargement paresseux fonctionne alors ABC1 et ABC2 ne devraient pas être affichés dans le résultat de la recherche. Lors de la recherche de fichiers dans des outils de développeurs Web (avant le chargement du module ABC). Après le chargement du module ABC, si vous recherchez à nouveau, il faut être affiché.

0
kanak goyal