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 AppModule
ToolbarModule
, and then execute ng build
, the execution result is as shown in the figure
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.
ToolbarModule and
ToolbarComponent, and declare
ToolbarComponent## in
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 };
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 {} }
<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>
:
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 ? '隐藏' : '显示' }}</button> <p class="mt-3">首屏内容</p> </p> </p> `, }) export class AppComponent { title = 'ngx-lazy-load-demo'; toolbarLoaded = false; isToolbarVisible = false; @ViewChild('toolbar', { 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('./toolbar/toolbar.module'); const moduleRef = createNgModuleRef(ToolbarModule, this._injector); const { injector } = moduleRef; const componentRef = this.toolbarViewRef.createComponent(ToolbarComponent, { injector, ngModuleRef: moduleRef, }); } }
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 ToolbarModule
getmoduleRef
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:js;toolbar:false;">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,
});
}</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
ToolbarModule
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 file
Pay 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!