Angular バージョン確認方法：コマンド、ファイル、テンプレート、その他

2024-04-02

Angular バージョン確認方法

方法 1: ng version コマンドを使用する

プロジェクトフォルダ内で ng version コマンドを実行すると、Angular CLI と Angular フレームワークのバージョン情報が表示されます。

$ ng version

@angular/cli: 14.2.0
Node: 16.14.2
OS: linux x64

Angular: 14.2.0
...

方法 2: package.json ファイルを確認する

プロジェクトフォルダにある package.json ファイルを開くと、Angular フレームワークと関連ライブラリのバージョン情報が記載されています。

{
  "dependencies": {
    "@angular/core": "^14.2.0",
    "@angular/material": "^14.2.0",
    ...
  }
}

方法 3: テンプレートファイルで Version クラスを使用する

Angular 4 以降では、@angular/core モジュールの Version クラスを使用して、テンプレートファイル内でバージョン情報を表示することができます。

<h1>{{ version }}</h1>

<script>
import { Version } from '@angular/core';

export class AppComponent {
  version = new Version().full;
}
</script>

上記の方法のいずれかを使用して、Angular アプリケーションで現在使用されているバージョンを確認することができます。

補足:

AngularJS と Angular は別のフレームワークです。AngularJS は Angular の古いバージョンであり、現在は Angular という名前で新しいフレームワークが提供されています。
ng version コマンドは Angular CLI がインストールされている場合にのみ使用できます。
package.json ファイルはプロジェクトの依存関係を管理するために使用されます。
Version クラスは Angular 4 以降でのみ使用できます。

$ ng version

@angular/cli: 14.2.0
Node: 16.14.2
OS: linux x64

Angular: 14.2.0
...

{
  "dependencies": {
    "@angular/core": "^14.2.0",
    "@angular/material": "^14.2.0",
    ...
  }
}

<h1>{{ version }}</h1>

<script>
import { Version } from '@angular/core';

export class AppComponent {
  version = new Version().full;
}
</script>

出力例:

14.2.0

方法 4: Angular プロジェクトのフォルダ構造を確認する

Angular プロジェクトのフォルダ構造は以下のようになっています。

node_modules/
package.json
...
src/
  app/
    ...
  index.html
  main.ts
  polyfills.ts
  styles.css
  tsconfig.app.json
  tsconfig.json

方法 5: ブラウザの開発者ツールを使用する

ブラウザの開発者ツールを使用して、Angular アプリケーションのソースコードを確認することができます。ソースコード内に Angular フレームワークのバージョン情報が記載されています。

方法 6: Web サイトやツールを使用する

以下の Web サイトやツールを使用して、Angular バージョンを確認することができます。

angularjs angular