Angular5から7へのバージョンアップ・後編

• facebook

オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。

前回（Angular5から7へのバージョンアップ・前編）の続きとなります。 前回は、本家の手順通りにポチポチとコマンドを実行していきましたが、実際にどんな風に変更されて、どんな部分はやっぱりエラーになってしまうのか、確認していきます。

自動修正された部分の確認

まずは、前回の「更新後作業（After the Update）」で行ったマイグレーション、

rxjs-5-to-6-migrate -p src/tsconfig.app.json

について、自動で修正された部分が気になったので、どう修正されたのか確認しました。
例えば、

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/retry';

上記のような記載が、

import { Observable ,  of } from 'rxjs';

に変わっていました。

後は、

import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/skip';

上記のような記載が、

import { Subscription } from 'rxjs';

に変わっていました。

自動修正されたのは、全てimportの部分でした。
今後は、基本的に「rxjs」を参照すれば、問題なさそうですね。

ビルドエラーになった部分の確認

続いて、前回バージョンアップ作業後に、ビルドエラーになっている部分を確認していきます。
エラーとなった部分の修正方法については、RxJS本家サイトの「RxJS v5.x to v6 Update Guide」を参考にしていきたいと思います。

まずは、下記のエラーメッセージ。
[ts] プロパティ 'skip' は型 'Observable<number>' に存在しません。

該当箇所は、

import { skip } from 'rxjs/operators';
// ・・・（中略）
error$ = this.store.select(fromAuth.getError).skip(1);

です。
本家サイトによると、処理をチェーンさせて行く時は、「pipe」syntaxを使用する、とあります。
よって、

error$ = this.store.select(fromAuth.getError).pipe(skip(1));

のように修正します。

続いてのエラーメッセージ、
[ts] プロパティ 'map' は型 'Observable<HttpResponse<Object>>' に存在しません。

該当箇所は、

  checkEmail(email: string): Observable<boolean> {
    return this.http
      .post('user-test/check-email', { email }, { observe: 'response' })
      .map(data => true);
  }

こちらも先程と同じ感じで修正します。

  checkEmail(email: string): Observable<boolean> {
    return this.http
      .post('user-test/check-email', { email }, { observe: 'response' })
      .pipe(map(data => true));
  }

続いてのエラーメッセージ、
[ts] プロパティ 'do' は型 'Observable<HttpResponse<{ user: HogeModel; }>>' に存在しません。
該当箇所は、

    return this.http
      .post<{ user: HogeModel }>('user-test/authenticate', body, {
        observe: 'response'
      })
      .do(console.log)
      .map(data => {
        const user = data.body.user;
        this.userId = user.id;
        return user;
      });
  }

です。
本家サイトによると、「do、catch、switchは、JavaScriptの予約語になっているので、変更しました」とあります。
よって、

    return this.http
      .post<{ user: HogeModel }>('user-test/authenticate', body, {
        observe: 'response'
      })
      .pipe(
        tap(console.log),
        map(data => {
          const user = data.body.user;
          this.userId = user.id;
          return user;
        })
      );
  }

のように修正します。それぞれの対応は以下の通りです。

• do -> tap
• catch -> catchError
• switch -> switchAll
• finally -> finalize

上記までがRxJS絡みのエラーでしたが、
他にも、下記のようなエラーが出ました。
ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.2.0 but 3.2.1 was found instead.
これは単純にTypeScriptのバージョンを「3.1.6」にする事で解決しました。

以上で、Angular5から7へのバージョンアップが完了しました。
思ったより、やる事が少なくて意外でしたが、気軽にアップデート出来るのは最高ですね。


それでは、良いAngularライフを！


Angular , RxJS