Angular8 で Web アプリを作ろう - 今日からAngular8 - ng update

今日すること

こんにちは、ふるてつです。
わたしも遅ればせながらもAngularのバージョンを 8 に上げました。
今日はその作業について書きます。

いまのバージョンとアップデート作業の確認

まずは自分の環境を確認します。
ng --version

わたしの環境のCLIはバージョン7.3.9です。
では次にAngular Update Guideで必要な作業を確認すると。
https://update.angular.io/

わたしの環境だとバージョンは7.3.9ですが、7.2 ⇒ 8.0しかありません。
とりあえず一番近いものを選択すれば良いでしょうね。
そしてわたしはMaterialを使用していますのでI use Angular Materialをチェックonにして必要な作業を確認します。
beforの作業でHttpModuleについて新しいものに変えろと書いてあるようですが、これはすでに対応済。
Materialについては、別途ng update @angular/materialコマンドを実行する必要があるようです。

アップデート

ng update @angular/cli @angular/coreコマンドを実行します。
下記のメッセージが出てアップデートできないですねぇ、すこし困りました。

Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2").

ng update --allでは？どうなんでしょう。もっと出てきました。

Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2")
Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.2")
Package "@angular/material-moment-adapter" has a missing peer dependency of "moment" @ "^2.18.1".
Package "angular-in-memory-web-api" has an incompatible peer dependency to "@angular/common" (requires ">=6.0.0 <8.0.0", would install "8.0.2")
Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2").
Incompatible peer dependencies found. See above.

いったん他のサイトで他にアップデート方法を調べてみます。
下記のサイトが良さそうだったのでとりあえずこのコマンドを流してみます。
https://www.techiediaries.com/updating-angular-cli-projects/
npm install -g @angular/cli

C:\Program Files (x86)\Nodist\bin\ng -> C:\Program Files (x86)\Nodist\bin\node_modules\@angular\cli\bin\ng

> @angular/cli@8.0.4 postinstall C:\Program Files (x86)\Nodist\bin\node_modules\@angular\cli
> node ./bin/postinstall/script.js

? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. (y/N)

Googleのanalyticsに使用データを報告するかどうかを聞かれました。とりあえずyesで答えました、どうやら進めそうです。

次はこのコマンドだそうですが、わたしが最初に試したものと同じですね。
もう1回チャレンジしてみます。
ng update @angular/cli @angular/core

Package "codelyzer" has an incompatible peer dependency to "@angular/compiler" (requires ">=2.3.1 <7.0.0 ||
>6.0.0-beta <7.0.0" (extended), would install "8.0.2").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/common" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.0.2").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/core" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.0.2").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/platform-browser" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.0.2").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/platform-browser-dynamic" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.0.2").
Incompatible peer dependencies found. See above.

メッセージが変わりました。
angular/commonは2.3.1 ～7.0.0が必要ですと書いてあるようですが、私の環境には7.2.15が入っています。
同様にangular/core、angular/platform-browser、angular/platform-browser-dynamicも7.2.15でした。
要求されているバージョンより先のものが入っている？ので、もう無視して強制で入れます。
ng update @angular/cli @angular/core --force

無事入りました。
バージョンはこのような感じになりました。

残りのupdate

他にバージョンを上げられるパッケージを調べます。
ng update

Using package manager: 'npm'
Collecting installed dependencies...
Found 43 dependencies.
    We analyzed your package.json, there are some packages to update:
      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cdk                       7.3.7 -> 8.0.1           ng update @angular/cdk
      @angular/material                  7.3.7 -> 8.0.1           ng update @angular/material

cdkとmaterialです。
materialはAngular Update Guideにも載っていましたね。
この二つは下記のコマンドで特に問題なく入りました。
ng update @angular/cdk
ng update @angular/material

その他つまずいたこと

インポート文が1つエラーになりました。

import { HttpParamsOptions } from '@angular/common/http/src/params';

HttpParamsOptionsが/common/http/src/paramsからいなくなった模様です。
代わりに@angular/common/http/http.d.tsができていて、中にHttpParamsOptionsがいることはいるのですが、exportされていません。

/** Options used to construct an `HttpParams` instance. */
declare interface HttpParamsOptions {
    /**
     * String representation of the HTTP params in URL-query-string format. Mutually exclusive with
     * `fromObject`.
     */
    fromString?: string;
    /** Object map of the HTTP params. Mutually exclusive with `fromString`. */
    fromObject?: {
        [param: string]: string | string[];
    };
    /** Encoding codec used to parse and serialize the params. */
    encoder?: HttpParameterCodec;
}

上記のdeclareの前にexportをつければ、importできるようになるので、つけ忘れでしょうか？。
ちょっと分かりませんけど。
しかしとりあえずは暫定でHttpParamsOptionsを使用している個所をanyに変えて、 import文はコメントアウトしました。

今日の感想

今日はAngularのバージョンアップについて書きました。
結局はあれこれ悩まずに最初から--forceオプションをつけて、 このコマンドng update @angular/cli @angular/core --forceを流せばよかった気がします。
結果動くようになったので、まあ良しという感じです。

では、今日もお疲れ様でした。