2017.3.29
2017.4.17

Angular 2で作成中のアプリケーションをAngular 4にアップデート

2017年3月末、Angular4が正式にリリースされたようなので、Angular2で作成中だったアプリケーションのバージョンを4にアップデートしてみました。

(他パッケージとのバージョンを合わせるため、3はスキップされたようです。)

目次

  • 変更点
  • アップデート方法
  • アップデートしてみた結果
  • 今後のアップデートスケジュール
  • 参考リンク

変更点

Angular4の主な変更点は以下の通り。

  • フレームワークのサイズ縮小と高速化(AOTコンパイラを利用している場合は6割程度に)
  • アニメーション関連の機能を別パッケージに分離
  • *ngIfでelseが使用可能
  • TypeScriptのバージョン(2.1、2.2)が上がったことによる、ngcの速度向上と型チェックの改善

アップデート方法

アプリケーションをAngular2から4へアップデートする方法は簡単で、以下のコマンド実行するだけです。

Linux/Mac

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

Windows

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

※ アニメーション機能を利用している場合、ルートのNgModuleにアニメーション関連のパッケージをインポートする必要があります。

import { trigger, state, style, transition, animate } from '@angular/animations';

アップデートしてみた結果

コンポーネント数が10ちょっとのそこまで作りこんでいるアプリケーションではないからかもしれませんが、アップデートしたことでアプリが動作しなくなるといったことはありませんでした。

また、AOTコンパイラは利用していなくとも最終的に出力されたbundle.jsは1割程度縮小されています。

個人的にはAngular自体のバージョンアップよりも、@angular/materialが正式リリースされて、もっと使える感じになってくれたら嬉しいです。マテリアルデザイン用のUIコンポーネントを利用するならまだAngularJSを使った方がよさげですね。

今後のアップデートスケジュール

どうやら半年毎にメジャーのバージョンがアップしていくようです。つまり、10月にはAngular 5、2018年4月にはAngular 6に...

バージョンアップして色々とできるようになるのは嬉しいのですが、ちょっと早すぎませんかね。

参考リンク

Angular】関連記事