Angular2 RC4からRC5へのアップデート方法


Angular2 RC5が 2016/08/09 にリリースされました。
RC5の [Changelogはこちら](https://github.com/angular/angular/blob/master/CHANGELOG.md) です。

今回のアップデートでは、Bootstrap部分に大きなBreaking Changeが入っています。

NgModule という概念が導入され、複数のコンポーネントやディレクティブをモジュールとしてまとめられるようになりました。

以下の様なシンプルなAngular2アプリを Angular2 RC4 から RC5 にアップデートしましたので、手順を残しておきます。

* サンプルアプリ
   * ページを3つ持つアプリ (Home, Products, ProductDetail)
   * 画面上部に表示されたボタン押下でページ遷移する
   * 画面構成は以下のとおり

![sshot 2016-08-11 18.45.18.png](https://qiita-image-store.s3.amazonaws.com/0/12701/238195fe-b66c-143f-c629-48c4c9311280.png "sshot 2016-08-11 18.45.18.png")

![sshot 2016-08-11 18.45.33.png](https://qiita-image-store.s3.amazonaws.com/0/12701/f2ba390b-2aff-e1e9-70dd-6bdbe208b46c.png "sshot 2016-08-11 18.45.33.png")

なお、RC4からRC5へのアップデート手順は、以下Angularの公式ページでも紹介されています。

https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

# npm packageのアップデート

npm packageを最新化し、Angular2のバージョンを上げましょう。
package.jsonのアップデートは npm-check-updates を利用すると楽に行なえます。

```
npm install -g npm-check-updates
```

```
# Angular2プロジェクトディレクトリの配下に移動して以下コマンド実行
$ npm-check-updates -u                                                                                                                                      

[INFO]: You can also use ncu as an alias
⸨⸩ ⠸ :
 @angular/common                      2.0.0-rc.4  →     2.0.0-rc.5
 @angular/compiler                    2.0.0-rc.4  →     2.0.0-rc.5
 @angular/core                        2.0.0-rc.4  →     2.0.0-rc.5
 @angular/forms                            0.2.0  →          0.3.0
 @angular/http                        2.0.0-rc.4  →     2.0.0-rc.5
 @angular/platform-browser            2.0.0-rc.4  →     2.0.0-rc.5
 @angular/platform-browser-dynamic    2.0.0-rc.4  →     2.0.0-rc.5
 @angular/router                    3.0.0-beta.2  →     3.0.0-rc.1
 reflect-metadata                          0.1.3  →          0.1.8
 rxjs                               5.0.0-beta.6  →  5.0.0-beta.11
 systemjs                                0.19.26  →        0.19.36
 codelyzer                                0.0.20  →         0.0.26
 ember-cli-inject-live-reload              1.4.0  →          1.4.1
 karma                                   0.13.22  →          1.1.2
 karma-chrome-launcher                     0.2.3  →          1.0.1
 karma-jasmine                             0.3.8  →          1.0.2
 protractor                                3.3.0  →          4.0.3
 ts-node                                   0.5.5  →          1.2.2
 tslint                                   3.11.0  →         3.14.0
 typings                                   1.3.1  →          1.3.2

Upgraded /Users/shinsukenishio/Projects/angular2-example/routing-example/package.json
```

# Bootstrapの更新

修正前のmain.ts (ここをアプリのentrypointとしてます) は以下のとおりでした。

```ts:main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import {enableProdMode, provide} from '@angular/core';
import { AppComponent, environment } from './app/';
import {RouterConfig, provideRouter} from "@angular/router";
import {HomeComponent} from "./app/home/home.component";
import {LocationStrategy, HashLocationStrategy} from "@angular/common";
import {ProductsComponent} from "./app/products/products.component";
import {ProductDetailComponent} from "./app/product-detail/product-detail.component";

if (environment.production) {
  enableProdMode();
}

const routes: RouterConfig = [
  { path: 'home', component: HomeComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'products/:id', component: ProductDetailComponent },
  { path: '**', redirectTo: 'home' }
];

const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS,
  // provide(LocationStrategy, { useClass: HashLocationStrategy })
]);
```

このファイルを以下3つに分割しました。

* app/app.routing.ts
    * Routingの処理は長くなりそうだったので、main.tsから分割しました
* app/app.module.ts
    * ngModuleを定義するためのファイル
* main.ts
    * エントリーポイント。作成したAppModuleをbootstrapするだけにしました

各ファイルは以下のように定義しました。

```ts:app/app.routing.ts
import {HomeComponent} from "./home/home.component";
import {ProductsComponent} from "./products/products.component";
import {ProductDetailComponent} from "./product-detail/product-detail.component";
import {Routes, RouterModule} from "@angular/router";

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'products/:id', component: ProductDetailComponent },
  { path: '**', redirectTo: 'home' }
];

export const routing = RouterModule.forRoot(routes);

```

```ts:app/app.module.ts
import {NgModule, ApplicationRef} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule} from '@angular/common';
import {AppComponent} from './app.component';
import {routing} from './app.routing';
import {HomeComponent} from "./home/home.component";
import {ProductDetailComponent} from "./product-detail/product-detail.component";
import {ProductsComponent} from "./products/products.component";

@NgModule({
  imports: [BrowserModule, CommonModule, routing],
  declarations: [
    AppComponent,
    HomeComponent,
    ProductsComponent,
    ProductDetailComponent
  ],
  bootstrap: [AppComponent]
})

export class AppModule {
}
```

```ts:main.ts
import {AppModule} from './app/app.module';
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";

platformBrowserDynamic().bootstrapModule(AppModule);
```

ngModuleの詳細については、https://angular.io/docs/ts/latest/guide/ngmodule.html を参照ください。


# アップデート後のコード

Angular2 RC5へアップデートした際のコード差分は、以下ページにて見られます。

https://github.com/nishio-dens/angular2-example/commit/71f2e3afcd4c9dde94a67efed14d331fdd0e0589


Angular2でアプリを作られてる方、アップデート頑張ってください。


# 宣伝: Angular2入門

Angular2についての初学者向け解説を書いています（現在絶賛執筆中です）。
この機会にAngular2入門したい方は、以下記事をご参照ください。

* http://labs.timedia.co.jp/2016/08/angular2-component-1.html
* http://labs.timedia.co.jp/2016/08/angular2-component-2.html