带有延迟加载的 Angular2 AOT 无法解析 [延迟模块的路径].ngfactory.ts [英] Angular2 AOT with Lazy loading Can't resolve [path to lazy module].ngfactory.ts

问题描述

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

 ./src/ngfactory 异步中的错误找不到模块:错误:无法解析/Library/WebServer/Documents/envato"中的/Library/WebServer/Documents/envato-teams/src/ngfactory/src/app/components/container/projects.ngfactory.ts"-团队/src/ngfactory'@ ./src/ngfactory 异步@ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js@ ./src/ngfactory/src/app/app.module.ngfactory.ts@ ./src/main.aot.ts@多主

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

<代码>{路径:'项目'，loadChildren:'./components/container/projects#ProjectModule'},

这是我的设置的样子:

tsconfig:

<预><代码>...角度编译器选项":{"genDir": "./src/ngfactory","entryModule": "src/app/app.module#AppModule"}...

网络包:

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

Main.aot.ts

/** Angular 提供的提供者*/从@angular/platform-b​​rowser"导入{平台浏览器}；import { AppModuleNgFactory } from './ngfactory/src/app/app.module.ngfactory';从'./app/services/index'导入{Servicesconfig}；platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

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

//支持 .ts 文件.{测试:/\.ts$/,加载器:['@ngtools/webpack']，排除:[/\.(spec|e2e)\.ts$/]},

感谢您的帮助！

解决方案

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

选择其中一个并不是生产构建的真正选项.

即使我真的需要将这些功能组合在一起，我也无法获得它们而不得不放弃.直到今天！

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

在你的 angular-cli 项目中:

npm 缓存清理npm install --save-dev angular-cli@latest初始化

享受吧！

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

我做了一些基准测试:

+------------------------------+------------+--------------+-----------+------------+||主捆绑 |块 0 |脚本 |第一次油漆|+--------------+-------------+---------------+-----------+-------------+|ng服务|4.5 MB |不分裂|6075 毫秒 |5500+ 毫秒 ||ng 服务 --prod |334 KB |不分裂|5587 毫秒 |4750+ 毫秒 ||ng服务--aot |3.3 MB |326 KB |4011 毫秒 |4400+ 毫秒 ||ng serve --prod --aot |243 KB |18.1 KB |3860 毫秒 |4250+ 毫秒 |+--------------+-------------+---------------+-----------+-------------+

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

以下是我们从中可以记住的:
- --prod --aot 构建大小比 --prod 构建
小 27%- 在编写脚本时，--prod --aot 构建比 --prod 构建快 31%
- AOT 很酷！
- 可能有一个没有 aot 标志的错误，因为除非我错过了什么，否则我找不到我期望的延迟加载的块，我在主包中找到了假设的延迟加载代码.我在 Github 上打开了一个问题.

I am trying to convert an App that was already working with Lazy loaded modules into AOT. I am using the @ngtools/webpack toolkit to compile the AOT code, however I am getting into an error that Angular cant find the Lazy loaded module's code as it seems.

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

Worth mention in my app routes definition this project's module is loaded lazily :

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

This is how my setup looks like:

tsconfig :

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

Webpack :

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

Main.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);

In webpack I am compiling ts files with @ngtools/Webpack by doing :

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

Thank you for your help!

解决方案

I was struggling myself with AOT and Lazy loaded modules.

Choosing one or the other was not really an option for prod build.

Even tho I really needed those features together, I was not able to get them and had to give up. Until today !

angular-cli made a release two days ago : 1.0.0-beta.21 which supports AOT and Lazy loading !

In your angular-cli project :

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

Enjoy !

PS : Big thanks to angular-cli team which made an awesome work here ... !

EDIT :
I did some benchmarks :

+-----------------------+-------------+--------------+-----------+-------------+
|                       | 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    |
+-----------------------+-------------+--------------+-----------+-------------+

(results aren't super good because I have a lot of things opened and 3 monitors and my laptop is in pain ^__^).

Here's what we can remember from that :
- The --prod --aot build size is 27% smaller than --prod build
- The --prod --aot build is 31% faster when scripting than --prod build
- AOT is cool !
- There's probably a bug without aot flag because unless I missed something, I couldn't find the lazy loaded chunk I expected and I found the supposed lazy loaded code into the main bundle. I opened an issue on Github.

这篇关于带有延迟加载的 Angular2 AOT 无法解析 [延迟模块的路径].ngfactory.ts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！