Let's talk about lazily loading modules and dynamically displaying its components in Angular

How to lazily load a angular module and dynamically create the components declared in it without routing? The following article will introduce the method to you, I hope it will be helpful to you!

Environment: Angular 13.x.x

Angular supports lazy loading of certain page modules through routing. The first reduction has been achieved. The screen size is used to improve the loading speed of the first screen. However, this routing method sometimes cannot meet the needs. [Related tutorial recommendation: "angularjs video tutorial"]

For example, after clicking a button, a row of toolbars will be displayed. I don't want this toolbar component to be packaged into main by default. js, but the component is dynamically loaded and displayed after the user clicks the button.

So why does it need to be loaded dynamically? If the toolbar component is introduced directly into the target page component, then the code in the toolbar component will be packaged into the module where the target page component is located, which will cause the size of the js generated by the module where the target page component is located to become larger; through dynamic lazy loading, the toolbar component can be loaded only after the user clicks the button. In this way, the purpose of reducing the size of the first screen can be achieved.

For demonstration, create a new angular project, and then create a new ToolbarModule. The directory structure of the project is as shown in the figure

In order to achieve the purpose of demonstration, I put a nearly 1m base64 image in the html template of ToolbarModule, and then quoted it directly in AppModuleToolbarModule, and then execute ng build, the execution result is as shown in the figure

##You can see that the packaging size has reached

1.42mb, that is to say, every time the user refreshes this page, regardless of whether the user clicks the display toolbar button, the content related to the toolbar component will be loaded, which causes a waste of resources, so the following will ToolbarModule Remove from the imports declaration of AppModule, and then lazily load the toolbar component when the user clicks the first click to display.

Lazy loading of the toolbar component

First, create a new

ToolbarModule and ToolbarComponent, and declare ToolbarComponent## in

ToolbarModule

#toolbar.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ToolbarComponent } from './toolbar.component';
 
@NgModule({
    declarations: [ToolbarComponent],
    imports: [CommonModule],
    exports: [ToolbarComponent],
})
class ToolbarModule {}
 
export { ToolbarComponent, ToolbarModule };

toolbar.component.ts

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

@Component({
    selector: 'toolbar',
    templateUrl: './toolbar.component.html',
    styles: [
        `
    svg {
      width: 64px;
      height: 64px;
    }
    Lets talk about lazily loading modules and dynamically displaying its components in Angular {
      width: 64px;
      height: 64px;
      object-fit: cover;
    }
    `,
    ],
})
export class ToolbarComponent implements OnInit {
    constructor() {}

    ngOnInit(): void {}
}

toolbar.component.html

<p>
  <svg><path></path><path></path><path></path></svg>
  <svg>
    <path></path>
    <path></path>
    <path></path>
    <path></path>
    <path></path>
  </svg>
  <lets talk about lazily loading modules and dynamically displaying its components in angular>" alt="">
</lets></p>

Then write the code to load the toolbar module in the button click event handler of

AppComponent

:

app.component.ts

import { Component, createNgModuleRef, Injector, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
    selector: 'root',
    template: `
               <p class="container h-screen flex items-center flex-col w-100 justify-center">
                 <p class="mb-3"
                      [ngClass]="{ hidden: !isToolbarVisible }">
                   <ng-container #toolbar></ng-container>
                 </p>
                 <p>
                   <button (click)="toggleToolbarVisibility()"
                           class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">{{ isToolbarVisible ? &#39;隐藏&#39; : &#39;显示&#39; }}</button>
                   <p class="mt-3">首屏内容</p>
                 </p>
               </p>
             `,
})
export class AppComponent {
    title = &#39;ngx-lazy-load-demo&#39;;
    toolbarLoaded = false;
    isToolbarVisible = false;
    @ViewChild(&#39;toolbar&#39;, { read: ViewContainerRef }) toolbarViewRef!: ViewContainerRef;

    constructor(private _injector: Injector) {}

    toggleToolbarVisibility() {
        this.isToolbarVisible = !this.isToolbarVisible;
        this.loadToolbarModule().then();
    }

    private async loadToolbarModule() {
        if (this.toolbarLoaded) return;
        this.toolbarLoaded = true;
        const { ToolbarModule, ToolbarComponent } = await import(&#39;./toolbar/toolbar.module&#39;);
        const moduleRef = createNgModuleRef(ToolbarModule, this._injector);
        const { injector } = moduleRef;
        const componentRef = this.toolbarViewRef.createComponent(ToolbarComponent, {
            injector,
            ngModuleRef: moduleRef,
        });
    }
}

The key lies in lines 32-42. First, import the module in

toolbar.module.ts

through a dynamic import, and then call createNgModuleRef And pass in the Injector of the current component as the parent Injector of the ToolbarModule, thus instantiating the ToolbarModulegetmoduleRef object, and finally the of the ViewContainerRef object declared in the html template. createComponent method creates ToolbarComponent component<pre class='brush:php;toolbar:false;'>private async loadToolbarModule() { if (this.toolbarLoaded) return; this.toolbarLoaded = true; const { ToolbarModule, ToolbarComponent } = await import(&amp;#39;./toolbar/toolbar.module&amp;#39;); const moduleRef = createNgModuleRef(ToolbarModule, this._injector); const { injector } = moduleRef; const componentRef = this.toolbarViewRef.createComponent(ToolbarComponent, { injector, ngModuleRef: moduleRef, }); }</pre>At this time, let’s take a look at the size of the package after executing ng build

You can see that the first screen size is not as outrageous as it was at the beginning. The reason is that

ToolbarModule and # are not directly imported into

AppModule

and AppComponent ##ToolbarComponent, ToolbarModule are imported into another js file (Lazy Chunk Files). When the Display button is clicked for the first time, this package containing will be loaded. ToolbarModule's js filePay attention to the following gif demonstration. When you click the show button for the first time, there will be an extra pair src_app_toolbar_toolbar_module_ts.js# in the browser network debugging tool. ##File Request

For more programming-related knowledge, please visit: Programming Video

! !

The above is the detailed content of Let's talk about lazily loading modules and dynamically displaying its components in Angular. For more information, please follow other related articles on the PHP Chinese website!