package.json ファイルでバージョンを確認する

ここでは、Angular と Angular CLI のバージョンを確認する3つの方法を紹介します。

ng version コマンドを使用する

Angular CLI をインストールしている場合は、ng version コマンドを実行することで、Angular と Angular CLI のバージョン情報を確認できます。

$ ng version

Angular CLI: 14.2.0
Node: 16.14.2
OS: Linux x64

Angular: 14.2.0
...

このコマンドは、Angular と Angular CLI のバージョンだけでなく、Node.js とオペレーティングシステム (OS) のバージョンも表示します。

package.json ファイルを確認する

Angular アプリケーションのルートディレクトリにある package.json ファイルには、インストールされている Angular と Angular CLI のバージョン情報が含まれています。

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My Angular application",
  ...
  "dependencies": {
    "@angular/core": "~14.2.0",
    "@angular/cli": "~14.2.0",
    ...
  },
  ...
}

dependencies オブジェクト内の @angular/core と @angular/cli のバージョンを確認することで、Angular と Angular CLI のバージョンを知ることができます。

Angular アプリケーションのソースコード内の main.ts ファイルには、Angular バージョン情報が含まれています。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

if (process.env.NODE_ENV === 'production') {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

console.log('Angular ' + VERSION.full); // Angular 14.2.0

console.log('Angular ' + VERSION.full); 行で、Angular のバージョン情報が表示されます。

上記の方法のいずれかを使用して、Angular と Angular CLI のバージョンを確認することができます。

Angular バージョン確認のサンプルコード

ng version コマンド

$ ng version

Angular CLI: 14.2.0
Node: 16.14.2
OS: Linux x64

Angular: 14.2.0
...

package.json ファイル

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My Angular application",
  ...
  "dependencies": {
    "@angular/core": "~14.2.0",
    "@angular/cli": "~14.2.0",
    ...
  },
  ...
}

main.ts ファイル

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

if (process.env.NODE_ENV === 'production') {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

console.log('Angular ' + VERSION.full); // Angular 14.2.0

これらのサンプルコードを参考に、ご自身の開発環境で Angular と Angular CLI のバージョンを確認してみてください。

Angular と Angular CLI のバージョン確認方法: その他の方法

Angular 公式ドキュメント

IDE またはテキストエディタ

多くの IDE またはテキストエディタは、ファイル内のバージョン情報を読み取り、ステータスバーなどに表示することができます。

バージョン管理システム

Git などのバージョン管理システムを使用している場合は、git log コマンドを実行することで、過去のコミット履歴から Angular と Angular CLI のバージョンを確認することができます。

オンラインツール