A brief discussion on modules (NgModule) in Angular and delayed loading of modules

This article will introduce to you the module (NgModule) in Angular, lazy loading module. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Environment:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

1. Summary

Module (NgModule) is one of the core concepts of Angular. Modules (NgModule) are used to organize business code and package components, services, and routes into modules according to their own business scenarios. [Related tutorial recommendations: "angular tutorial"] The main function of the

module (NgModule):

• NgModule organizes business code, developers can Use NgModule to organize closely related components together.

• NgModule is used to control the visibility of components, instructions, pipes, etc. Components in the same NgModule are visible to each other by default, while for external components, only NgModule is visible. The content of exports. In this way, encapsulation is achieved and only the components and services you wish to expose are exposed to the caller.

• NgModule is the smallest unit of @angular/cli packaging. When packaging, @angular/cli will check all @NgModule and routing configurations. If you configure an asynchronous module, cli will automatically split the module into independent chunks. In Angular, the packaging and splitting actions are automatically handled by @angular/cli and do not require your intervention. Of course, if necessary, you can also modify the compilation configuration of angular, configure an environment based on Webpack, and customize packaging rules.

• NgModule is the smallest unit that Router can load asynchronously. The smallest unit that Router can load is a module, not a component. Of course, you can also put only one component in a module.

2. NgModule examples and explanations

As mentioned before, any Component or service in Angular must belong to an NgModule. Therefore, using the framework program generated by AngularCLI, the automatically generated component also belongs to a Component and is marked as a startup module.
In this way, after the angular site is started, this module will be used as the entry point and each module will be loaded according to the configuration.

The following takes the startup module generated by default as an example for explanation:

@NgModule({
  declarations: [
    AppComponent,
    MyComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• declarations, used to place declarations of components, instructions, and pipes;
• imports, Used to import external modules. For example, if the current module needs to call components of other modules, it needs to be added here. For example, in the above example, two modules, Browser and Routing, are imported.
• providers, the services of third parties or other modules that need to be used are placed here;
• bootstrap, defines the startup component. A startupable Angular project (except if it is just a Library) needs to define a startup component.
• exports, the declared components, directives and pipes can be used in the template of any component under the module that imports this module. These exported declarable objects are the public API of the module. In other words, if other modules want to use the content defined in this module, they need to declare it here.
• entryComponents, if other modules want to dynamically load components in this module into the view, then these components need to be written to entryComponents.

3. Angular CLI generation module

AngularCLI is a very good and powerful tool set that can help us generate a lot of basic code and files, including creating A module and can specify parameters.

ng generate module <name> [options]

For details, please refer to https://angular.io/cli/generate#module.

A few simple examples:

• Create feature1 module: ng generate module feature1

• Create a feature2 module with routing: ng generate module feature2 --routing

• Create a delayed-loaded feature3 module (delayed loading module, refer to the following chapter): ng generate module feature3 --route feature3 --module app.module

Instructions: ng generate module xxx can be abbreviated as ng g m xxx

4. Delay loading module

Delay loading causes the application not to be loaded at startup, but Combined with routing configuration, the corresponding module is dynamically loaded when needed. In this way, Angular does not need to download all the files from the server on the first interface until it is requested, and then downloads the corresponding module. This helps tremendously with performance and reducing the initial download file size above the fold, and it's easy to set up.

举例来说，上文创建了3个模块，主程序模块以及feature1、feature2会被打成一个包（js），feature3会被单独打一个包（js），当用户访问/feature3/* 的地址后，才会加载feature3这个包（js），否则永远不会请求、加载feature3的模块，从而提高性能（首页加载时间）。当一个项目大到一定程度时，最好考虑把某些模块设置为延迟加载模块。

延迟加载的路由定义（angular CLI会自动生成）：

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'feature3',
    loadChildren: () =>
      import('./feature3/feature3.module').then((m) => m.Feature3Module),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

最后复习一下生成延迟加载模块的命令ng generate module feature3 --route feature3 --module app.module，或者简写为 ng g m feature3 --route feature3 --module app.module。

5. 总结

• Angular项目，就是模块（NgModule）的一个集合，任组件、服务等必须包含在一个模块中。

• 延迟加载模块用于提高首页加载性能。

• Angular CLI命令，生成模块。

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of A brief discussion on modules (NgModule) in Angular and delayed loading of modules. For more information, please follow other related articles on the PHP Chinese website!