Angular 2 AOT和Lazy loading

Question

我有一个延迟加载其功能组件的应用程序.只要我不进行AOT编译(经过几天的努力,我就开始工作),一切都很好,花花公子.

我的初始页面加载速度非常快.但是,当我点击任何应该延迟加载该功能的导航链接时,我得到了404,这是正确的.有一个请求,myfeature.module.ngfactory.js但该文件不存在.我已经关注了开发网站上的食谱,但它没有详细介绍如何让延迟加载工作.我看到我的AOT编译创建了一个myfeature.module.ngfactory.ts但不创建myfeature.module.ngfactory.js文件.我该如何创建这个文件？我的tsconfig-aot.json文件看起来像这样:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "sourceMap": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5"
  },
  "files": [
    "app/shared/shared.module.ts",
    "app/app.module.ts",
    "app/myfeature/myfeature.module.ts",
    "main.ts"
  ],
  "angularCompilerOptions": {
    "skipMetadataEmit": true
  },
  "exclude": [
    "node_modules/*",
    "**/*-aot.ts"
  ]
}

我觉得我错过了什么.看起来引导过程是创建过程app.module.ngfactory.js但没有触发创建的过程 myfeature.module.ngfactory.js.

Answer 1

路由行为

配置:

const rootRoutingConfig = RouterModule.forRoot([{
  path: 'home',
  loadChildren: './home.module#HomeModule'
}]);

默认情况下,当用户导航到时/home,使用JiT的应用程序将具有以下行为:

使用SystemJS下载APP_BASE_HREF/home.module.js并在此之后使用HomeModule导出.

相反,当您使用AoT时,路由器的默认行为将是:

用SystemJS下载APP_BASE_HREF/home.module.ngfactory.js并使用HomeModule导出.

什么是*.ngfactory

home.module.ngfactory.js是一个由Angular的编译器生成的工件.在编译期间,编译器将为*.ngfactory.(js|ts)所有组件和模块生成文件.有关编译器的更多信息,请查看此链接.

如何解决您的问题？

你需要做的是:

1. 配置路由器用于从保存它们的位置加载捆绑包的模块加载程序.
2. 提供用于加载模块包的自定义回调.
3. 生成应用程序包并将它们存储在默认情况下将由模块加载器使用的位置.

通过第二种方法,我为角种子制作了一个示例.看看lazy分支.您可以通过运行:使用AoT和延迟加载来构建生产应用程序npm run build.prod.exp.请注意,示例不完整.它只应用基本捆绑而没有任何复杂的策略来处理适当的依赖性解析.