Lazy Loading Modules in Angular

There are other articles about this and the information on the Angular docs is pretty good, but, why wouldn’t I add my own summary here?

What is Lazy Loading, Why Do It?

When you open your angular app, a bunch of modules are going to be loaded, modules with their components, shared modules etc. The more you have to load, the longer it will take. Wow, unbelievable I know.

Anyway, to make your application faster, you may not want to load things that you are not going to need right away. Doing lazy loading takes a little bit more coding work so you have to decide on the right balance for your app.

So if you have decided you want something to be lazy loaded, then what?

Create the files for the lazy loading code

If you want to create a csharp lazy loading module (I call mine csharp, yours could be customers, cars or whatever), you could do this in the terminal for your project and Angular will create the files for you:

ng generate module csharp --route csharp --module app.module

That will generate the following files:

The ts, css, and html files are used the same ways as you would with regular components. The spec.ts has code generated for you. The ones that you may need to modify are the charp.module.ts and the csharp-routing.module.ts (or whatever name you gave when you created them).

cSharp.module.ts

In addition to the imports that have been created for you automatically, you also need to import any components that you are going to use in this csharp module and the component that you are creating (CSharpComponent).

Whatever you import here to be used in this module, you have to put under the declarations.

When you do this, you need to make sure those are not included in the declarations of any other module, including the app.module. If you are refactoring code, make sure you remove them from the app.module if they were there.

Then in the app.module or any other module, you can import the csharp.module and then add it to the imports. In app.module for example you could have:

import {CSharpModule} from ‘./csharp/csharp.module’;

And then CSharpModule under the imports array.

You don’t have to do this though if you don’t need to have that module available. I’m just noting you can do it, but you usually will do that for shared modules.

csharp-routing.module.ts

In this file, the generated code is enough in most cases. You will have a route like this:

const routes: Routes = [{ path: ‘’, component: CSharpComponent }];

Notice the path is “” and the component is the main one you got created from the Angular CLI. The reason we set it as “” is that it’s already going to come from the “csharp” route from the main route file (app-routing.module.ts).

In app-routing.module.ts, remove any existing path that you had going to the component that will now be handled by this lazy loading, and have this instead.

import { CSharpModule } from ‘./csharp/csharp.module’; //in app-routing.module.ts

{path: ‘csharp’, loadChildren: () => import(‘./csharp/csharp.module’).then(m => m.CSharpModule)},//in app-routing.module.ts

Notice we are importing the module, not the component. Also notice that we are setting the path as csharp, so we just have the “” in the csharp-routing.module.ts

Another important thing to notice. In csharp-routing.module.ts, we do not use forRoot for the route, we have to use forChild instead (otherwise we get an error). Notice also this is where we import the component to be displayed for this route. This it the whole code for csharp-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CSharpComponent } from './csharp.component';

const routes: Routes = [{ path: '', component: CSharpComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CSharpRoutingModule { }

The Route for It.

For the route, you would do something like this in your link or button or whatever:

[routerLink]=’[“/csharp”]’

Multiple Routes in Same Lazy Loading Elements

I have seen a few places where they explain ways to handle multiple routes on the same lazy loading module, but none of the code seems to be very “clean” so I’m not including that here. If I find out a nice way, I will add it to this article.

Check it

You can do F12 to get your dev tools and check the network tab to see what files are being loaded before and after your lazy loading changes, and you can also check the size of the main file when you build it with or without lazy loading.

That’s it, very short, but I find it was a bit confusing not having everything together.