星期六, 2019-11-09 14:38 — adminshiping1

Angular 6|7 Router: Lazy Loading Modules Tutorial (loadChildren() Example)

In this tutorial, we'll see by example Angular 6|7 routing and lazy loading components using feature modules and the loadChildren() method.

Lazy loading modules in Angular 6 allows applications to load modules only when they are needed i.e when you first visit the route(s) corresponding to component(s) belonging to the lazy loaded module. This has many benefits on your Angular 6 application such as the performance and size.

To add lazy loading in your Angular 6 application you need to setup routing to use the loadChildren() method and add components that you want to lazy-load inside feature modules i.e outside the main application module app-main.module.ts.

Note: This tutorial works with Angular 6 and Angular 7.

Creating an Angular 6 Project

We assume you have Angular CLI 6 installed. Now, you can create a project using the following command:

ng new angular6project

Creating a Feature Module

We now need to create a feature module using the following command:

$ ng g module lazymodule

We also need to create components inside our feature module:

$ ng g c lazymodule/component1
$ ng g c lazymodule/component2
$ ng g c lazymodule/component3

These commands will generate three components inside the lazymodule module.

Using `loadChildren()`

In the main routing file app-routing.module.ts, you need to use the loadChildren()method to lazy load the feature module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'lazymodule', loadChildren: './lazymodule/lazymodule.module#LazyModuleModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

The loadChildren() method takes the path to the module, appended to # appended to the module’s class name.

Routing Components Inside the Feature Module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


import { Component1Component } from './component1/component1.component';

import { Component2Component } from './component2/component2.component';

import { Component3Component } from './component3/component3.component';

const routes: Routes = [
    { path: '', component: Component1Component },
    { path: 'component2', component: Component2Component },
    { path: 'component3', component: Component3Component },
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  declarations: [Component1Component,Component2Component,Component3Component]
})
export class LazyModuleModule {}

In the feature module, we include the routes with RouterModule's forChild() method instead of the forRoot() method.

Conclusion

In this tutorial, we've seen how to lazy load modules with Angular 6 router using feature modules and the loadChildren() method.

Best Website BuilderCreate website for free Using free styles & layouts

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

17 Jul 2018

angular

« Angular 6|7 (Reactive) Forms Tutorial and Example RxJS 6 for Angular Developers Tutorial by Example »

Get our Learn Angular 8 in 15 Easy Stepsebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

report this ad

Online Courses (Affiliate)
If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers