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)
    ],
    providers: [],
    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懒加载模块