Angular2 RC5が 2016/08/09 にリリースされました。
RC5の Changelogはこちらです。

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

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

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

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

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

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としてます) は以下のとおりでした。

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するだけにしました

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

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);

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 {
}

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へアップデートした際のコード差分は、以下ページにて見られます。

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

宣伝: Angular2入門

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