Angular 惰性加載特性模塊

惰性加載特性模塊

默認(rèn)情況下，NgModule 都是急性加載的，也就是說它會在應(yīng)用加載時盡快加載，所有模塊都是如此，無論是否立即要用。對于帶有很多路由的大型應(yīng)用，考慮使用惰性加載 —— 一種按需加載 NgModule 的模式。惰性加載可以減小初始包的尺寸，從而減少加載時間。

如果需要本頁描述的具有兩個惰性加載模塊的范例應(yīng)用，參閱現(xiàn)場演練 / 下載范例。

惰性加載入門

本節(jié)會介紹配置惰性加載路由的基本過程。 想要一個分步的范例，參閱本頁的分步設(shè)置部分。

要惰性加載 Angular 模塊，請?jiān)?nbsp;?AppRoutingModule ??routes ?中使用 ?loadChildren ?代替 ?component ?進(jìn)行配置，代碼如下。

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

在惰性加載模塊的路由模塊中，添加一個指向該組件的路由。

const routes: Routes = [
  {
    path: '',
    component: ItemsComponent
  }
];

還要確保從 ?AppModule ?中移除了 ?ItemsModule?。想要一個關(guān)于惰性加載模塊的分步操作指南，請繼續(xù)查看本頁的后續(xù)章節(jié)。

分步設(shè)置

建立惰性加載的特性模塊有兩個主要步驟：

1. 使用 ?--route? 標(biāo)志，用 CLI 創(chuàng)建特性模塊。
2. 配置相關(guān)路由。

建立應(yīng)用

如果你還沒有應(yīng)用，可以遵循下面的步驟使用 CLI 創(chuàng)建一個。如果已經(jīng)有了，可以直接跳到導(dǎo)入與路由配置部分。 輸入下列命令，其中的 ?customer-app? 表示你的應(yīng)用名稱：

ng new customer-app --routing

這會創(chuàng)建一個名叫 ?customer-app? 的應(yīng)用，而 ?--routing? 標(biāo)識生成了一個名叫 ?app-routing.module.ts? 的文件，它是你建立惰性加載的特性模塊時所必須的。輸入命令 ?cd customer-app? 進(jìn)入該項(xiàng)目。

?--routing? 選項(xiàng)需要 Angular/CLI 8.1 或更高版本。

創(chuàng)建一個帶路由的特性模塊

接下來，你將需要一個包含路由的目標(biāo)組件的特性模塊。要創(chuàng)建它，在終端中輸入如下命令，其中 ?customers ?是特性模塊的名稱。加載 ?customers ?特性模塊的路徑也是 ?customers?，因?yàn)樗峭ㄟ^ ?--route? 選項(xiàng)指定的：

ng generate module customers --route customers --module app.module

這將創(chuàng)建一個 ?customers ?文件夾，在其 ?customers.module.ts? 文件中定義了新的可惰性加載模塊 ?CustomersModule?。該命令會自動在新特性模塊中聲明 ?CustomersComponent?。

因?yàn)檫@個新模塊想要惰性加載，所以該命令不會在應(yīng)用的根模塊 ?app.module.ts? 中添加對新特性模塊的引用。相反，它將聲明的路由 ?customers ?添加到以 ?--module? 選項(xiàng)指定的模塊中聲明的 ?routes ?數(shù)組中。

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

注意，惰性加載語法使用 ?loadChildren?，其后是一個使用瀏覽器內(nèi)置的 ?import('...')? 語法進(jìn)行動態(tài)導(dǎo)入的函數(shù)。其導(dǎo)入路徑是到當(dāng)前模塊的相對路徑。

基于字符串的惰性加載
在 Angular 版本 8 中，?loadChildren? 路由規(guī)范的字符串語法已棄用，建議改用 ?import()? 語法。不過，你仍然可以通過在 ?tsconfig ?文件中包含惰性加載的路由來選擇使用基于字符串的惰性加載（?loadChildren: './path/to/module#Module'?），這樣它就會在編譯時包含惰性加載的文件。
默認(rèn)情況下，會用 CLI 生成項(xiàng)目，這些項(xiàng)目將更嚴(yán)格地包含旨在與 ?import()? 語法一起使用的文件。

添加另一個特性模塊

使用同樣的命令創(chuàng)建第二個帶路由的惰性加載特性模塊及其樁組件。

ng generate module orders --route orders --module app.module

這將創(chuàng)建一個名為 ?orders ?的新文件夾，其中包含 ?OrdersModule ?和 ?OrdersRoutingModule ?以及新的 ?OrdersComponent ?源文件。使用 ?--route? 選項(xiàng)指定的 ?orders ?路由，用惰性加載語法添加到了 ?app-routing.module.ts? 文件內(nèi)的 ?routes ?數(shù)組中。

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  }
];

