2018年12月27日木曜日

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


オフィス狛 技術部の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ライフを!


,

0 件のコメント:

コメントを投稿