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

1 年 ago

科, 颖

2 minutes

Angular2 RC5已于2016/08/09发布。RC5的更改日志在此处。

在这次更新中，Bootstrap部分发生了重大的破坏性变化。

引入了 NgModule 概念，可以将多个组件和指令组合成模块。

由于以下简单的Angular2应用从Angular2 RC4升级到RC5，因此我们将记录下升级步骤。

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

另外，RC4更新至RC5的步骤在以下的Angular官方页面也有介绍。

npm包的更新

让我们更新npm包，并升级到Angular2的最新版本。
使用npm-check-updates工具可以轻松更新package.json。

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

引导程序更新。

修正前的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 })
]);

我将这个文件分成了以下三个部分。

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。

更新后的代码 de

您可以在以下页面中查看将代码更新到 Angular2 RC5 时的差异。

以Angular2正在开发应用的朋友，请加油进行更新。

广告：Angular2初学者指南

我正在撰写关于Angular2的初学者解释（目前正在紧锣密鼓地编写中）。
如果您想借此机会入门Angular2，请参考以下文章。

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