我正在尝试将已经使用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.