M12i.

学術書・マンガ・アニメ・映画の消費活動とプログラミングについて

Angular2の"Quickstart"で"Angular AOT Webpackプラグイン"を使おうとして挫折

※この記事を執筆している時点の "Quickstart" の最新バージョンは 2.4.0 、"Angular CLI" の最新バージョンは "v1.0.0-beta.32" です。情報の新鮮さの判断基準として考慮してください。

きのう、Angular2のガイドから「デプロイ」(原典)の内容を抄訳しましたが、その"Webpack (およびAOT)"のセクションに紹介されていた方法を"Quickstart"プロジェクトを対象にして試してみました。

Webpack(およびAOT)

Webpack 2はテンプレートとスタイルシートのインライン化、バンドル、コード縮小、そしてコード難読化のためのもう1つの有力な選択肢だ。Angularガイドの"Webpack: an introduction"を読めば、AngularとともにWebpackを使用する方法について初歩的な事項を学ぶことができるだろう。

Webpack 自体のコンフィギュレーションに関しては公式プラグインAngular AOT Webpackプラグインの使用を検討してみてほしい。このプラグインはTypeScriptアプリケーション・コードをトランスパイルし、遅延ロードされる独立したNgModule群をバンドルし、AOTコンパイルを実行する。ソースコードに対する変更は必要ない。

しかし結果は失敗。というか挫折。。。

「"Angular AOT Webpack プラグイン"のドキュメントが素っ気なさ過ぎてわかりにくい」とか*1、「記述されたとおりに設定ファイルを作ってもWebpackコマンドを実行するとモジュールの解決でエラーになる」とか*2、いろいろ障碍があるのですが、最終的にビルド自体は成功したようにみえても、"npm start"*3で開発サーバで動かしてみると、「The selector "my-app" did not match any elements」というメッセージとともに実行時エラーになります。

だいたい開発時の依存関係として"Angular CLI"が入ってくるのにビルドは依然として"npm"や"webpack"コマンドで行うというのにも何だか違和感があります。"Angular CLI"は半年前にモジュール・ローダーをSystemJSからWebpackに代えたというのですから *4 、端から"Angular CLI"のコマンド("ng"コマンド)を使用したほうが話がシンプルになる気がします。しかしそうだとすれば"Quickstart"プロジェクトをベースにしてそこに徐々にコードを追加して自分のアプリケーションにしていくという戦略は捨てねばなりません。斯様な次第ではてさてどうしたものかと考え中です。

m12i.hatenablog.com

*1:これは私のWebpackに関する知識が浅すぎるのが原因でしょう。最初、プラグインのREADMEに記載された情報のコンテキストがまったく掴めませんでした。

*2:これはAngular CLIのバグらしいです。こちらのissueを参照のこと。"Quickstart"プロジェクトの場合"entryModule"の値を __dirname + '/app/app.module#AppModule' としたところビルド・エラーはなくなりました。しかし後述の通り実行時には別の問題が起きます。

*3:"Quickstart"プロジェクトのpackage.jsonの"scripts"の中で"start"コマンドは定義されています。このコマンドによってNode.jsランタイム上で"lite-server"が起動します。

*4:1.0.0-beta.11-webpack リリース時点、つまり2016/08/02時点でそうなったらしい。プロジェクトのCHANGELOGを参照のこと: https://github.com/angular/angular-cli/blob/master/CHANGELOG.md#100-beta11-webpack-2016-08-02