Chargement de plusieurs modules sous la même route parente en Angular

Question

Je cherche un moyen de charger plusieurs modules sous le même path en Angular. Par exemple, considérons que j'ai trois modules AModule, BModule et CModule chacun ayant son propre appel RouterModule.forChild. Maintenant, je veux monter tous ces modules sous site route.

Une façon que je l'ai réalisé cette chose est en enveloppant les routes dans RouterModule.forChild appel sous site itinéraire comme suit:

RouterModule.forChild([ 
    { 
    path: 'site', 
    children: [{}] // children goes here 
    } 
]) 

Je ne sais pas si cette approche est correcte mais il fonctionne très bien. Le seul problème que cette approche est que je dois spécifier canActivate dans chaque module que je veux monter sous site. Bien que ce ne soit pas un problème, je cherchais une solution plus propre.

Je sais qu'il existe une propriété loadChildren qui pourrait être utilisée pour charger des modules paresseusement. Mais je veux charger les modules avec impatience. J'utilise AngularCLI qui scinde le code du module que je spécifie en loadChildren dans un fichier JavaScript séparé que je ne veux pas. J'utilise AngularClI v1.2.0 et Angular v4.2.5.

Toute aide est fortement appréciée.

Merci

Answer 1

Je ne suis pas tout à fait clair sur votre objectif et ce que vous essayez d'atteindre en fin de compte, mais voici quelques réflexions.

Vous pouvez utiliser le loadChildren et "chargement paresseux" pour charger sur demande OU avec empressement. Si vous sélectionnez des routes très chargées, dès que votre route principale est chargée et que votre première vue est affichée, les autres modules marqués pour un chargement rapide sont immédiatement chargés de manière asynchrone. J'ai un exemple de ceci ici: https://github.com/DeborahK/Angular-Routing dans le dossier APM-Final.

Je ne comprends pas pourquoi vous ne voulez pas de division de module. Il peut considérablement améliorer les performances de démarrage (temps d'affichage de la première page) de votre application.

En plus de canActivate il y a aussi un canActivateChild donc vous pouvez mettre ceci sur le parent et ne pas avoir à le répéter pour chaque route. Les documents pour cela sont ici: https://angular.io/api/router/CanActivateChild