在此设置中,如何转换从生成的ngfactory文件导入的angular2库?
当前应用是基于角度文档的webpack + aot食谱的组合
angular.io/docs/ts/latest/cookbook/aot-compiler.html
angular.io/docs/ts/latest/guide/webpack.html
我有一个正在工作的POC,您可以在其中从此存储库复制问题:
https://github.com/jetlogs/Angular2-AOT-Localization
完成编译/捆绑后,您可以打开2个文件:
non-aot.html-这是同一个应用程序的非aot版本,并且加载了优良的
aot.html-此文件失败并显示:
ng_module_factory.js?95b1:13 Uncaught SyntaxError:意外的令牌导入
预期行为
预期行为是aot.html和non-aot.html应该具有相同的行为
通过指令将问题最小化
克隆存储库,然后在工作目录上运行以下命令:
npm install
npm postinstall
npm run build
然后打开aot.html重现问题
有什么办法可以解决从导入的angular2库中导入的语句吗?谢谢
更新:
我尝试使用babel-loader来转译ES2015中的angular2源文件:
{
test: /\.js$/,
loader: 'babel',
include: [
/node_modules(\\|\/)@angular/
],
exclude: [
/\.umd\.js$/
],
query: {
presets: ['es2015']
}
},
现在可以编译,而不会出现与ES6不兼容的问题,但是,它现在仅遇到以下错误aot.html
:
core.umd.js?e2a5:3272Uncaught错误:NgZone没有提供者!
为什么AOT编译器引用的transpilated angular2源代码会导致NgZone问题停滞?
我已经更新了上面的仓库以反映我的最新更改
UPDATE2:10/13/16
更新到Angular 2.1
仍然是同样的问题
ng_module_factory.js中使用的System.import语法是ES6样式模块加载。您可能正在使用的Webpack 1不支持此语法。
一种解决方法可能是使用require()语法将Angular ES6模块转换为ES5,但是您已经尝试过了,但没有成功。
但是,您可能会考虑切换到Webpack 2,它完全支持ES6样式导入,并且非常接近其稳定版本。编译对我来说是这样的,除了webpack配置对某些部分使用了新语法之外,没有任何改变。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句