DEV Community

loading...
Cover image for How To implement Lazy  Loading in Angular

How To implement Lazy Loading in Angular

saigowthamr profile image Sai gowtham Originally published at reactgo.com Updated on ・2 min read

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
Enter fullscreen mode Exit fullscreen mode
ng new PROJECT-NAME
cd PROJECT-NAME
ng serve --open
Enter fullscreen mode Exit fullscreen mode

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.

folder structure

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

lazyloading in angular

Code repository

originally published at reactgo.com

Discussion

pic
Editor guide
Collapse
chiangs profile image
Stephen E. 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.

Collapse
maxart2501 profile image
Massimo Artizzu

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

Collapse
venkatagandi profile image
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.

Collapse
maxart2501 profile image
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.

Collapse
dujards profile image
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 ?

Collapse
vivekshingala profile image
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"

Collapse
saigowthamr profile image
Sai gowtham Author

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

Collapse
venkatagandi profile image
venkata gandi

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

Thread Thread
kanup profile image
kanup

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

Thread Thread
rutpshah profile image
Rut Shah

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

Collapse
ajay7868 profile image
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

Collapse
danilodev_silva profile image
Danilo Agostinho

Show man! Thanks!