Angular2 ng2 如何配置惰性加载

需要修改至少四个地方
1. 将子组件进行模块化操作
2.生成子组件module 、子组件router
3.配置主路由 信息 改为loadChild
4.配置appModule 删除引入

以product组件 为例 这个组件是一个一级菜单所以需要给这个页面生成一个module

1.生成 product.module组件
2.生成routers 路由列表（这里可以分为两个文件写）

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ProductComponent} from './product.component';
import {RouterModule} from '@angular/router';

const routes = [
  {
    path: '', // 注意： 这里一定要写空
    component: ProductComponent
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes) // 导入 product模块自己的路由
  ],
  exports: [ProductComponent], // 导出需要引用的模块
  declarations: [ProductComponent]
})
export class ProductModule {
}

　　

3.改造 主路由 使用惰性加载

import {NgModule} from '@angular/core';
import {
  Routes, RouterModule
} from '@angular/router';
import {IndexComponent} from './core/index/index.component';
const routes: Routes = [
  {
    path: 'index',
    component: IndexComponent
  },
  {
    path: 'aboutus',
    loadChildren: './core/aboutus/aboutus.module#AboutusModule'
  },
  {
    path: 'product', // 这里需要填写路径
    // 使用惰性加载 其中 #之前是 product.module 的 路径
    // #之后是 导出的module 名称
    loadChildren: './core/product/product.module#ProductModule'
  },
  {
    path: '**', // 路由错误的时候 跳转首页
    redirectTo: ''
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: true
  })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

　　

4.修改 app.module 主模块 信息

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {ComponentsModule} from './components/components.module';
import { IndexComponent } from './core/index/index.component';
import {AppRoutingModule} from './app-routing.module';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    IndexComponent,
  ],
  // 重要！ 删除需要 惰性加载的module  如果这里添加了 惰性加载的模块 那么将不是惰性加载
  // 这里不需要加入 需要惰性加载的module
  // 只需要保留 不需要惰性加载的模块即可
  imports: [
    BrowserModule,
    FormsModule, // 双向数据绑定 module
    ComponentsModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

　　

在app.component.html 中 测试

<ul>
  <li>
    <a routerLink="index"> 首页 </a>
  </li>
  <li>
    <a routerLink="aboutus"> 关于我们 </a>
  </li>
  <li>
    <a routerLink="product"> 产品简介 </a>
  </li>

</ul>

<router-outlet></router-outlet>

　　

这个时候 进行点击测试 如果页面中出现 并且只出现过一次 js module 文件 则说明 成功

（下图是我配置的两个惰性加载module 其中一个是product 一个是aboutus）