angular4 模块懒加载

( 在项目目录下使用命令行工具)

1. ng g module confirm-order --routing

2. ng g component confirm-order  

(注意顺序，先创建module，然后增加组件时angular-cli会自动将component导入到module中)

3. 配置路由confirm-order-routing.module.ts

const routes: Routes = [
    {
        path:  '',
        component: ConfirmOrderComponent,    
        data: { title: '确认订单' }
    }
];

4.配置路由app-routing.module.ts

const routes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },

    {
        path: 'home',
        loadChildren: './home/home.module#HomeModule'
    },

    {
        path: 'confirm-order',
        loadChildren: './confirm-order/confirm-order.module#ConfirmOrderModule'
    }
];

最后附上部分截图:

图1. 项目结构

   

 

图2. ConfirmOrderModule模块

 

图3. ConfirmOrderRoutingModule路由模块

 

图4. AppRoutingModule路由模块