How To implement Lazy Loading in Angular

The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

If you need to update Angular CLI you can update easily by reinstalling it.

npm install -g @angular/cli

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve --open

ng new is used to generate angular boilerplate.

To implement the Lazy Loading in Angular we need to create a routing module and a module for that component Like in below image.

In above image have you seen posts-routing.module.ts and posts.module.ts

Now let's see what we need to code.

posts-routing.module.ts

On 14 line we need to specify as a RouterModule.forChild instead of root.

posts.module.ts

Now let's look into posts.module.ts

That's it we are done with child level.

Now we need to create a file app-routing.module.ts on root level it means inside the app folder.

Like how we create a routing in angular.

In app.module.ts we need to remove the declarations for the components which we would like to lazy load. Like we already declared the posts component inside the posts.module.ts

app.module.ts

This is our final output

Code repository

originally published at reactgo.com

Comments

[Stephen Chiang]

You can also specify what 'kind' of lazy load you want. The default is true lazy loading where the module isn't loaded until the user visits that module. Another is called prefetch where it's lazy loaded so it doesn't affect initial load of the app, but the lazy module is then loaded while the user is going through the app but not necessarily the lazy loaded module quick may provide a smoother transition between eager and lazy loaded modules.

Here's how to do it:

imports: [RouterModule.forRoot(ROUTES, 
    {preloadingStrategy: PreloadAllModules})]
})

Don't forget importing the dependency. You can specify per module by making your own version of this, there's an article on that out there. But as of right now, all or none is what comes out if the box from angular.

[Massimo Artizzu]

I wish Angular had component-based lazy loading...

[venkata gandi]

Correct me if iam wrong, we do have a way for it through template binding

inside the code we can read this variable through viewchild,
then through viewcontainer ref we can creatembeddedview(of respective component)
It will sit inside this template.

[Massimo Artizzu]

That's dynamically creating component instances, not component lazy loading.

What I mean is loading the code of a component only when said component is needed.

[dujards]

Hi,

I using Angular 7, and when attempting ng build --prod I get this error for all my components: Cannot determine the module for class *Component.

Any ideas ? You do not need to import all your lazy loading modules in your app.module ?

[Vivek Shingala]

Hello Sai

Thanks for this tutorial. I have a question for a line in above snippet. What does the below line do?

loadChildren: "../app/posts/posts.module#PostsModule"

[Sai gowtham]

We are referring to the posts.module.ts file just check out line 11 on posts.module.ts

[venkata gandi]

A new addition in Angular6, we will be referring directly to the module like
loadChildren:() => PostsModule();

[kanup]

You won't getting lazy loading if you do it this way (as you will be adding the reference).

[Rut Shah]

You can do this way. Just remove pair of braces.
loadChildren:() => PostsModule

[ajay yadav]

core.js:1992 ERROR Error: Uncaught (in promise): Error: No NgModule metadata found for 'SalesOrderModule'.
Error: No NgModule metadata found for 'Module'.
getting error in lazyloading please shortout

[Danilo Agostinho]

Show man! Thanks!