Angularでアプリのバージョンを表示する方法は?


145

Angularアプリケーションでアプリのバージョンを表示するにはどうすればよいですか?バージョンはpackage.jsonファイルから取得する必要があります

{
  "name": "angular-app",
  "version": "0.0.1",
  ...
}

angular 1.xでは、私はこのhtmlを持っています:

<p><%=version %></p>

Angularでは、これはバージョン番号としてレンダリングされず、そのまま(の<%=version %>代わりに0.0.1)そのまま印刷されます。


ビルドシステムがある場合は、gulpまたはgruntプラグインが必要です。現在、AngularにはこのためのAFIKメカニズムはありません
Angular University

私はプログラムをアプリでtypescript使用npm startし、コンパイルを実行しSystemJSて構成を設定するために使用します。これらのいずれかを使用してバージョンを設定する方法はありますか?
Zbynek

回答:


254

Angularアプリでバージョン番号を使用/表示したい場合は、以下を実行してください:

前提条件:

  • Angular CLIを介して作成されたAngularファイルおよびフォルダー構造

  • TypeScript 2.9以降!(Angular 6.1以降でサポート)

手順:

  1. /tsconfig.json(で必要な場合もあります/src/tsconfig.app.json)でresolveJsonModuleオプションを有効にします(後でwebpack開発サーバーの再起動が必要です):
    "compilerOptions": {
      ...
      "resolveJsonModule": true
      ...
  1. 次に、コンポーネントで、たとえば/src/app/app.component.tsバージョン情報を使用します。
    import { version } from '../../package.json';
    ...
    export class AppComponent {
      public version: string = version;
    }

environment.tsファイルでステップ2を実行し、そこからバージョン情報にアクセスできるようにすることもできます。

THX @Ionaru@MarcoRinck手伝っため。

このソリューションには、package.jsonの内容は含まれず、バージョン番号のみが含まれます。
Angular8 / Node10 / TypeScript3.4.3でテスト済み。

このソリューションの原因を使用するようにアプリを更新してください。package.jsonの内容によっては、元のソリューションがセキュリティの問題に関係している可能性があります。


18
これはangular 5で動作し、誰かが疑問に思っている場合はAOTコンパイルします
Nikola.Lukovic

5
重要な注意:これを有効にするには、サーバーを再起動します(ng serveまたはnpm startを再度実行します)。
user1884155

2
@MarcoRinck:これを指摘してくれたThx。この問題を再現できました。過去に回答が編集されたためかどうかはわかりませんが、古いソリューションを使用していないことを確認するために、回答を編集して問題のrequire()呼び出しを削除しました。
radomeit

3
角度8が確認されました
vuhung3990

2
Angular 9が確認されました
Mike de Klerk

56

webpackまたはangular-cli(webpackを使用)を使用している場合は、コンポーネントにpackage.jsonを要求して、その小道具を表示できます。

const { version: appVersion } = require('../../package.json')
// this loads package.json
// then you destructure that object and take out the 'version' property from it
// and finally with ': appVersion' you rename it to const appVersion

そして、あなたはあなたのコンポーネントを持っています

@Component({
  selector: 'stack-overflow',
  templateUrl: './stack-overflow.component.html'
})
export class StackOverflowComponent {
  public appVersion

  constructor() {
    this.appVersion = appVersion
  }
}

8
ソリューションを適用した後に誰かがエラー「名前が見つかりませんでした」が発生した場合、tsconfig.app.tsファイルの「types」プロパティ内に「node」タイプを追加する必要があることに言及する価値があります。<< "types":["node"] >>。Angular v4でテスト
Tomasz Czechowski 2017年

@baio-私はこのコードスニペットを約1年間運用アプリで実行しています(運用環境でAOTを実行しています)。どうにかして問題のデバッグを手伝っていただけますか?
DyslexicDcuk 2017年

5
この投稿にも時間がありましたが、本番環境のビルドおよび開発情報が潜在的に公開される可能性があり、本番環境では有害である可能性があることを指摘する必要があります。
ZetaPR 2018年

@ZetaPRはお勧めできません。
ジミー・ケイン

7
バージョン番号を含む@DyslexicDcukライブラリは、セキュリティの観点から機密データです。
Rafiek、2018

25

tsconfigオプション--resolveJsonModuleを使用すると、jsonファイルをTypescriptにインポートできます。

environment.tsファイルで:

import { version } from '../../package.json';

export const environment = {
    VERSION: version,
};

これenvironment.VERSIONで、アプリケーションで使用できます。


1
@lonaru package.jsonファイルをインポートするときのセキュリティへの影響はありますか。これが何らかの方法でpackage.jsonのコンテンツを公開するかどうか疑問に思っていますか?
TIF

1
@tif package.jsonは完全にはインポートされないため、セキュリティへの影響はありません。バージョンは、本番ビルドで終了する唯一のものです。
イオナル、

19

DyslexicDcukの答えを試すと、 cannot find name require

次に、https://www.typescriptlang.org/docs/handbook/modules.htmlの「オプションのモジュール読み込みとその他の高度な読み込みシナリオ」セクションを読むと、これを解決するのに役立ちました。(ここにゲイリーが言及https://stackoverflow.com/a/41767479/7047595

以下の宣言を使用して、package.jsonを要求します。

declare function require(moduleName: string): any;

const {version : appVersion} = require('path-to-package.json');

8

Angular CLIユーザー向けのシンプルなソリューション。

追加declare module '*.json';src/typings.d.ts

そして次にsrc/environments/environment.ts

import * as npm from '../../package.json';

export const environment = {
  version: npm.version
};

完了:)


