Angular 2 AOT 和延迟加载

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 的应用程序将具有以下行为:

With SystemJS download APP_BASE_HREF/home.module.js and after that use the HomeModule export.

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

With SystemJS download APP_BASE_HREF/home.module.ngfactory.js and use the HomeModule export.

什么是*.ngfactory

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

如何解决您的问题？

您需要做的是:

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

使用第二种方法，我为 angular-seed 制作了一个示例原型(prototype)。 .看看 lazy 分支。您可以通过运行以下命令使用 AoT 和延迟加载构建用于生产的应用程序:npm run build.prod.exp。请注意，示例不完整。它只应用基本的捆绑，没有任何复杂的策略来处理适当的依赖关系解析。