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としてます) は以下のとおりでした。
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するだけにしました
各ファイルは以下のように定義しました。
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);
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 {
}
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入門したい方は、以下記事をご参照ください。