1
"allowSyntheticDefaultImports": trueAngularのバージョンによっては、tsconfig.json に追加する必要がある場合があります。
bjornalm

6

version環境変数として宣言することをお勧めします。これにより、プロジェクトのあらゆる場所で使用できます。(特にバージョンに基づいてキャッシュされるファイルをロードする場合e.g. yourCustomjsonFile.json?version=1.0.0(@ZetaPRで言及されているように)
セキュリティの問題を防ぐために、このアプローチを使用できます(@sgwatgitのコメントで) 簡単に言うと、yourProjectPath \ PreBuild.jsを作成しますファイル。このような:

const path = require('path');
const colors = require('colors/safe');
const fs = require('fs');
const dada = require.resolve('./package.json');
const appVersion = require('./package.json').version;

console.log(colors.cyan('\nRunning pre-build tasks'));

const versionFilePath = path.join(__dirname + '/src/environments/version.ts');

const src = `export const version = '${appVersion}';
`;
console.log(colors.green(`Dada ${colors.yellow(dada)}`));

// ensure version module pulls value from package.json
fs.writeFile(versionFilePath, src, { flat: 'w' }, function (err) {
if (err) {
    return console.log(colors.red(err));
}

console.log(colors.green(`Updating application version         
${colors.yellow(appVersion)}`));
console.log(`${colors.green('Writing version module to 
')}${colors.yellow(versionFilePath)}\n`);
});

上記のスニペット/src/environments/version.tsは、名前付き定数を含む新しいファイルを作成し、ファイルversionから抽出された値で設定しpackage.jsonます。

PreBuild.jsonon buildのコンテンツを実行するために、このファイルを次のようにPackage.json-> "scripts": { ... }"セクションに追加します。したがって、このコードを使用してプロジェクトを実行できますnpm start

{
  "name": "YourProject",
  "version": "1.0.0",
  "license": "...",
  "scripts": {
    "ng": "...",
    "start": "node PreBuild.js & ng serve",
  },...
}

これで、バージョンをインポートして、好きな場所で使用できます。

import { version } from '../../../../environments/version';
...
export class MyComponent{
  ...
  public versionUseCase: string = version;
}

5

活字

import { Component, OnInit } from '@angular/core';
declare var require: any;

@Component({
  selector: 'app-version',
  templateUrl: './version.component.html',
  styleUrls: ['./version.component.scss']
})
export class VersionComponent implements OnInit {
  version: string = require( '../../../../package.json').version;

  constructor() {}

  ngOnInit() {

  }
}

HTML

<div class="row">
    <p class="version">{{'general.version' | translate}}: {{version}}</p>
</div>

4

「Angle Bracket Percent」はangular1とは関係ないと思います。これはおそらく、前のプロジェクトで使用されていることに気付いていない別のAPIへのインターフェースです。

最も簡単な解決策:バージョン番号をHTMLファイルに手動でリストするか、複数の場所で使用している場合はグローバル変数に保存します。

<script>
  var myAppVersionNumber = "0.0.1";
</script>
...
<body>
  <p>My App's Version is: {{myAppVersionNumber}}</p>
</body>

より困難な解決策: package.jsonファイルからバージョン番号を抽出するビルド自動化ステップを実行し、次にindex.htmlファイル(またはjs / tsファイル)を書き換えて次の値を含めます。

  • それをサポートする環境で作業している場合、package.jsonファイルを単にインポートまたは要求できます。

    var version = require("../package.json").version;

  • これは、package.jsonを読み取り、別のファイルを編集するbashスクリプトでも実行できます。

  • NPMスクリプトを追加するか、開始スクリプトを変更して、追加のモジュールを利用してファイルの読み取りと書き込みを行うことができます。
  • パイプラインにうなりgulpを追加し、追加のモジュールを使用してファイルを読み書きすることができます。

使用するためのヒントを必要としない場合、これは実際には最良の答えです。なぜなら、プロダクションビルドには不要な情報や機密情報は含まれないからです。
Rafiek、2018

<% %>通常、c#のような.Net言語を示します
danwellman

2

私はこれを少し異なる方法で解決しようとしましたが、利便性と保守性も考慮しています。

アプリケーション全体でバージョンを変更するためにbashスクリプトを使用しました。次のスクリプトは、目的のバージョン番号を要求し、同じことがアプリケーション全体に適用されます。

#!/bin/bash
set -e

# This script will be a single source of truth for changing versions in the whole app
# Right now its only changing the version in the template (e.g index.html), but we can manage
# versions in other files such as CHANGELOG etc.

PROJECT_DIR=$(pwd)
TEMPLATE_FILE="$PROJECT_DIR/src/index.html"
PACKAGE_FILE="$PROJECT_DIR/package.json"

echo ">> Change Version to"
read -p '>> Version: ' VERSION

echo
echo "  #### Changing version number to $VERSION  ####  "
echo

#change in template file (ideally footer)
sed -i '' -E "s/<p>(.*)<\/p>/<p>App version: $VERSION<\/p>/" $TEMPLATE_FILE
#change in package.json
sed -i '' -E "s/\"version\"\:(.*)/\"version\"\: \"$VERSION\",/" $PACKAGE_FILE


echo; echo "*** Mission Accomplished! ***"; echo;

このスクリプトをというファイルに保存しました プロジェクトのルートにあるversion-manager.shました。また、package.jsonファイルに、バージョンを変更する必要があるときにそれを実行するスクリプトを作成しました。

"change-version": "bash ./version-manager.sh"

最後に、実行することでバージョンを変更できます

npm run change-version 

このコマンドは、index.htmlテンプレートおよびpackage.jsonファイルのバージョンを変更します。以下は、私の既存のアプリから取得したいくつかのスクリーンショットです。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

ここに画像の説明を入力してください

ここに画像の説明を入力してください


0

他のファイルと同じように、http.getでpackage.jsonを読み取ることができます。

import {Component, OnInit} from 'angular2/core';
import {Http} from 'angular2/http';

@Component({
    selector: 'version-selector',
    template: '<div>Version: {{version}}</div>'
})

export class VersionComponent implements OnInit {

    private version: string;

    constructor(private http: Http) { }

    ngOnInit() {
        this.http.get('./package.json')
            .map(res => res.json())
            .subscribe(data => this.version = data.version);
    }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.