建立 UI

雖然你也可以在地址欄中輸入 URL，不過導(dǎo)航 UI 會更好用，也更常見。把 ?app.component.html? 中的占位腳本替換成一個自定義的導(dǎo)航，以便你在瀏覽器中能在模塊之間導(dǎo)航。

<h1>
  {{title}}
</h1>

<button type="button" routerLink="/customers">Customers</button>
<button type="button" routerLink="/orders">Orders</button>
<button type="button" routerLink="">Home</button>

<router-outlet></router-outlet>

要想在瀏覽器中看到你的應(yīng)用，就在終端窗口中輸入下列命令：

ng serve

然后，跳轉(zhuǎn)到 ?localhost:4200?，這時你應(yīng)該看到 "customer-app" 和三個按鈕。

這些按鈕生效了，因?yàn)?nbsp;CLI 會自動將特性模塊的路由添加到 ?app-routing.module.ts? 中的 ?routes ?數(shù)組中。

導(dǎo)入與路由配置

CLI 會將每個特性模塊自動添加到應(yīng)用級的路由映射表中。通過添加默認(rèn)路由來最終完成這些步驟。在 ?app-routing.module.ts? 文件中，使用如下命令更新 ?routes ?數(shù)組：

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

前兩個路徑是到 ?CustomersModule ?和 ?OrdersModule ?的路由。最后一個條目則定義了默認(rèn)路由。空路徑匹配所有不匹配先前路徑的內(nèi)容。

特性模塊內(nèi)部

接下來，仔細(xì)看看 ?customers.module.ts? 文件。如果你使用的是 CLI，并按照此頁面中的步驟進(jìn)行操作，則無需在此處執(zhí)行任何操作。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomersRoutingModule } from './customers-routing.module';
import { CustomersComponent } from './customers.component';

@NgModule({
  imports: [
    CommonModule,
    CustomersRoutingModule
  ],
  declarations: [CustomersComponent]
})
export class CustomersModule { }

?customers.module.ts? 文件導(dǎo)入了 ?customers-routing.module.ts? 和 ?customers.component.ts? 文件。?@NgModule? 的 ?imports ?數(shù)組中列出了 ?CustomersRoutingModule?，讓 ?CustomersModule ?可以訪問它自己的路由模塊。?CustomersComponent ?位于 ?declarations? 數(shù)組中，這意味著 ?CustomersComponent ?屬于 ?CustomersModule?。

然后，?app-routing.module.ts? 會使用 JavaScript 的動態(tài)導(dǎo)入功能來導(dǎo)入特性模塊 ?customers.module.ts?。

專屬于特性模塊的路由定義文件 ?customers-routing.module.ts? 將導(dǎo)入在 ?customers.component.ts? 文件中定義的自有特性組件，以及其它 JavaScript 導(dǎo)入語句。然后將空路徑映射到 ?CustomersComponent?。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CustomersComponent } from './customers.component';


const routes: Routes = [
  {
    path: '',
    component: CustomersComponent
  }
];

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

這里的 ?path ?設(shè)置為空字符串，因?yàn)?nbsp;?AppRoutingModule ?中的路徑已經(jīng)設(shè)置為 ?customers?，因此，?CustomersRoutingModule ?中的此路由已經(jīng)位于 ?customers ?這個上下文中。此路由模塊中的每個路由都是其子路由。

另一個特性模塊中路由模塊的配置也類似。

import { OrdersComponent } from './orders.component';

const routes: Routes = [
  {
    path: '',
    component: OrdersComponent
  }
];

確認(rèn)它工作正常

你可以使用 Chrome 開發(fā)者工具來確認(rèn)一下這些模塊真的是惰性加載的。在 Chrome 中，按 ?Cmd+Option+i?（Mac）或 ?Ctrl+Shift+j?（PC），并選中 ?Network ?頁標(biāo)簽。

點(diǎn)擊 Orders 或 Customers 按鈕。如果你看到某個 chunk 文件出現(xiàn)了，就表示一切就緒，特性模塊被惰性加載成功了。Orders 和 Customers 都應(yīng)該出現(xiàn)一次 chunk，并且它們各自只應(yīng)該出現(xiàn)一次。

要想再次查看它或測試本項(xiàng)目后面的行為，只要點(diǎn)擊 Network 頁左上放的 清除 圖標(biāo)即可。

