如何使用路由延遲加載Angular模塊

這篇文章主要介紹了如何使用路由延遲加載Angular模塊，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

Angular 非常模塊化，模塊化的一個非常有用的特性就是模塊作為延遲加載點。延遲加載意味著可以在后臺加載一個模塊和其包含的所有組件等資源。這樣 Angular 就不需要在第一個界面從服務器下載所有的文件，直到您請求它，才下載相應的模塊。這對提供性能和減少首屏的初始下載文件尺寸有巨大的幫助。而且它可以很容易設置。

這里將使用一個簡單示例來演示這個特性是如何工作的。將應用拆分為多個不同的模塊，可以在需要的時候再進行延遲加載。

延遲加載的路由需要在根模塊之外定義，所以，你需要將需要延遲加載的功能包含在功能模塊中。

我們使用 Angular CLI 來創(chuàng)建一個演示項目：Demo.

ng new demo

然后，進入到 demo 文件夾中。安裝必要的 package。

npm i

在安裝之后，我們創(chuàng)建一個新的模塊 shop。在 angular CLI 中，ng 是命令提示指令，g 表示 generate，用來創(chuàng)建某類新 item。

創(chuàng)建新的名為 shop 的模塊就是：

ng g module shop

這會導致在 Angular 項目的 src/app 文件下創(chuàng)建一個新的文件夾，并添加一個名為 shop.module.ts 的模塊定義文件。

然后，我們在默認的 app 模塊和新創(chuàng)建的 shop 模塊中分別創(chuàng)建組件。

ng g c home/home
ng g c shop/cart
ng g c shop/checkout 
ng g c shop/confirm

CLI 會將 home 分配到 app 模塊中，將 cart、checkout、confirm 分配到 shop 模塊中，比如，

此時的 shop.module.ts 內容如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CheckoutComponent } from './checkout/checkout.component';
import { CartComponent } from './cart/cart.component';
import { ConfirmComponent } from './confirm/confirm.component';

@NgModule({
 imports: [
  CommonModule
 ],
 declarations: [CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }

修改根組件

Angular CLI 默認生成的 app.component.ts 組件是應用的主頁面，其中包含了一些關于 Angular 的介紹信息，我們將它修改成我們需要的內容。將默認生成的 app.component.html 內容修改為如下內容。

<!--The content below is only a placeholder and can be replaced.-->
<h2>Lazy Load Module</h2>
<a [routerLink]="['/shop']" >Shop Cart</a>
<router-outlet>
</router-outlet>

這里提供了一個占位的 router-outlet，各個組件將顯示在這里面。

同時，提供了一個導航鏈接，可以直接導航到 /shop/cart 組件。

創(chuàng)建路由

根路由

首先創(chuàng)建根路由。

我們在 app 文件夾中，添加一個名為 main.routing.ts 的路由配置文件。內容如下：

import { Routes } from '@angular/router';
// HomeComponent this components will be eager loaded
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'shop', loadChildren: './shop/shop.module#ShopModule' },
  { path: '**', component: HomeComponent }
];

其中，home 組件是正常的提前加載。

需要注意的是一下幾點：

1. 我們使用了 loadChildren 來延遲加載一個模塊。而不是使用提前加載所使用的 component。
2. 我們使用了一個字符串而不是符號來避免提前加載。
3. 我們不僅定義了模塊的路徑，還提供了模塊的類名。

在 app.module.ts 中啟用根路由。主要需要使用 forRoot 來啟用根路由。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes)
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

模塊路由

定義模塊路由

對于 shop 模塊來說，定義路由就沒有什么特別了，我們這里可以定義一個名為 shop.route.ts 的路由定義文件，內容如下所示：

import { Routes } from '@angular/router'; 
import { CartComponent } from './cart/cart.component'; 
import { CheckoutComponent } from './checkout/checkout.component'; 
import { ConfirmComponent } from './confirm/confirm.component'; 
export const routes: Routes = [   
     { path: '', component: CartComponent },   
     { path: 'checkout', component: CheckoutComponent },  
     { path: 'confirm', component: ConfirmComponent } 
];

還需要修改一下模塊定義文件 shop.module.ts 文件，以使用這個路由定義。注意我們需要使用 forChild 來啟用子路由。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CheckoutComponent } from './checkout/checkout.component';
import { CartComponent } from './cart/cart.component';
import { ConfirmComponent } from './confirm/confirm.component';

import { routes } from './shop.routing'; 
import { RouterModule } from '@angular/router';

@NgModule({
 imports: [
  CommonModule,
  RouterModule.forChild(routes)
 ],
 declarations: [CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }

已經一切就緒了。

測試延遲加載

現在啟動應用。

ng serve

默認會在 4200 端口啟動應用，請打開瀏覽器，訪問：http://localhost:4200/

訪問首頁的網絡訪問如下，其中并不包含功能模塊的內容。

我們先將網絡請求的歷史記錄清除掉。

然后點擊鏈接，訪問 /shop/cart 的時候，網絡請求如下，可以看到一個新的腳本文件被加載，這里包含的就是延遲加載的功能模塊。

僅僅功能模塊被加載了。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用路由延遲加載Angular模塊”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!