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

发布时间：2020-12-17 07:53:16 所属栏目：安全来源：网络整理

导读：我正在尝试将已经使用Lazy加载模块的应用程序转换为AOT.我正在使用@ ngtools / webpack工具包来编译AOT代码,但是我遇到了一个错误,Angular无法找到Lazy加载模块的代码. ERROR in ./src/ngfactory asyncModule not found: Error: Can't resolve '/Library/Web

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

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'
},

这是我的设置的样子：

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

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

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

感谢您的帮助！

我正在努力使用AOT和Lazy加载的模块.

选择一个或另一个并不是prod构建的真正选择.

即使我真的需要这些功能,我也无法得到它们而不得不放弃.直到今天！

angular-cli两天前发布了：1.0.0-beta.21支持AOT和Lazy加载！

在你的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构建小27％
– 编写脚本时–prod –aot构建比–prod构建快31％
– AOT很酷！
– 可能有一个没有标志的bug,因为除非我错过了什么,否则我找不到我预期的延迟加载的块,我发现假设的延迟加载代码进入主包.我在Github上开了一个issue.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!