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)个文件。有关编译器的更多信息，请查看此link。

如何解决您的问题？

您需要做的是：

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

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

Angular 2 AOT和Lazy loading

1 个答案:

路由行为

什么是* .ngfactory

如何解决您的问题？