Shulou(Shulou.com)05/31 Report--

This article mainly introduces "Angular lazy loading dynamic how to create components to display the declaration under this module". In daily operation, it is believed that many people have doubts about how to create components that display the declaration under this module in Angular lazy loading dynamic. The editor has consulted all kinds of materials and sorted out simple and useful operation methods. I hope it will be helpful to answer the question of "how to create the components declared under this module to display the Angular lazy loading dynamics"! Next, please follow the editor to study!

Environment: Angular 13.x.x

Angular supports lazily loading some page modules through routing to achieve the purpose of reducing the size of the first screen and improving the loading speed of the first screen. But this way of routing is sometimes unable to meet the demand.

For example, click a button and display a toolbar. I don't want the toolbar component to be packaged into main.js by default. Instead, the user clicks the button and dynamically loads the component and displays it.

Then why load 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 js generated by the module to become larger; by means of dynamic lazy loading, the toolbar component can be loaded only after the user clicks the button, so that the first screen size can be reduced.

Create a new angular project

To demonstrate, create a new angular project, and then a new ToolbarModule. The directory structure of the project is shown in the figure.

In order to achieve the purpose of demonstration, I put a base64 image of nearly 1m in the html template of ToolbarModule, then reference ToolbarModule directly in AppModule, then execute ng build, and the result is shown in the figure.

You can see that the package size has reached 1.42mb, that is, every time the user refreshes the page, regardless of whether the user clicks the Show Toolbar button or not, the content related to the toolbar component will be loaded, resulting in a waste of resources, so remove ToolbarModule from the imports statement of AppModule, and then load the toolbar component lazily when the user clicks Show for the first time.

Lazy loading toolbar components

First, create a new ToolbarModule and ToolbarComponent, and declare ToolbarComponent in ToolbarModule

Toolbar.module.tsimport {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.tsimport {Component, OnInit} from'@ angular/core' @ Component ({selector: 'toolbar', templateUrl:'. / toolbar.component.html', styles: [`svg {width: 64px; height: 64px;} img {width: 64px; height: 64px; object-fit: cover;} `,],}) export class ToolbarComponent implements OnInit {constructor () {} ngOnInit (): void {} toolbar.component.html

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

App.component.tsimport {Component, createNgModuleRef, Injector, ViewChild, ViewContainerRef} from'@ angular/core';@Component ({selector: 'root', template: `{isToolbarVisible? 'Hidden': 'show'} first screen content

`,}) export class AppComponent {title = 'ngx-lazy-load-demo'; toolbarLoaded = false; isToolbarVisible = false; @ ViewChild (' toolbar', {read: ViewContainerRef}) toolbarViewRefters: 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,});}}

The key lies in lines 32-42, which first imports the module in toolbar.module.ts through a dynamic import, then calls createNgModuleRef and passes in the Injector of the current component as the parent Injector of ToolbarModule, so the ToolbarModule is instantiated to get the moduleRef object, and finally, the createComponent method of the ViewContainerRef object declared in the html template is called to create the ToolbarComponent component

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,});}

At this point, let's take a look at the size of the ng build package after this operation.

You can see that the size of the first screen is not as outrageous as it was at the beginning, because the ToolbarModule and ToolbarComponent,ToolbarModule were not directly imported into AppModule and AppComponent and were typed into another js file (Lazy Chunk Files). When the display button is clicked for the first time, the js file containing ToolbarModule is loaded.

Note that in the following gif demonstration, click the display button for the first time, and there will be an extra request for the src_app_toolbar_toolbar_module_ts.js file in the browser's network debugging tool.

At this point, the study on "Angular lazy loading dynamics how to create components to display the declaration under the module" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.