きっと何者にもなれないSEの記録帳

日々で得たIT技術を記録していきます。

Angular Update作業 ~Angular4 and Angular CLI~

GWでいそいそAngularのUpdate作業をした。

Angularの環境構築で苦労した

Angular2が正式リリースされてから、ちょこちょこ触っている。
その時に作ったAngular環境は、Angular2+webpackで構成してた。

ちなみにwebpackでの構成は、Angularの公式ドキュメントにも紹介されている。
Webpack: an introduction - ts - GUIDE

ただwebpackが1系だったり、コードカバレッジのための設定を追加していたり、e2eテストを追加していたり、環境のメンテが大変。
このあたりの問題を解消するために、Angular CLIが使えるっぽい。
Angular CLI

既存のアプリをAngular CLI化してみる!


既存のアプリをAngular CLIに移行、さらにAngular4にもUpdateしちゃう

Angular CLIへの移行方法は、公式のドキュメントに書かれている。それを参考に実施した。
stories moving into the cli · angular/angular-cli Wiki · GitHub

Angular CLI内部ではwebpackが使われているようなので、webpack前提の既存アプリがすんなりと起動できた。
公式のドキュメントでも言及されているが、SystemJS前提だとコードの修正が必要になるはず。

v1.0.0のAngular CLIからデフォルトでAngular4のアプリになる。ついでにAngular4にUpdateできちゃう。

ng new awesome-app

アプリ作成段階で、ユニットテスト環境やe2eテスト環境も用意される。
今まで自力で用意したテスト環境がコマンド一発で用意される。簡単。素晴らしい。

コードカバレッジは以下のコマンドで出力可能。

ng test --watch=false --code-coverage

まとめ

Angular CLI優秀だった。
今までwebpack構成を自力でメンテしてきたけど、同じようなことがAngular CLIでコマンド一発でできてしまう。
これは乗り換えない理由はないと思った。