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 class="flex">
  <svg t="1652618923451" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2104" width="200" height="200"><path d="M412 618m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z" fill="#C9F4EB" p-id="2105"></path><path d="M673.19 393h-333a25 25 0 0 1 0-50h333a25 25 0 0 1 0 50zM600.89 235H423.11C367.91 235 323 190.28 323 135.32v-12.5a25 25 0 0 1 50 0v12.5c0 27.39 22.48 49.68 50.11 49.68h177.78c27.63 0 50.11-22.29 50.11-49.68v-16.5a25 25 0 1 1 50 0v16.5c0 54.96-44.91 99.68-100.11 99.68zM673.19 585.5h-333a25 25 0 0 1 0-50h333a25 25 0 0 1 0 50zM467 778H340a25 25 0 0 1 0-50h127a25 25 0 0 1 0 50z" fill="#087E6A" p-id="2106"></path><path d="M739.76 952H273.62a125.14 125.14 0 0 1-125-125V197a125.14 125.14 0 0 1 125-125h466.14a125.14 125.14 0 0 1 125 125v630a125.14 125.14 0 0 1-125 125zM273.62 122a75.08 75.08 0 0 0-75 75v630a75.08 75.08 0 0 0 75 75h466.14a75.08 75.08 0 0 0 75-75V197a75.08 75.08 0 0 0-75-75z" fill="#087E6A" p-id="2107"></path></svg>
  <svg t="1652618941842"
       class="icon"
       viewBox="0 0 1024 1024"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       p-id="2247"
       width="200"
       height="200">
    <path d="M415 624m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z"
          fill="#C9F4EB"
          p-id="2248"></path>
    <path d="M695 790H362a25 25 0 0 1 0-50h333a25 25 0 0 1 0 50zM583 649H362a25 25 0 0 1 0-50h221a25 25 0 0 1 0 50zM262 287H129a25 25 0 0 1 0-50h133a25 25 0 0 1 0 50zM262 455.33H129a25 25 0 1 1 0-50h133a25 25 0 0 1 0 50zM262 623.67H129a25 25 0 0 1 0-50h133a25 25 0 0 1 0 50zM262 792H129a25 25 0 0 1 0-50h133a25 25 0 0 1 0 50z"
          fill="#087E6A"
          p-id="2249"></path>
    <path d="M761.76 964H295.62a125.14 125.14 0 0 1-125-125V209a125.14 125.14 0 0 1 125-125h466.14a125.14 125.14 0 0 1 125 125v630a125.14 125.14 0 0 1-125 125zM295.62 134a75.09 75.09 0 0 0-75 75v630a75.08 75.08 0 0 0 75 75h466.14a75.08 75.08 0 0 0 75-75V209a75.09 75.09 0 0 0-75-75z"
          fill="#087E6A"
          p-id="2250"></path>
    <path d="M617 376H443a25 25 0 0 1 0-50h174a25 25 0 0 1 0 50z"
          fill="#087E6A"
          p-id="2251"></path>
    <path d="M530 463a25 25 0 0 1-25-25V264a25 25 0 0 1 50 0v174a25 25 0 0 1-25 25z"
          fill="#087E6A"
          p-id="2252"></path>
  </svg>
  <Lets talk about lazily loading modules and dynamically displaying its components in Angular src="<这里应该是一张大小将近1M的base64图片, 内容较大, 就略去了...>" alt="">
</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<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>At this time, let’s take a look at the size of the package after executing <code>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!