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でコマンド一発でできてしまう。
これは乗り換えない理由はないと思った。
