淺談Angular中的模組(NgModule)，延遲載入模組

本篇文章跟大家介紹一下Angular中的模組(NgModule)，延遲載入模組。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

環境:

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

##1. 摘要

模組(NgModule)是Angular的核心概念之一。模組(NgModule)用來組織業務程式碼，依照自己的業務場景，把元件、服務、路由打包到模組裡面。 【相關教學推薦：《

angular教學》】

#模組(NgModule)的主要作用：

• NgModule 組織業務程式碼，開發者可以利用NgModule 把關係比較緊密的組件組織在一起。

• NgModule 用來控制元件、指令、管道等的可見性，處於同一個NgModule 裡面的元件預設互相可見，而對於外部的元件來說，只能看到NgModule導出（exports）的內容。這樣就實現了封裝，只暴露希望暴露的元件、服務給呼叫者。

• NgModule 是 @angular/cli 打包的最小單位。打包的時候，@angular/cli 會檢查所有 @NgModule 和路由配置，如果你配置了非同步模組，cli 會自動把模組切分成獨立的 chunk（區塊）。在 Angular 裡面，打包和切分的動作是 @angular/cli 自動處理的，不需要你幹預。當然，如果需要，你也可以修改angular的編譯配置，基於Webpack 配一個環境出來，自訂打包規則。

• NgModule 是 Router 進行非同步載入的最小單位，Router 能載入的最小單位是模組，而不是元件。當然，也可以一個模組裡面只放一個元件是。

2. NgModule舉例、說明

前文說過，Angular中任何的Component、service，都必須屬於一個NgModule。所以，使用AngularCLI產生的框架程序，自動產生的元件，也是屬於一個Component的，並且標記為啟動模組。

這樣，angular網站啟動後，會以這個模組為入口，根據配置載入各個模組。

以下以預設產生的啟動模組為例，進行解釋：

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

#declarations，用來放元件、指令、管道的宣告；
• ##imports，用來導入外部模組。例如當前模組需要呼叫其他模組的元件，就需要加入到這裡。例如上面例子，導入了Browser和Routing 2個模組。
• providers，需要使用的第三方或其他模組的Service 都放在這裡；
• bootstrap，定義啟動元件。一個可以啟動的Angular專案（如果只是一個Library除外），需要定義一個啟動元件。
• exports, 宣告的元件、指令和管道可以在導入了本模組的模組下任何元件的範本中使用。導出的這些可聲明物件就是該模組的公共 API。換句話說，其他模組想用本模組中定義的內容，需要在這裡聲明。
• entryComponents， 如果其他模組想要動態載入本模組中的元件到視圖中， 那麼，這些元件需要寫入entryComponents。

3. Angular CLI生成模組

AngularCLI是一個很好很強大的工具集，可以幫助我們產生很多基礎程式碼、文件，包括創建一個模組，並且可以製定參數。

ng generate module <name> [options]

詳情請參考https://angular.io/cli/generate#module。

幾個簡單的範例：

建立feature1模組：
• ng generate module feature1

建立feature2模組， 並且帶路由：
• ng generate module feature2 --routing

建立一個延遲載入的feature3模組(延遲載入模組，參考下面章節)：
• ng generate module feature3 --route feature3 --module app.module

說明：

ng generate module xxx

可以簡寫為ng g m xxx

4. 延遲載入模組

延遲載入使得應用程式在啟動時不被載入，而是結合路由配置，在需要時才動態載入對應模組。這樣 Angular 就不需要在第一個介面從伺服器下載所有的文件，直到請求它，才下載對應的模組。這對提供效能和減少首屏的初始下載檔案尺寸有巨大的幫助，而且它可以輕鬆設定。

举例来说，上文创建了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命令，生成模块。

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

以上是淺談Angular中的模組(NgModule)，延遲載入模組的詳細內容。更多資訊請關注PHP中文網其他相關文章！