2

このセットアップでは、生成された ngfactory ファイルからインポートされる angular2 ライブラリをどのようにトランスパイルしますか?

現在のアプリは、angular docs に基づく 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: 予期しないトークンのインポート

予想される動作
予想される動作は、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 エラー: NgZone のプロバイダーがありません!

AOTコンパイラによって参照されているトランスパイルされたangular2ソースコードがNgZoneの問題をcdausingしている理由は何ですか?

上記のレポを更新して、最新の変更を反映させました

更新 2: 10/13/16

Angular 2.1 に更新して
も同じ問題

4

2 に答える 2

0

ng_module_factory.js で使用される System.import 構文は、ES6 スタイルのモジュールの読み込みです。おそらく使用している Webpack 1 は、この構文をサポートしていません。

回避策としては、require() 構文を使用して Angular ES6 モジュールを ES5 にトランスパイルすることが考えられますが、既にこれを試しましたが成功しませんでした。

ただし、ES6 スタイルのインポートを完全にサポートし、安定版リリースに非常に近い Webpack 2 への切り替えを検討することもできます。コンパイルは、一部の部分に新しい構文を使用する webpack 構成を除いて、何も変更せずにこの方法で機能しました。

于 2016-10-27T08:13:26.267 に答える