然后，使用 ?Cmd+r?（Mac）或 ?Ctrl+r?（PC）重新加載頁面。

forRoot() 與 forChild()

你可能已經(jīng)注意到了，CLI 會把 ?RouterModule.forRoot(routes)? 添加到 ?AppRoutingModule ?的 ?imports ?數(shù)組中。這會讓 Angular 知道 ?AppRoutingModule ?是一個路由模塊，而 ?forRoot()? 表示這是一個根路由模塊。它會配置你傳入的所有路由、讓你能訪問路由器指令并注冊 ?Router?。?forRoot()? 在應(yīng)用中只應(yīng)該使用一次，也就是這個 ?AppRoutingModule ?中。

CLI 還會把 ?RouterModule.forChild(routes)? 添加到各個特性模塊中。這種方式下 Angular 就會知道這個路由列表只負(fù)責(zé)提供額外的路由并且其設(shè)計意圖是作為特性模塊使用。你可以在多個模塊中使用 ?forChild()?。

?forRoot()? 方法為路由器管理全局性的注入器配置。?forChild()? 方法中沒有注入器配置，只有像 ?RouterOutlet ?和 ?RouterLink ?這樣的指令。

預(yù)加載

預(yù)加載通過在后臺加載部分應(yīng)用來改進(jìn)用戶體驗(yàn)。你可以預(yù)加載模塊或組件數(shù)據(jù)。

預(yù)加載模塊

預(yù)加載模塊通過在后臺加載部分應(yīng)用來改善用戶體驗(yàn)，這樣用戶在激活路由時就無需等待下載這些元素。

要啟用所有惰性加載模塊的預(yù)加載，請從 Angular 的 ?router ?導(dǎo)入 ?PreloadAllModules ?令牌。

import { PreloadAllModules } from '@angular/router';

還是在 ?AppRoutingModule ?中，通過 ?forRoot()? 指定你的預(yù)加載策略。

RouterModule.forRoot(
  appRoutes,
  {
    preloadingStrategy: PreloadAllModules
  }
)

預(yù)加載組件數(shù)據(jù)

要預(yù)加載組件數(shù)據(jù)，可以用 ?resolver ?守衛(wèi)。解析器通過阻止頁面加載來改進(jìn)用戶體驗(yàn)，直到顯示頁面時的全部必要數(shù)據(jù)都可用。

解析器

創(chuàng)建一個解析器服務(wù)。通過 CLI，生成服務(wù)的命令如下：

ng generate service <service-name>

在新創(chuàng)建的服務(wù)中，實(shí)現(xiàn)由 ?@angular/router? 包提供的 ?Resolve ?接口：

import { Resolve } from '@angular/router';

…

/* An interface that represents your data model */
export interface Crisis {
  id: number;
  name: string;
}

export class CrisisDetailResolverService implements Resolve<Crisis> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
    // your logic goes here
  }
}

把這個解析器導(dǎo)入此模塊的路由模塊。

import { CrisisDetailResolverService } from './crisis-detail-resolver.service';

在組件的 ?route ?配置中添加一個 ?resolve ?對象。

{
  path: '/your-path',
  component: YourComponent,
  resolve: {
    crisis: CrisisDetailResolverService
  }
}

在此組件的構(gòu)造函數(shù)中，注入一個 ?ActivatedRoute ?實(shí)例，它可以表示當(dāng)前路由。

import { ActivatedRoute } from '@angular/router';

@Component({ … })
class YourComponent {
  constructor(private route: ActivatedRoute) {}
}

使用注入進(jìn)來的 ?ActivatedRoute ?類實(shí)例來訪問與指定路由關(guān)聯(lián)的 ?data ?值。

import { ActivatedRoute } from '@angular/router';

@Component({ … })
class YourComponent {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.data
      .subscribe(data => {
        const crisis: Crisis = data.crisis;
        // …
      });
  }
}

對惰性加載模塊進(jìn)行故障排除

惰性加載模塊時常見的錯誤之一，就是在應(yīng)用程序中的多個位置導(dǎo)入通用模塊?？梢韵扔?nbsp;Angular CLI 生成模塊并包括 ?--route route-name? 參數(shù)，來測試這種情況，其中 ?route-name? 是模塊的名稱。接下來，生成不帶 ?--route? 參數(shù)的模塊。如果你用了 ?--route? 參數(shù)，Angular CLI 就會生成錯誤，但如果不使用它便可以正確運(yùn)行，則可能是在多個位置導(dǎo)入了相同的模塊。

請記住，許多常見的 Angular 模塊都應(yīng)該導(dǎo)入應(yīng)用的基礎(chǔ)模塊中。