Webpack + Angular2 AOT: Uncaught SyntaxError: Unexpected token import

Webpack + Angular2 AOT: Uncaught SyntaxError: Unexpected token import

在此设置中,如何转译从生成的 ngfactory 文件导入的 angular2 库?

当前应用是基于angular文档

的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 Uncaught SyntaxError: Unexpected token import

预期行为
预期的行为是 aot.html 和非 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 Error: No provider for NgZone!

为什么 AOT 编译器引用的转译 angular2 源代码是 cdausing NgZone 问题的任何原因?

我更新了上面的存储库以反映我的最新更改

更新 2:10/13/16

已更新至 Angular 2.1
还是一样的问题

对我来说,这是由 IDE:

生成的错误导入

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

而不是:

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

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

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

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