ちょっと前になりますが、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の機能を色々と触っていこうと思います。
今回はここまでです。それでは。
