SystemJSからWebpackへAngular 2で行く2.4

Question

私はSystemJSを使用していました。私は今devのために物事をバンドルし、展開を欲しがっているので、私はAngularのWebサイトでWebpackチュートリアルを開始しました：https://angular.io/docs/ts/latest/guide/webpack.html#!#common-configuration

私はチュートリアルを終えましたが、多数のファイルのエラー：

ビルド：名前 '設定'が見つかりません。

ビルド：名前 'Promise'が見つかりません。

ビルド：名前 'マップ'が見つかりません。

このチュートリアルでは、わからない部分があり、この問題やその他の潜在的な問題の原因となる可能性があります。

私の最大の懸念の1つは、Webpackを使用する前に、最初に自分のアプリを構築するときにドキュメントから少し離れてしまったということです。

map: { 
     app: 'Angular2_Apps/Tasks/dist', 
     ... 
    } 

私も次を追加しました：transpiled JavaScriptファイルはdistのフォルダに送信されるように、私のアプリのフォルダに混乱を避けるための努力で、私はsystemjs.config.jsファイルに次のコードを追加しました私tsconfig.jsonファイルの「compilerOptions」のコード：

"outDir": "dist", 

今私のtranspiled JavaScriptファイルは、私が作成したのdistフォルダにあることを、私は、理想的には、組織の目的のためにそこにそれらを維持したいと思います。それに対応するためにWebpackファイルを変更する必要はありますか？

Answer 1

Webpackは、JITコンパイラであるangleの最も重いコンポーネントを取り除くのに役立ちません。

JITコンパイラを本番環境に出荷することを避けるために、Ahead of Timeコンパイルを使用する必要があります。 https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

この方法では、HTMLテンプレートソースと角度コンパイラがバンドルに含まれていないため、小型で高速な起動アプリを手に入れることができます。また、ファイルは1つだけです。

私は、このリポジトリにコンパイルAOT-バンドルと材料設計とangular2アプリとの完全な例があります。

https://github.com/fintechneo/angular2-templates

また将来的にはNGのCLIは用AOTバンドルを生成することができるはずですあなたは現在、ng build --prod - aotの機能はまだ実験的で、AOTのクックブックに直接従うよりも大きなバンドルを作成します。また、ng cliによって生成されたバンドルは、AOT cookbookの例を使用して生成されたバンドルよりも長いロード/開始時間を持つように見えます。