Lazy loading modules in Angular with loadChildren

Project: codever - File: app.routing.ts

To lazy load Angular modules, use loadChildren (instead of component) in your AppRoutingModule routes configuration as follows.

import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { PageNotFoundComponent } from './not-found.component';
import { SnippetNotFoundComponent } from './not-found/snippet-not-found.component';

const routes: Routes = [
  {
    path: 'personal',
    loadChildren: () => import('app/personal/personal-bookmarks.module').then(m => m.PersonalBookmarksModule)
  },
  {
    path: 'dashboard',
    loadChildren: () => import('app/user/dashboard/user-dashboard.module').then(m => m.UserDashboardModule)
  },
  {
    path: 'settings',
    loadChildren: () => import('app/user-settings/user-settings.module').then(m => m.UserSettingsModule)
  },
  {
    path: 'public',
    loadChildren: () => import('app/public/public.module').then(m => m.PublicBookmarksModule)
  },
  {
    path: 'my-snippets',
    loadChildren: () => import('app/codelet/codelet.module').then(m => m.CodeletModule)
  },
  {
    path: 'my-codelets',
    redirectTo: 'my-snippets',
  },
  {
    path: 'search',
    loadChildren: () => import('app/search-results/search-results.module').then(m => m.SearchResultsModule)
  },
  {
    path: '',
    redirectTo: 'public',
    pathMatch: 'full'
  },
  {path: '404-snippet', component: SnippetNotFoundComponent},
  {path: '**', component: PageNotFoundComponent}
];


/**
 * See App routing @https://angular.io/docs/ts/latest/guide/ngmodule.html
 */
@NgModule({
  imports: [
    RouterModule.forRoot(
      routes
    )
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Where a child module might look something like the SearchResultsModule:

const searchResultsRoutes: Routes = [
  {
    path: '',
    component: SearchResultsComponent
  }
];

@NgModule({
  declarations: [SearchResultsComponent],
  imports: [
    RouterModule.forChild(searchResultsRoutes),
    CommonModule,
    CodeletModule,
    SharedModule,
    MatTabsModule,
  ]
})
export class SearchResultsModule { }

Reference - https://angular.io/guide/lazy-loading-ngmodules


Shared with from Codever.land. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Subscribe to our newsletter for more code resources and news

Adrian Matei

Adrian Matei
Life force expressing itself as a coding capable human being

How to get current time in java enterprise and be easily testable

How to get current time in java enterprise and be easily testable code snippet Continue reading