Webpack + Angular2 AOT:未捕获的语法错误:意外的令牌导入

喷射喷泉

在此设置中,如何转换从生成的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
仍然是同样的问题

马库斯·克拉尔(Marcus Krahl)

ng_module_factory.js中使用的System.import语法是ES6样式模块加载。您可能正在使用的Webpack 1不支持此语法。

一种解决方法可能是使用require()语法将Angular ES6模块转换为ES5,但是您已经尝试过了,但没有成功。

但是,您可能会考虑切换到Webpack 2,它完全支持ES6样式导入,并且非常接近其稳定版本。编译对我来说是这样的,除了webpack配置对某些部分使用了新语法之外,没有任何改变。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

angular2:未捕获的语法错误:意外的令牌<

Webpack未捕获的语法错误:意外的令牌<

语法错误:意外的令牌导入Webpack 2 Babel 6 Reactjs

angular2 / webpack模板404错误

Angular2 AOT ngtools/webpack 在 linux 上失败

Gulp,Vue,Webpack,Babel和Uncaught语法错误:意外的令牌导入

webpack + angular2错误:未捕获ReferenceError:__decorate未定义

将Automapper导入angular2 Webpack项目

Angular2 / Material2-未捕获的SyntaxError:意外的令牌导入

如何修复“未捕获的语法错误:意外的令牌导入”?

未捕获的语法错误意外令牌

未捕获的语法错误意外令牌

未捕获的语法错误;意外的令牌 <

Webpack 2未加载Angular2 Typescript应用程序的导入

未捕获的语法错误:JSON 中的意外标记 a 在位置 2

如何从webpack angular2应用程序中的node_modules导入CSS

在没有NPM的情况下将库导入Angular2 / WebPack项目

带有webpack的Angular2报告错误404 index.html

Angular2 + KineticJS 错误: kinetic_kinetic__WEBPACK_IMPORTED_MODULE_4__.Kinetic 未定义

如何在webpack中使用angular-cli在angular2应用程序中导入xml2js

Angular App中的语法错误:意外的令牌<

Angular2和Webpack引导

Webpack和Angular2的构建时间

执行 Karma 和 Jasmine 测试时收到“未捕获的语法错误:意外的令牌导入”

Firefox与Chrome未捕获的语法错误意外的令牌错误

来自UglifyJs SyntaxError的Angular 2 Webpack构建:意外的令牌:punc(。)

SyntaxError:意外的令牌<:在heroku上使用angular 2和webpack

如何使用Webpack运行Angular 2 AOT

使用webpack-manifest-plugin获取错误“未捕获的SyntaxError:意外令牌<”