自分の携わっているプロジェクトの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は凄まじいことになっている。とりあえず以下に注意する。
- 自分で追加したパッケージは残す
- 追加していないパッケージを取り込み先を反映する
関連パッケージをインストール
package.jsonやyarn.lockのコンフリクトを解消したら、関連パッケージも最新の状態にする必要がある。yarnまたはnpmでインストール。
# yarnでインストールする場合
$ yarn install
# npmでインストールする場合
$ npm install
この時点で、npm startして、アプリケーションを起動してみる。コンフリクト解消とパッケージのインストールがちゃんとできていれば、おそらく立ち上がるはず。ただ、完全に動くとまではいかないはず。
@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] (5.5.3https://github.com/angular/angular/issues/20752)
実際に今回の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を使用するようにしていきたい。