Common chunks in Angular

This blog summarises on use case in which common chunk is created in an Angular application.

We will start by creating a new angular application using ng new my-app command present in cli.

In this application we will have a toast module which will show toast on click of a button.

We will load toast module inside multiple modules and check how its shipped to the user.

It doesn't included basic Angular commands like creating component, module.

Let's start then.

Add toast module in main app

As a first use case we will include the toast module in the main app module.

The toast module has a component and a service which is used to create the message and can be called by outside module where its injected, in our use case its app module.

As we have injected toast module in main app module its included in main chunk of angular app.

Toast module in a lazy module

Next we will create a user module where we will import toast module.

We can lazily load module in Angular using loadChildren in routes as done below.

const routes: Routes = [{
  path: 'user',
  loadChildren: () => import('./user/user.module').then(m => m.UserModule)
}];

We will create a router outlet in main app component template so that this module can be loaded on click.

We then have to create a routing module for user module so when user lands on user route, a component is shown.

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

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

RouterModule.forChild is used for any child routes in Angular.

We are ready with complete definition of user module and import it in App Module imports

@NgModule({
  declarations: [
    UserComponent
  ],
  imports: [
    CommonModule,
    UserRoutingModule,
    ToastModule
  ]
})
export class UserModule { }

As we have included toast module in user module and its lazily loaded its included in user chunk which is done by default in Angular.

If you want to try out, you can find code in this branch lazy_user_module

Toast module in another lazy module

Now we will create another lazy module which is account module and have account routing module similar to user module.

Account Module looks as below which has its own routing module and also imports toast module.

@NgModule({
  declarations: [
    AccountComponent
  ],
  imports: [
    CommonModule,
    AccountRoutingModule,
    ToastModule
  ]
})

This is how app routing code looks now -

const routes: Routes = [{
  path: 'user',
  loadChildren: () => import('./user/user.module').then(m => m.UserModule)
}, {
  path: 'account',
  loadChildren: () => import('./account/account.module').then(m => m.AccountModule)
}];

As you can see toast module is included in both the lazy modules user and account.

Does Angular includes it in main bundle so it's available to all lazy routing modules ?

No, doing so, it will increase the initial load time as it's not needed until user or account route is visited.

Angular smartly creates a new common chunk which only includes the toast module, so if account route is visited first, it will load toast module otherwise user route will load when visited.

From above screen shot it can be seen that a common chunk is created which has toast module code, user and account module code is separate.

From this we have learnt how smartly Angular takes care of performance ( uses internally webpack configuration ) by segregating common code in common chunk and keeping minimum code to be shipped up front to user.

This is all done by default in Angular and no separate configurations are needed.

The complete code can be found lazy_user_account_module.