LAZY LOADING :

Le lazy loading permet d'eviter le chargement de TOUT nos modules lors du chargement de notre app, on pourra charger uniquement le module souhaité grace a la route :

auth-routing.module.ts

const routes: Routes = [
    {path: 'login', component: LoginComponent},
    {path: 'signup', component: SignupComponent}
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})

Et dans notre app-routing.module on va rajouter :

const routes: Routes = [
  ...
  { path: 'auth', loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)},
 
];

Bien penser a enlever l'import de authModule depuis notre app.module sinon on l'importe 2x! ! ET a rajouter l'import de AuthRoutingModule dans le module AuthModule.

Donc ici le chemin pour aller a notre composant login n'est plus '/login' comme il aurait pu être avant. Maintenant c'est '/auth/login' !

AUTRE EXEMPLE :

post-routing.module.ts

const routes: Routes = [
    { path: '', component: PostListComponent },
    { path: 'create', component: PostCreateComponent },
    { path: 'edit/:postId', component: PostCreateComponent }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})

app-routing.module.ts

const routes: Routes = [
  { path: '', loadChildren: () => import('./posts/post.module').then(m => m.PostModule) },
  { path: 'auth', loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule) },
  { path: '**', component: NotFoundComponent }
];

PRE LOADING

Nos composants ne contiennent pas enormement de code donc ils sont rapides a charger mais on peux encore ameliorer le tout en pré chargeant nos elements de lazy loading :

@NgModule({
// on rajoute preloadingStrategy
  imports: [RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
  exports: [RouterModule]
})

Ahead of time compilation :