Angular惰性加载的特性模块

一：Angular-CLI建立应用

cmd命令：ng new lazy-app –routing (创建一个名叫 lazy-app 的应用，而 --routing 标识生成了一个名叫 app-routing.module.ts 的文件)

cd lazy-app (进入lazy-app项目)

二：创建一个带路由的特性模块

cmd命令：ng generate module customers –routing (创建一个 customers 目录，其中有两个文件：CustomersModule 和 CustomersRoutingModule)

备注：如果出现 Error: Cannot find module ‘@angular-devkit/core’，那就 npm install @angular-devkit/core

：向特性模块添加组件

cmd命令：ng generate component customers/customer-list (在 customers 目录中创建一个名叫 customer-list 的文件夹，其中包含该组件的四个文件)

：再添加一个特性模块

cmd命令：ng generate module orders –routing

ng generate component orders/order-list

三：建立UI

app.component.html

 <h1>
   {{title}}
 </h1> <button routerLink="/customers">Customers</button>
 <button routerLink="/orders">Orders</button>
 <button routerLink="">Home</button> <router-outlet></router-outlet>

四：配置路由

4.1：顶级路由：app-routing.module.ts (惰性加载的语法：loadChildren 后面紧跟着一个字符串，它指向模块路径，然后是一个 #，然后是该模块的类名)

 const routes: Routes = [
   {
     path: 'customers',
     loadChildren: 'app/customers/customers.module#CustomersModule'
   },
   {
     path: 'orders',
     loadChildren: 'app/orders/orders.module#OrdersModule'
   },
   {
     path: '',
     redirectTo: '',
     pathMatch: 'full'
   }
 ];

4.2：配置特性模块的路由

customers-routing.module.ts：

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router'; import { CustomerListComponent } from './customer-list/customer-list.component'; const routes: Routes = [
   {
     path: '',
     component: CustomerListComponent
   }
 ]; @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
 export class CustomersRoutingModule { }

orders-routing.module.ts：

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router'; import { OrderListComponent } from './order-list/order-list.component'; const routes: Routes = [
   {
     path: '',
     component: OrderListComponent
   }
 ]; @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
 export class OrdersRoutingModule { }

五：正常工作

cmd命令：ng serve –open

初始化后台：