欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

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

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

« Angular 6|7 (Reactive) Forms Tutorial and ExampleRxJS 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 


RELATED TUTORIALS

RxJS of() Example: Mocking Data with an Angular 7/8 Service and Observables


Import & Read Local JSON Files in Angular 7/8 and TypeScript 2.9+


Fixing CORS Issues in Your Front-End Angular 7/8 App with Angular CLI Proxy Configuration


Angular 7/8 SEO: Adding Title and Meta Tags to Your Universal App


Angular 7/8 SEO: Rendering Your App on Server-side with Angular Universal


3 Methods for Reading Local JSON Files in Angular 7/8


Angular 7/8 HttpClient Interceptors: Mocking HTTP Requests Example


report this ad

Let's stay connected!

  •  

  •  

  •  

  •  

  •  

Get our books

Read our other tutorials

comments powered by Disqus
DMCA.com Protection Status


来自  https://www.techiediaries.com/angular-routing-lazy-loading-loadchildren/

普通分类: