Angular 4.x系のプロジェクトを5.x系にアップデートした際のメモ #Angular

自分の携わっているプロジェクトのAngularのバージョンを４系から5系にバージョンアップを行った。その際に行ったことをメモしておく。ちなみに開発環境としてAngular CLIではなくangular-seedを使用しいている。

angular-seedのバージョンアップ

最新のangular-seedを現在のリポジトリに取り込むことで、Angularを現在の最新バージョン（v5.0.1）にできる。

angular-seedのリポジトリを現在のリポジトリに取り込むためにgit subtreeを使う。

まず外部リポジトリupstreamとしてangular-seedのリポジトリを登録する。

$ git remote add upstream https://github.com/mgechev/angular-seed

登録した外部リポジトリupstreamの内容を取り込む。任意のディレクトリに取り込みたいので、-Pオプションで指定。

$ git subtree pull -P frontend/ upstream master

参考サイト

コンフリクトを解消

angular-seedの最新版を取り込むと必ずコンフリクトが発生する。特にpackage.jsonやyarn.lockは凄まじいことになっている。とりあえず以下に注意する。

自分で追加したパッケージは残す
追加していないパッケージを取り込み先を反映する

@anular/http 5.x系をインストール

Angular 5からHTTPリクエストを行うためのモジュール@angular/httpが非推奨となった。代わりにAngular 4.3から追加された@angular/common/httpのHttpClientを使用するようになっている。この部分は修正が大変なので追々対応するとして、ひとまず動かすために現状の@angular/httpをアップデートすることにした。

以下のコマンドで@angular/httpの最新版をインストール。

# yarnでインストールする場合
$ yarn add @angular/http

# npmでインストールする場合
$ npm i -S @angular/http

ブラウザのコンソールに以下のエラーが出るようであれば、

Uncaught SyntaxError: Unexpected token <

angular-seedのproject.config.tsに以下を追加。

{ name: '@angular/http', path: 'node_modules/@angular/http/bundles/http.umd.min.js' },

RouterModuleの設定を修正

またRxJSのバージョンが5.5.3の場合、Angular 5ではうまくルーティングができないという不具合があるとのこと。5.5.2にダウングレードすれば問題ないとのこと。

Angular 5.0.5 doesn't work with RxJS

実際に今回のangular-seedのアップデートでRxJSのバージョンが5.5.3になっていたので、以下のようなエラーが出た。

ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence

RouterModuleの設定は以下のようになっていた場合は、

@NgModule({
  imports: [
    RouterModule.forChild([
      { path: 'home', component: HomeComponent }
    ])
  ],
  exports: [RouterModule]
})

pathMatch: 'full'を追加して、以下のようにすると無事ルーティングが行われるようになる。

@NgModule({
  imports: [
    RouterModule.forChild([
      { path: 'home', component: HomeComponent, pathMatch: 'full' }
    ])
  ],
  exports: [RouterModule]
})

@angular/material 5.x系をインストール

とりあえず、ここまでで通常通り動くようになった。ただ自分たちのプロジェクトでは、@angular/materialを使用しているので、こちらも5.x系にアップデートすることにした。これまでは2.0.0-beta.12を使用していた。

以下のコマンドでインストール。今回はバージョンを指定しないと、最新版がインストールされなかったので、バージョンを指定してインストールした。

# yarnでインストールする場合
$ yarn add @angular/material@5.0.4 @angular/cdk@5.0.4

# npmでインストールする場合
$ npm install --save @angular/material@5.0.4 @angular/cdk@5.0.4

ブラウザのコンソールに以下のエラーが出るようであれば、

Uncaught SyntaxError: Unexpected token <

angular-seedのproject.config.tsにパッケージを追加。自分たちのケースでは、@angular/cdkのaccordionとlayoutが読み込まれていなかったようなので、以下を追加。

{
  name: '@angular/cdk/accordion',
  path: 'node_modules/@angular/cdk/bundles/cdk-accordion.umd.js'
},
{
  name: '@angular/cdk/layout',
  path: 'node_modules/@angular/cdk/bundles/cdk-layout.umd.js'
},

まとめ

とりあえず、これで4.x系の時とほぼ同じように動くようになった。あとは自分で追加したパッケージがAngular 5でもちゃんと動いているか確認し、もし何か不具合があれば対処する必要がある。それからAngular 5からRxJS v5.5.2以降を採用するようになりオペレータのインポートの方法にも変更があったりする。この辺りも追々対応していきたい。同様に、記事にも書いたがHTTPリクエストの部分も推奨されている@angular/common/httpのHttpClientを使用するようにしていきたい。

Angular 4.x系のプロジェクトを5.x系にアップデートした際のメモ