angular4 实现模块懒加载

1、目录结构，实现懒加载，延迟加载模块。

2、app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RootRoutes } from "./routes";


import { AppComponent } from './app.component';
import { RouterModule } from "@angular/router";

// 来加载模块
import { OperateModule } from "./children/operate.module";

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    BrowserModule,RouterModule.forRoot(RootRoutes,{
      useHash: true
    }),OperateModule
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

2、路由文件 route.ts

import {Routes} from "@angular/router";
export const RootRoutes: Routes = [
    {
        path: "",loadChildren: "./children/operate.module.ts#OperateModule"
    },{
        path: "operate",loadChildren: "./children/operate.module.ts#OperateModule"
    }
];

3、app.component.html

<router-outlet></router-outlet>

4、懒加载模块 children目录下的文件
operation.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { OperateComponent } from './operate.component';
import { RouterModule,Routes } from "@angular/router";

const route: Routes = [
    {
        path: "",component: OperateComponent
    }
]
@NgModule({
    declarations: [
        OperateComponent
    ],imports: [
        RouterModule.forChild(route)
    ],bootstrap: []
})
export class OperateModule { }

5、operation.component.ts

import {Component} from "@angular/core";
@Component({
    selector: "app-operate",templateUrl: "./operate.component.html"
})
export class OperateComponent {

}

6、operation.component.html

opertion html懒加载模块

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!