具有延迟加载的 Angular2 AOT 无法解析 [延迟模块的路径].ngfactory.ts

Question

我正在尝试将已经使用延迟加载模块的应用程序转换为 AOT。我正在使用 @ngtools/webpack 工具包来编译 AOT 代码，但是我遇到了一个错误，即 Angular 无法像看起来那样找到延迟加载模块的代码。

ERROR in ./src/ngfactory async
Module not found: Error: Can't resolve '/Library/WebServer/Documents/envato-teams/src/ngfactory/src/app/components/container/projects.ngfactory.ts' in '/Library/WebServer/Documents/envato-teams/src/ngfactory'
@ ./src/ngfactory async
@ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
@ ./src/ngfactory/src/app/app.module.ngfactory.ts
@ ./src/main.aot.ts
@ multi main

在我的应用程序路由定义中值得一提的是这个项目的模块是延迟加载的:

{
  path: 'projects', loadChildren: './components/container/projects#ProjectModule'
},

这是我的设置的样子:

配置文件:

...
"angularCompilerOptions": {
  "genDir": "./src/ngfactory",
  "entryModule": "src/app/app.module#AppModule"
}
...

网页包:

new ngtools.AotPlugin({
    tsConfigPath: './tsconfig.aot.json',
}),

主.aot.ts

/*
* Providers provided by Angular
*/
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './ngfactory/src/app/app.module.ngfactory';

import { Servicesconfig } from './app/services/index';

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

在 webpack 中，我正在使用 @ngtools/Webpack 编译 ts 文件:

// Support for .ts files.
{
  test: /\.ts$/,
  loaders: ['@ngtools/webpack'],
  exclude: [/\.(spec|e2e)\.ts$/]
},

感谢您的帮助!

Answer 1

我一直在为 AOT 和延迟加载模块而苦苦挣扎。

二选一并不是产品构建的真正选择。

即使我确实需要这些功能，但我无法获得它们而不得不放弃。直到今天!

angular-cli 两天前发布了一个版本:1.0.0-beta.21 支持 AOT 和延迟加载!

在你的 angular-cli 项目中:

npm cache clean  
npm install --save-dev angular-cli@latest  
ng init

尽情享受吧!

PS:非常感谢 angular-cli 团队，他们在这里做了很棒的工作......!

编辑:
我做了一些基准测试:

+-----------------------+-------------+--------------+-----------+-------------+
|                       | Main bundle |   Chunk 0    | Scripting | First paint |
+-----------------------+-------------+--------------+-----------+-------------+
| ng serve              | 4.5 MB      | Not splitted | 6075 ms   | 5500+ ms    |
| ng serve --prod       | 334 KB      | Not splitted | 5587 ms   | 4750+ ms    |
| ng serve --aot        | 3.3 MB      | 326 KB       | 4011 ms   | 4400+ ms    |
| ng serve --prod --aot | 243 KB      | 18.1 Kb      | 3860 ms   | 4250+ ms    |
+-----------------------+-------------+--------------+-----------+-------------+

(结果不是很好，因为我打开了很多东西和 3 个显示器，我的笔记本电脑很痛苦 ^__^)。

以下是我们可以从中记住的内容:
- --prod --aot 构建大小比 --prod build
小 27% - 编写脚本时，--prod --aot 构建比 --prod build
快 31% - AOT 很酷!
- 可能存在没有 aot 标志的错误，因为除非我遗漏了什么，否则我找不到我预期的延迟加载 block ，并且我在主包中找到了假定的延迟加载代码。我开了一个issue在 Github 上。