惰性加載特性模塊

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

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

惰性加載入門

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

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

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

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

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

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

分步設(shè)置

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

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

建立應(yīng)用

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

ng new customer-app --routing

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

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

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

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

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

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

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

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

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

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

添加另一個(gè)特性模塊

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

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

這將創(chuàng)建一個(gè)名為 ?orders ?的新文件夾，其中包含 ?OrdersModule ?和 ?OrdersRoutingModule ?以及新的 ?OrdersComponent ?源文件。使用 ?--route? 選項(xiàng)指定的 ?orders ?路由，用惰性加載語(yǔ)法添加到了 ?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，不過(guò)導(dǎo)航 UI 會(huì)更好用，也更常見。把 ?app.component.html? 中的占位腳本替換成一個(gè)自定義的導(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?，這時(shí)你應(yīng)該看到 "customer-app" 和三個(gè)按鈕。

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

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

CLI 會(huì)將每個(gè)特性模塊自動(dòng)添加到應(yīng)用級(jí)的路由映射表中。通過(guò)添加默認(rèn)路由來(lái)最終完成這些步驟。在 ?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'
  }
];

前兩個(gè)路徑是到 ?CustomersModule ?和 ?OrdersModule ?的路由。最后一個(gè)條目則定義了默認(rèn)路由?？章窂狡ヅ渌胁黄ヅ湎惹奥窂降膬?nèi)容。

特性模塊內(nèi)部

接下來(lái)，仔細(xì)看看 ?customers.module.ts? 文件。如果你使用的是 CLI，并按照此頁(yè)面中的步驟進(jìn)行操作，則無(wú)需在此處執(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 ?可以訪問(wèn)它自己的路由模塊。?CustomersComponent ?位于 ?declarations? 數(shù)組中，這意味著 ?CustomersComponent ?屬于 ?CustomersModule?。

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

專屬于特性模塊的路由定義文件 ?customers-routing.module.ts? 將導(dǎo)入在 ?customers.component.ts? 文件中定義的自有特性組件，以及其它 JavaScript 導(dǎo)入語(yǔ)句。然后將空路徑映射到 ?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 ?這個(gè)上下文中。此路由模塊中的每個(gè)路由都是其子路由。

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

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

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

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

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

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

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

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

forRoot() 與 forChild()

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

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

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

預(yù)加載

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

預(yù)加載模塊

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

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

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

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

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

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

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

解析器

創(chuàng)建一個(gè)解析器服務(wù)。通過(guò) 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
  }
}

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

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

在組件的 ?route ?配置中添加一個(gè) ?resolve ?對(duì)象。

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

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

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

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

使用注入進(jìn)來(lái)的 ?ActivatedRoute ?類實(shí)例來(lái)訪問(wèn)與指定路由關(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;
        // …
      });
  }
}

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

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

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