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

初始化后台：

点击【Customers】后台

点击【Orders】后台

备注：forRoot() 包含的注入器配置是全局性的，比如对路由器的配置。forChild() 中没有注入器配置，只有像 RouterOutlet 和 RouterLink 这样的指令。