Webpack + Angular2 AOT：未捕獲的語法錯誤：意外的令牌導入

Question

在此設置中，如何轉換從生成的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
還是一樣的問題

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，但是您已經嘗試過了，但沒有成功。

但是，您可以考慮切換到Webpack 2，它完全支持ES6樣式導入，並且非常接近其穩定版本。 編譯對我來說是這樣的，除了webpack配置對某些部分使用了新語法之外，沒有任何改變。