Dynamically Loading Components with Angular CLI

Dynamically Loading Components with Angular CLI

This is great when the content has a route, but what about situations where the components are not a part of a separate route? In this post we will show how to leverage the Angular CLI to split components into their own bundles, which will allow them to only be loaded when needed.

This post and the code for it was a team effort, including my teammates Zack ReamRyan KaraBen Kindle, and Jason Lutz.

The code below was also inspired by the work of George Kalpakas, from PR#18428.

When moving from a multi-page application to a SPA, one of the problems that presents itself is the payload size upon initial load. By default, in an Angular application everything is bundled into one payload, which means as the application grows, so does the time that it takes to load.

The typical way to solve this problem is by utilizing the router to lazy load modules, as is shown in the Angular documentation. This is great when the content has a route, but what about situations where the components are not a part of a separate route?

In this post we will show how to leverage the Angular CLI to split components into their own bundles, which will allow them to only be loaded when needed.

Duping Angular CLI#

The Angular CLI, more specifically the @ngtools/webpack package, performs static analysis on an application during build time to locate all the lazy-loaded router paths. As each router path is analyzed Webpack creates a chunk that can then be loaded when route is activated. Contained within this chunk is the ModuleFactory for the given route.

Traditionally, being able to split without utilizing the router has been a difficult task, and is something that’s been requested. We can, however, take advantage of the static analysis and trick Angular CLI into splitting out our component modules, which enables us to dynamically load components.

Let’s dive in to how we can achieve this by creating a dynamic MessageComponent!

Creating our first Dynamic Component#

First, we create a folder called “dynamic-modules” to hold our components.

Within here, create another folder called “message”, to hold our MessageComponent. Next, add the following code:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-message',
  template: 'Hello World',
})
export class MessageComponent implements OnInit {
  constructor() { }

  ngOnInit() { }
}
<>

Now we need to create a module that declares this component. We will call this MessageModule.

import { NgModule } from '@angular/core';

import { DYNAMIC_COMPONENT } from '../../dynamic-component-loader/dynamic-component-manifest';
import { MessageComponent } from './message.component';

@NgModule({
  declarations: [
    MessageComponent,
  ],
  imports: [
  ],
  providers: [
  ],
  entryComponents: [
    MessageComponent,
  ],
})
export class MessageModule {}
<>

Note that, in order for a [ComponentFactory](https://angular.io/api/core/ComponentFactory) to be generated, the component must also be added to the module’s entryComponents.

angular angular-cli

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

How to Build an Angular Application with Angular CLI

How to set up the Angular CLI and generate a Trivial App

Useful command of Angular CLI

I made a small list of commands which use a lot in Angular CLI and I want to share my list with you.

Installing Angular 9 with the CLI | Angular Tutorial for Beginners (2020)

Learn what Angular is, what Angular CLI is and how to install a new Angular project by using the CLI.

How To Update Angular CLI | Angular 8 CLI Upgrade

Upgrade Angular CLI 8 required some steps. You must update both the global package and your project's local package dependencies to update Angular 7 to 8.