https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
使用ngc部件工作,它生成一个文件夹.
但是,当涉及到使用汇总部分的树摇动时,我遇到了这个错误:
Error: Could not resolve '../aot/app/app.module.ngfactory' from ...\app\main-aot.js at Error (native) at ...\node_modules\rollup-plugin-node-resolve\dist\rollup-plugin-node-resolve.cjs.js:78:21 at ...\node_modules\resolve\lib\async.js:56:18 at load (...\node_modules\resolve\lib\async.js:70:43) at onex (...\node_modules\resolve\lib\async.js:93:31) at ...\node_modules\resolve\lib\async.js:23:47 at FSReqWrap.oncomplete (fs.js:82:15)
我错过了什么吗?
@angular:2.4.4
汇总:0.41.4
解决方法
这里有两个重要的注释:
>您需要将这些ts文件编译为es2015模块,以便从“树摇动”中受益.这意味着必须有一个仅指向main-aot.ts文件的配置文件(tsconfig-compile-aot.json).
>在步骤1之后,项目中的所有相关ts文件将编译为es2015模块.如果你在开发环境中使用systemjs作为模块加载器和commonjs模块(如在Angular的教程中),在使用汇总之后,你需要再次将你的ts文件编译为commonjs模块,以避免系统问题.
以下是确切的步骤:
>使用ngc和tsconfig-aot.json将app.module编译为a20文件夹作为es2015模块.
>使用tsc和tsconfig-compile-aot.json编译main-aot.ts文件,再次作为es2015模块并生成js文件.
>将您的输入文件(main-aot.js)传递给汇总.现在它应该生成你的输出文件没有任何错误.
>如果要继续使用systemjs进行开发,请使用tsconfig.json编译app / ts文件,将它们再次转换为commonjs模块.
我创建了一个使用以下步骤的演示应用程序:
https://github.com/forCrowd/Labs-Angular-AOTConfiguration
>安装节点包
>运行gulp – 默认任务
>打开index.html for“Development – SystemJS”案例
>打开index-aot.html进行“生产 – AOT& Rollup Tree-shaking”案例
它还包含build-invalid gulp任务,跳过第二步,表明它导致“无法解析’app.module.ngfactory’”错误.