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懒加载模块

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...