[小ネタ]Angularで作ったアプリケーションのバージョン（package.jsonのバージョン）を画面に表示する

どうも！大阪オフィスの西村祐二です。

アプリケーションのバージョンをアプリケーションの画面上に表示したいことがあるかと思います。今回はその方法を紹介したいと思います。

なお、Angularに限らずpackage.jsonでアプリケーションのバージョンを管理している場合は今回紹介する方法と同じような手順でいけると思います。

やってみる

環境

Angular CLI: 8.3.23
Node: 12.13.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.23
@angular-devkit/build-angular     0.803.23
@angular-devkit/build-optimizer   0.803.23
@angular-devkit/build-webpack     0.803.23
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cdk                      8.2.3
@angular/cli                      8.3.23
@angular/material                 8.2.3
@ngtools/webpack                  8.3.23
@schematics/angular               8.3.23
@schematics/update                0.803.23
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

セットアップ

Angular CLIを使って雛形のアプリケーションを作成します。

$ ng new version-display --style=scss --routing
$ cd version-display

packege.jsonに記載されているバージョンを確認します。はじめのバージョンは0.0.0となっています。

今回はこのバージョンを画面に表示したいと思います。

{
  "name": "version-display",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.22",
    "@angular/cli": "~8.3.22",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

設定

"resolveJsonModule": trueという設定を追加しておきます。

resolveJsonModuleは、jsonファイルを扱うことを可能にするオプションで、Typescript 2.9から追加されたオプションとなります。

"resolveJsonModule"についてはこちらを参照ください。

{
  "compileOnSave": false,
  "compilerOptions": {
    "resolveJsonModule": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

package.jsonをimportしてファイル内の値を取ってきて表示します。

import { Component } from '@angular/core';
import { version } from '../../package.json';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  version: string = version;
}

<h3>App Version</h3>
<p>
  {{ version }}
</p>

動作確認

ローカル実行し、ブラウザから画面を確認します。

$ ng serve

下記のようにバージョンが表示されているはずです。

さいごに

Angularで作ったアプリケーションのバージョン（package.jsonのバージョン）を画面に表示する方法を紹介してみました。

ちょっとした小ネタですが、よく使いそうだったのでブログにしてみました。

誰かの参考になれば幸いです。

参考サイト

https://stackoverflow.com/questions/34907682/how-to-display-the-app-version-in-angular