Question

在这个设置中，如何从生成的ngfactory文件中转换出导入的angular2库？

当前的应用程序是基于角度文档的webpack + aot cookbook的组合

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未捕获的SyntaxError：意外的令牌导入

预期行为
预期的行为是aot.html和非aot.html应具有相同的行为

使用说明书轻微复制问题

克隆回购，然后在工作目录上运行这些命令：

npm install
npm postinstall
npm run build

然后打开aot.html重现问题

有没有办法解决导入的angular2库中的import语句？感谢

更新

我尝试使用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：3272未发现错误：没有NgZone的提供者！

AOT编译器引用的转换angular2源代码的任何原因是否存在NgZone问题？

我已更新上面的回购以反映我的最新更改

UPDATE2：10/13/16

更新为Angular 2.1
仍然是同一个问题

Answer 1

对我而言，这是由IDE生成的错误导入：

import { Component, Output } from "@angular/core/src/metadata/directives";

而不是：

import { Component, Output } from "@angular/core";

Answer 2

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

解决方法可能是使用require（）语法将Angular ES6模块转换为ES5，但您已经尝试过这种方法但没有成功。

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

Webpack + Angular2 AOT：Uncaught SyntaxError：意外的令牌导入

2 个答案: