详解使用路由延迟加载 Angular 模块(2)

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 端口启动应用，请打开浏览器，访问：:4200/

访问首页的网络访问如下，其中并不包含功能模块的内容。

我们先将网络请求的历史记录清除掉。

然后点击链接，访问 /shop/cart 的时候，网络请求如下，可以看到一个新的脚本文件被加载，这里包含的就是延迟加载的功能模块。

仅仅功能模块被加载了。