プロジェクトをバージョン4に更新する方法
次に、バージョン4への更新方法を説明していきます。
アニメーション機能を利用しない場合
まず、アニメーション機能を利用しない単純なサンプル（001-pre）で、基本的な流れを説明します。このサンプルはAngularバージョン2.4を利用しており、実行すると図1のようにAngularのバージョン番号を表示します。
画面に表示するバージョン情報は、リスト1（1）のVERSION.fullで取得しています。
import { Component, VERSION } from "@angular/core";
@Component({
selector: "my-app",
template: `<h1>Angular {{version}}</h1>`
})
export class AppComponent {
version = VERSION.full; // Angularのバージョン番号 ...（1）
}
Angularをバージョン4に更新するためには、リスト2またはリスト3のコマンドを実行します（利用するOSによって異なります）。
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save
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
コマンドを実行すると、図2のようにpackage.jsonが更新され、Angularパッケージのバージョン番号が変更されます。
コマンド実行後にプロジェクトを実行すると、図3のようにAngularバージョン4でWebページが実行されます。ダウンロードできるサンプルには、001-preをバージョンアップした後のサンプル（002-post）を含めています。
［補足］依存性解決の警告やエラー
リスト2／3のコマンドを実行後にnpm installコマンドを実行すると、依存性解決の警告やエラーが表示されることがあります。本記事で紹介するバージョンアップ後のサンプル（002-post、004-anim-post）では、package.jsonに含まれるtypescriptとzone.jsの記述を微調整しています。詳細はサンプルコードを参照してください。
アニメーション機能を利用する場合
アニメーション機能を利用する場合は、リスト2／3のコマンドのほかに、コードの修正が必要です。図4のサンプルで、修正方法を説明します。アニメーションの内容は前回記事で紹介したサンプル（001-anim1）と同じで、画面の四角形をクリックすると大きさと色が変わりながらアニメーションします。アップデート前（003-anim-pre）と、アップデート後（004-anim-post）で、アニメーションの内容は変わりません。なお、両サンプルでは、リスト1同様にAngularのバージョン番号を表示します。
まず、アニメーション機能を提供するBrowserAnimationModuleを参照するように、モジュール定義ファイルapp.modules.tsにリスト4（1）（2）のように追記します。
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
// BrowserAnimationsModuleを参照 ...（1）
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
（略）
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule // BrowserAnimationsModuleを追加 ...（2）
],
（略）
コンポーネントでは、@angular/coreではなく、@angular/animationsからアニメーション関係の関数を参照するようにします。
import {
trigger, state, style, transition, animate
} from "@angular/animations";// アニメーション関数は@angular/animationsから参照
さらに、モジュールをロードするSystemJSの設定ファイルsystejs.config.jsに、アニメーション関連モジュールの参照先をリスト6（1）のように追加します。
map: {
（略）
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// animations関連の以下参照を追加 ...（1）
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
（略）
},
