Angular

【手順紹介】Angularのバージョンを8に上げてみた!【ログあり】

ちょっと前になりますが、Angularのバージョン8がリリースされましたね。

だいたい半年に1回のペースでメジャーアップデートがくるので、その更新頻度には驚かされます。
新しい機能などもいくつかあるようで、Angularの盛り上がりを感じられますね。

私は業務でAngularを使っているので、今回のアップデートも結構気になっていました。

業務上で使っているAngularもそのうちアップデートすることになるとは思うのですが、ひとまず今はローカルの開発環境でアップデートしてみたいなと思います。

今回はAngularのバージョンを更新する際の手順を、実際のコマンドと実行ログをメインにご紹介しますね。

作業環境は以下の通りです。

OS: macOS Mojave
Angular CLI: 7.3.8
Angular: 7.2.0
Node: 8.11.1

Angularをアップデートする手順

まずは更新状況を確認するために「ng update」をしてみましょう。

$ ng update

すると、以下のようなログが出力されます。

   We analyzed your package.json, there are some packages to update:
    
      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       7.3.9 -> 8.0.3           ng update @angular/cli
      @angular/core                      7.2.15 -> 8.0.1          ng update @angular/core
      rxjs                               6.3.3 -> 6.5.2           ng update rxjs
    
    
    There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

更新すべきパッケージが表示されましたね。
今回はすべてアップデートするので、以下のコマンドを実行します。

$ 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/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")
Incompatible peer dependencies found. See above.

これはTypeScriptのバージョン依存に関する警告で、TypeScriptのバージョンを3.5.2にしてくださいという意味になります。

Angularのpackage.jsonを見ると、3.5に対応している(8月5日時点)のでバージョンアップしておきましょう。

ちなみに、package.jsonのチルダ表記とキャレット表記の違いについては以下の記事がわかりやすかったです。
参考:package.json のチルダ(~) とキャレット(^)

TypeScriptのバージョン更新は、以下のコマンドでいけます。

$ npm install -g typescript@latest

参考:How to update TypeScript to latest version with npm?

余談ですが、私がこの作業をしたのは6月16日だったのですが、その時点ではTypeScriptの3.5に未対応だったので、「ng update -all」を諦めて、必要な部分だけアップデートしました。

$ ng update @angular/cli @angular/core

この記事をご覧になる時期によっては、Angularが最新版のTypeScriptに対応できていないことがあるかもしれません。

その場合は、私のようにアップデートが必要な部分だけ個別にアップデートしてみてくださいね。

TypeScriptの更新ができたら、もう一度「ng update -all」をしてみましょう。

    Updating package.json with dependency @angular/compiler-cli @ "8.0.1" (was "7.2.15")...
    Updating package.json with dependency @angular/cli @ "8.0.3" (was "7.3.9")...
    Updating package.json with dependency @angular/language-service @ "8.0.1" (was "7.2.15")...
    Updating package.json with dependency @angular/animations @ "8.0.1" (was "7.2.15")...
    Updating package.json with dependency @angular/common @ "8.0.1" (was "7.2.15")...
    Updating package.json with dependency @angular/compiler @ "8.0.1" (was "7.2.15")...
    Updating package.json with dependency @angular-devkit/build-angular @ "0.800.3" (was "0.13.9")...
    Updating package.json with dependency @angular/core @ "8.0.1" (was "7.2.15")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "8.0.1" (was "7.2.15")...
    Updating package.json with dependency @angular/platform-browser @ "8.0.1" (was "7.2.15")...
    Updating package.json with dependency zone.js @ "0.9.1" (was "0.8.29")...
    Updating package.json with dependency @angular/forms @ "8.0.1" (was "7.2.15")...
    Updating package.json with dependency @angular/router @ "8.0.1" (was "7.2.15")...
    Updating package.json with dependency rxjs @ "6.5.2" (was "6.3.3")...
    Updating package.json with dependency typescript @ "3.4.5" (was "3.2.4")...
UPDATE package.json (1387 bytes)

途中で以下のように統計情報の取得を許可するかどうか聞かれますが、お好みで大丈夫です。

? 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. Yes

Thank you for sharing anonymous usage data. If you change your mind, the following
command will disable this feature entirely:

    ng analytics off

npm WARN codelyzer@4.5.0 requires a peer of @angular/compiler@>=2.3.1 <8.0.0 || >7.0.0-beta <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@4.5.0 requires a peer of @angular/core@>=2.3.1 <8.0.0 || >7.0.0-beta <8.0.0 but none is installed. You must install peer dependencies yourself.

added 60 packages from 69 contributors, removed 128 packages, updated 106 packages, moved 6 packages and audited 19009 packages in 114.172s
found 0 vulnerabilities

    ** Executing migrations for package '@angular/core' **
            ------ Static Query Migration ------
            With Angular version 8, developers need to
            explicitly specify the timing of ViewChild and
            ContentChild queries. Read more about this here:
            https://v8.angular.io/guide/static-query-migration
            ------------------------------------------------
    ** Executing migrations for package '@angular/cli' **
RENAME src/browserslist => /browserslist
UPDATE tslint.json (1616 bytes)
UPDATE package.json (1388 bytes)
UPDATE src/polyfills.ts (2838 bytes)
UPDATE tsconfig.json (470 bytes)
UPDATE src/tsconfig.app.json (166 bytes)
UPDATE src/tsconfig.spec.json (256 bytes)
added 4 packages from 7 contributors, updated 1 package and audited 19015 packages in 6.404s
found 0 vulnerabilities

これでアップデートは完了です。

早速バージョンを確認してみましょう。

$ ng –version

Angular CLI: 8.0.3
Node: 8.11.1
OS: darwin x64
Angular: 8.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@angular/flex-layout              8.0.0-beta.26
@ngtools/webpack                  8.0.3
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

ちゃんと8に上がっていますね。
これで最新の機能を試してみることができそうです!

Angularをアップデートする手順については、以下の記事が参考になりました。
ありがとうございます。
参考;ng updateでAngularをアップデート!

おわりに

今回はAngularのバージョンを更新する手順を、コマンドと実行ログを中心にご紹介しました。

Angularは更新頻度が高く、ちょっと油断していると置いていかれてしまいそうになるので、意識して情報をキャッチアップしていかなくてはなりませんね。

まずは、Angular8の機能を色々と触っていこうと思います。

今回はここまでです。それでは。