懒加载是一种信仰。

在这个版本号飞起的年代，文章写完的一刹那，发现某几个依赖已经升级了好几个版本了。越是这样，还越是得给后来人写明白。

Webpack 3.5.5 & Angular 4.3.0

首先创建一个 Angular Module

作为一个懒加载的模块，就叫 LazyModule 吧，当然，你肯定知道这个 demo 名字。这个模块的实现跟其他 Angular 模块实现没什么两样。

// import things you need
// import things you made
const modules = []
const components = []
const services = []
@NgModule({
  imports: [ ...modules],
  declaration: [...components],
  provide: [...services]
})
export class LazyModule { }

虽然你可以随意添加你喜欢的内容到懒加载的模块，当然你得顾及 DRY

使用 angular-router-loader 给懒加载的模块添加路由路口

懒加载的触发是通过路由实现的。

export const route:Route = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  //...paths
  {path: 'lazy',loadChildren: './path/to/lazy.module#LazyModule'}
]
export const AppRoute = RouterModule.forRoot(routes)

通过 tsconfig 配置编译时对于 LazyModule 的处理方式

懒加载时，JIT vs. AOT 有些不同，可以分两个文件加载tsconfig.json 当然，也可以通过 aot 配置时传入 option 来区分。

tsconfig.aot.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "skipLibCheck": true,
    "lib": [
      "es2015",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "genDir": "./aot",
    "entryModule": "./angularApp/app/app.module#AppModule",
    "skipMetadataEmit": true
  },
  "compileOnSave": false,
  "buildOnSave": false
}

JIT tsconfig.jit.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "skipLibCheck": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },
  "exclude": [
    "node_modules",
    "angularApp/main-aot.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false
}

不同之处：

• sourceMap， 调试时候看到的是出错的源码，而非 error 位置，当然生产模式不需要这东西
• noImplicitAny， 如果你尚不习惯给形参添加类型，这一条置为 false会看到少一点的报错
• suppressImplicitAnyIndexErrors，这条是让 ts 更温和些，如果上一条 false 了，这条就不需要了
• skipLibCheck，这条设置为 true 会节约些时间
• typeRoots，添加 ts 解析路径，加速解析

升级 Webpack 配置处理 lazy loading

由于两边对于 loader 的使用不同，所以还是得分 AOT 和 JIT 版本

webpack.prod.js

output:{
  path: '',
  filename: '',
  chunkFileName: '', //新增名字
  publicPath: ''
}
// other configs...
rules:[
  {
    test: /\.ts$/,
    use: [
          'awesome-typescript-loader',
          'angular-router-loader?aot=true?genDir=/dist'
    ]
  }
]

其中 angular-router-loader 需要传入 aot 配置

webpack.dev.js

module:{
  rules:{
    test: /\.ts$/,
    loaders: [
           'awesome-typescript-loader',
           'angular-router-loader',
           'angular2-template-loader',        
           'source-map-loader',
           'tslint-loader'
       ]
  }
}

尝试，并debug

上边说了，你不可能在任何版本都这么干，debug & find the real way by your self.