アプリケーション内でバージョン情報を表示する
Angular アプリのバージョン表示方法
方法 1: ng version コマンドを使用する
プロジェクトディレクトリ内で ng version コマンドを実行すると、Angular CLI と Angular フレームワークのバージョン情報が表示されます。
$ ng version
@angular/cli: 14.2.0
@angular/core: 14.2.0
...
方法 2: package.json ファイルを確認する
package.json ファイルには、プロジェクトで使用されているすべてのライブラリのバージョン情報が含まれています。@angular/core パッケージのバージョンを確認することで、アプリで使用されている Angular フレームワークのバージョンを知ることができます。
{
"name": "my-app",
"version": "1.0.0",
"dependencies": {
"@angular/core": "^14.2.0",
...
}
}
方法 3: アプリケーション内でバージョン情報を表示する
アプリケーション内でバージョン情報を表示するには、以下の方法があります。
- コンポーネントテンプレート内で直接バージョン情報を記述する
<h1>My App</h1>
<p>Version: 1.0.0</p>
- Version クラスを使用する
@angular/core パッケージから Version クラスをインポートし、テンプレート内で version プロパティを使用してバージョン情報を表示できます。
import { Component } from '@angular/core';
import { Version } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
version = new Version('1.0.0');
}
<h1>My App</h1>
<p>Version: {{ version.full }}</p>
- 環境変数を使用する
環境変数を使用してバージョン情報を設定し、テンプレート内で ngIf ディレクティブを使用して表示できます。
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
version = '1.0.0';
}
<h1>My App</h1>
<p *ngIf="version">Version: {{ version }}</p>
ng build --prod コマンドを使用してアプリケーションをビルドすると、dist フォルダにバージョン情報を含む app.js ファイルが生成されます。
$ ng build --prod
...
Generating ES5 bundles for differential loading...
Chunk File Size (brotli) File Size (gzip)
app 1.02 MB 2.44 MB
...
方法 5: Ionic Framework を使用する
Ionic Framework を使用している場合は、ionic info コマンドを実行してアプリのバージョン情報を含む詳細な情報を表示できます。
$ ionic info
Ionic:
Ionic CLI : 6.18.2
Ionic Framework : @ionic/angular 6.0.1
@angular-devkit/core : 14.2.0
@angular-devkit/schematics : 14.2.0
@angular/cli : 14.2.0
@ionic/angular-toolkit : 6.0.1
Cordova:
Cordova CLI : 11.0.0
System:
NodeJS : v16.14.2
OS : macOS Monterey
Xcode : 13.3.1
ios-deploy : 1.10.2
ios-sim : 8.0.2
これらの方法のいずれを使用しても、Angular アプリのバージョン情報を簡単に表示することができます。
app.component.ts
import { Component } from '@angular/core';
import { Version } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
version = new Version('1.0.0');
}
<h1>My App</h1>
<p>Version: {{ version.full }}</p>
このコードを実行すると、ブラウザに次のように表示されます。
<h1>My App</h1>
<p>Version: 1.0.0</p>
- Angular アプリのバージョン情報を表示する方法は他にもあります。詳細は、Angular CLI ドキュメントまたは Ionic Framework ドキュメントを参照してください。
- アプリのバージョン情報を表示する場所は、アプリの要件によって異なります。一般的な場所は、アプリケーションのヘッダー、フッター、または設定ページです。
Angular アプリのバージョン情報を表示するその他の方法
$ ng version
@angular/cli: 14.2.0
@angular/core: 14.2.0
...
{
"name": "my-app",
"version": "1.0.0",
"dependencies": {
"@angular/core": "^14.2.0",
...
}
}
<h1>My App</h1>
<p>Version: 1.0.0</p>
import { Component } from '@angular/core';
import { Version } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
version = new Version('1.0.0');
}
<h1>My App</h1>
<p>Version: {{ version.full }}</p>
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
version = '1.0.0';
}
<h1>My App</h1>
<p *ngIf="version">Version: {{ version }}</p>
$ ng build --prod
...
Generating ES5 bundles for differential loading...
Chunk File Size (brotli) File Size (gzip)
app 1.02 MB 2.44 MB
...
$ ionic info
Ionic:
Ionic CLI : 6.18.2
Ionic Framework : @ionic/angular 6.0.1
@angular-devkit/core : 14.2.0
@angular-devkit/schematics : 14.2.0
@angular/cli : 14.2.0
@ionic/angular-toolkit : 6.0.1
Cordova:
Cordova CLI : 11.0.0
System:
NodeJS : v16.14.2
OS : macOS Monterey
Xcode : 13.3.1
ios-deploy : 1.10.2
ios-sim : 8.0.2
以下のサンプルコードは、Version クラスを使用して Angular アプリのバージョン情報を表示する方法を示しています。
import { Component } from '@angular/core';
import { Version } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
version =
angular typescript ionic-framework
