Existe-t-il un moyen de charger paresseux des composants, pas des modules, dans Angular?
Le chargement paresseux est une technique couramment utilisée. Cependant, dans Angular, il semble que le niveau de granularité de cette technique s’arrête au niveau du module.
Cela signifie que vous pouvez avoir le module principal qui se charge dans le navigateur, puis lors des occasions spéciales, les modules B, C et D peuvent être chargés paresseusement.
Presque tous les tutoriels sur le Web expliquent cela. Cependant, y a-t-il un moyen de charger les composants paresseusement?
Prenons cet exemple simple, où l'utilisateur entre dans l'application, et lorsque l'utilisateur clique sur le lien "factures", l'URL devient le nouvel itinéraire /invoice/list et une barre de progression indique le chargement, tandis que le composant invoices, y compris HTML et JS, est enregistré dans le navigateur dynamiquement avec le module principal et est affiché dans la sortie correspondante. Est-ce possible avec Angular?
Le chargement paresseux d'un composant n'est pas possible .. La raison de ce comportement est la structure de angular. Les composants angulaires doivent faire partie d'un module. Le module Angular est un conteneur dans lequel vous définissez tous les composants, services et tuyaux e.t.c. présent à l'intérieur. Lors de la construction de l'application dist, toutes les dépendances déclarées dans le module sont incluses pour constituer un bloc (code js transpilé) . Tous les modules directement importés forment ensemble le bloc principal, tandis que les modules marqués comme chargés paresseux forment le morceau qui se trouve sur le serveur jusqu'à ce que la route respective soit atteinte et qu'un appel à cet effet est lancé depuis le client . Les composants ne forment maintenant pas un morceau et il n'est donc pas possible
Un peu hacky ... mais possible (les futures versions de Angular (au-delà de la version 7) implémenteront une approche plus simple)
https://blog.angularindepth.com/dynamically-loading-components-with-angular-cli-92a3c69bcd28