Lazy loaded routes avec Angular 8 : une nouvelle syntaxe.
Le lazy loading est une des fonctionnalités les plus intéressantes et utile sur Angular. L’ arrivée en mai 2019 de la version 8.0.0, a introduit une nouvelle syntaxe permettant l’import dynamique de module.

Syntaxe: avant/après
Pour créer une route lazy loadée, il était nécessaire de référencer le module correspondant avec une chaîne de caractère dans ce format spécifique: <chemin>#<nomDuModule>. Ce système empêchait la génération d’auto-complétion par les IDE et par conséquent la vérification des fautes de frappes.
Avec la version 8, l’importation de module avec une chaîne de caractère est maintenant dépréciée en faveur de l’importation dynamique. La propriété loadChildren accepte maintenant une fonction de callback qui sera exécutée de manière asynchrone lors de chaque navigation sur cette route. Cette nouvelle syntaxe peut vous sembler familière si vous êtes adeptes de react.
Comment migrer un projet ?
Lors d’une migration automatique vers la version 8 avec Angular CLI, la commande ng update se charge de scanner et mettre à jour automatiquement tous vos fichiers de routing.
Dans le cadre d’une migration manuelle, vous pouvez, en alternative, effectuer un find/replace sur votre IDE avec ces deux regex :
Find loadChildren: '(.*)#(.*)'
Replace loadChildren: () => import('$1').then(m => m.$2)
La plupart des projets Angular utilisent les systèmes de modules es6 ou es2015 ne supportant pas l’importation dynamique. Vous devriez donc potentiellement avoir une erreur du type:
Error: dynamic import is only supported when '--module' flag is commonjs or esnextPour résoudre le problème, remplacer la propriété module dans le tsconfig.json et le tsconfig.app.json par esnext.
Vos routing sont maintenant à jour ! 😉❤️
