anguar4 模块懒加载

angular2+实现了模块化，组件化，所以如果一次加载所有模块，势必界面反应会比较慢，用户体验不好，所以实现模块的懒加载，单机路由的时候才加载相应的模块。

如果实际开发中，有一级菜单，二级菜单，那么一级菜单每个项目就可以作为一个模块。
1、定义一个懒加载的模块，现在app.module中配置路由

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";

import {AppComponent} from './app.component';
import {MyFormComponent} from './my-form/my-form.component';
import {MyHttpComponent} from './my-http/my-http.component';

import {HttpClientModule} from "@angular/common/http";
import * as _ from "lodash";
import {HTTP_INTERCEPTORS} from "@angular/common/http";

import {
    ButtonModule
} from "primeng/primeng";
import {MyInterceptorService} from "./my-form/my-interceptor.service";


import {RouterModule, Routes} from "@angular/router";
import {OneModule} from "./one-module/one.module";

let routes: Routes = [
    {
        path: "",
        redirectTo: "one",
        pathMatch: "full"
    },
    {
        path: "one",
        loadChildren: "./one-module/one.module#OneModule"
    }
];

@NgModule({
    declarations: [
        AppComponent,
        MyFormComponent,
        MyHttpComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        HttpClientModule,
        ButtonModule,
        OneModule,
        RouterModule.forRoot(routes)
    ],
    providers: [
        // 导入拦截器
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MyInterceptorService,
            multi: true
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

2、one-module, 懒加载模块中定义自己的路由，实现二级菜单。

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";

import {AppComponent} from './app.component';
import {MyFormComponent} from './my-form/my-form.component';
import {MyHttpComponent} from './my-http/my-http.component';

import {HttpClientModule} from "@angular/common/http";
import * as _ from "lodash";
import {HTTP_INTERCEPTORS} from "@angular/common/http";

import {
    ButtonModule
} from "primeng/primeng";
import {MyInterceptorService} from "./my-form/my-interceptor.service";


import {RouterModule, Routes} from "@angular/router";
import {OneModule} from "./one-module/one.module";

let routes: Routes = [
    {
        path: "",
        redirectTo: "one",
        pathMatch: "full"
    },
    {
        path: "one",
        loadChildren: "./one-module/one.module#OneModule"
    }
];

@NgModule({
    declarations: [
        AppComponent,
        MyFormComponent,
        MyHttpComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        HttpClientModule,
        ButtonModule,
        OneModule,
        RouterModule.forRoot(routes)
    ],
    providers: [
        // 导入拦截器
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MyInterceptorService,
            multi: true
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

注意：

1. app.module.ts中配置懒加载路由语法

let routes: Routes = [
    {
        path: "",
        redirectTo: "one",
        pathMatch: "full"
    },
    {
        path: "one",
        loadChildren: "./one-module/one.module#OneModule"
    }
];

2、记住要在app.module.ts中导入懒加载的模块

imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        HttpClientModule,
        ButtonModule,
        OneModule,
        RouterModule.forRoot(routes)
    ]

3、添加路由

<router-outlet></router-outlet>

4、配置懒加载模块中的路由

// 子模块中的路由
let routes: Routes = [
    {
        path: '',
        component: OneComponent
    }
];

懒加载模块中不需要再次引入
import {BrowserModule} from '@angular/platform-browser';