4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-08-11

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

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

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

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

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

sshot 2016-08-11 18.45.18.png

sshot 2016-08-11 18.45.33.png

なお、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入門したい方は、以下記事をご参照ください。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?