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,bootstrap: [AppComponent]
})
export class AppModule {
}

注意：

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

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

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

imports: [
        browserModule,RouterModule.forRoot(routes)
    ]

3、添加路由

<router-outlet></router-outlet>

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

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

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

anguar4 模块懒加载

相关文章