Angular

Appearance

Comment faire du lazy loading sur Angular ? ​

A quoi ça sert ? ​

Le lazy loading consiste à charger de manière différée les différentes parties de votre application au fur et à mesure de leur utilisation par l'utilisateur. Cela permet de réduire la taille initiale de votre application et de la rendre plus rapide à charger.

Lorsque votre application est constituée de plusieurs modules, le lazy loading vous permet de ne charger que les modules nécessaires à l'affichage de la page courante, ce qui peut réduire considérablement le temps de chargement de l'application.

Le lazy loading est particulièrement utile dans le cas d'applications de grande taille, ou qui comportent de nombreuses fonctionnalités qui ne sont pas utilisées par tous les utilisateurs. En ne chargeant que les modules nécessaires, vous pouvez améliorer significativement les performances de votre application et offrir une expérience utilisateur plus fluide.

Le module a ses routes avec forChild ​

Vous devez configurer les routes de votre module de manière à ce qu'elles soient chargées de manière différée. Pour cela, vous pouvez utiliser la méthode forChild de la classe RouterModule au lieu de forRoot.

Voici un exemple de configuration de routes avec lazy loading :

ts
const routes: Routes = [
  {
    path: 'mon-module',
    component: MonComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)]
})
export class MonModuleModule { }
const routes: Routes = [
  {
    path: 'mon-module',
    component: MonComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)]
})
export class MonModuleModule { }

Dans cet exemple, le module MonModuleModule est chargé de manière différée lorsque l'utilisateur accède à la route /mon-module.

WARNING

Il est important de noter que forRoot et forChild ont des comportements différents en ce qui concerne la configuration des routes. forRoot doit être utilisé uniquement dans le module racine de votre application (généralement le module AppModule), tandis que forChild doit être utilisé dans les modules enfants qui sont chargés de manière différée.

Utiliser le Lazy Loading ​

Vous pouvez utiliser la fonction loadChildren dans la configuration de votre route. Cette fonction prend en paramètre une chaîne de caractères qui représente le chemin vers le module et le nom du module à charger de manière différée.

Voici un exemple de configuration de route avec lazy loading :

ts
const routes: Routes = [
  {
    path: 'mon-module',
    loadChildren: () => import('./mon-module/mon-module.module').then(m => m.MonModuleModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
const routes: Routes = [
  {
    path: 'mon-module',
    loadChildren: () => import('./mon-module/mon-module.module').then(m => m.MonModuleModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Dans cet exemple, le module MonModuleModule sera chargé de manière différée lorsque l'utilisateur accédera à la route /mon-module.

Il est également possible de spécifier un chemin relatif vers le module à charger, par exemple :

ts
loadChildren: './mon-module/mon-module.module#MonModuleModule'
loadChildren: './mon-module/mon-module.module#MonModuleModule'

Cela permet de charger le module MonModuleModule depuis le chemin ./mon-module/mon-module.module.

Enfin, vous pouvez utiliser la directive router-outlet dans votre template HTML pour indiquer l'endroit où le contenu du module chargé de manière différée doit être affiché.

html
<router-outlet></router-outlet>
<router-outlet></router-outlet>