NgModule dan Optimization – 5

Setelah kita berhasil setup lazy loading pada modul sebelumnya, berikutnya kita dapat mengatur pre-loading lazy loading module. Hal ini berguna jika internet connection jelek.

Untuk menggukana pre-load strategi, buka file app-routing.module.ts, tambahkan code dibawah (lihat bagian comment):

import { NgModule } from "@angular/core";
import { PreloadAllModules, PreloadingStrategy, RouterModule, Routes } from "@angular/router";

const appRoutes: Routes = [
    {path: '', redirectTo:'/recipes', pathMatch: 'full'},
    {path: 'recipes', loadChildren: ()=> import('./recipes/recipes.module').then(m=> m.RecipesModule)},
    {path: 'shopping-list', loadChildren: ()=> import('./shopping-list/shopping-list.module').then(m=> m.ShoppingListModule)},
    {path: 'auth', loadChildren: ()=> import('./auth/auth.module').then(m=> m.AuthModule)},
];

@NgModule({
    //tambahkan code preloadingStrategy
    imports: [RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules})],
    exports: [RouterModule]
})
export class AppRoutingModule{
}

Perhatian: Anda dapat membuat preloading strategy sendiri, namun ini diluar scope pembahasan tutorial ini.

Sharing is caring:

Leave a Comment