web-dev-qa-db-ja.com

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

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

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

angular 1.xには、次のhtmlがあります。

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

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

versionangularpackage.json
83
Zbynek

angularアプリでバージョン番号を使用/表示する場合は、次を実行してください。

前提条件：

  • Angular CLIを介して作成された角度ファイルとフォルダー構造

  • TypeScript 2.9以降！ （Angular 6.1以降でサポート）

手順：

  1. /tsconfig.app.jsonでresolveJsonModuleオプションを有効にします（後でサーバーの再起動が必要です）：
    "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 @ Ionarおよび@ MarcoRinck.

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

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

145
radomeit

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
  }
}
44
DyslexicDcuk

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');
19
Vamsi

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

Environment.tsファイルで：

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

export const environment = {
    VERSION: version,
};

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

10
Ionaru

versionを環境変数として宣言することをお勧めします。したがって、プロジェクト内のどこででも使用できます。 （特にバージョンe.g. yourCustomjsonFile.json?version=1.0.0に基づいてキャッシュされるファイルをロードする場合）
セキュリティの問題を防ぐために（@ ZetaPRが述べたように）を使用できます this アプローチ（@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`);
});

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

ビルド時にPreBuild.jsonのコンテンツを実行するために、次のようにこのファイルを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
Rzassar

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
};

完了:)

4
박관영

「角括弧の割合」は、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ファイルをサポートする環境で作業している場合、単純にインポートするか、package.jsonファイルを要求することができます。

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

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

  • NPMスクリプト を追加するか、起動スクリプトを変更して、追加の modules を使用してファイルの読み取りと書き込みを行うことができます。
  • grunt または gulp をパイプラインに追加し、追加のモジュールを使用してファイルの読み取りまたは書き込みを行うことができます。
4
Cooper Buckingham

TypeScript

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
vrbsm

利便性と保守性の容易さを考慮して、これを少し異なる方法で解決しようとしました。

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ファイルのバージョンを変更します。以下は、私の既存のアプリから取られたいくつかのスクリーンショットです。

enter image description here

enter image description here

enter image description here

enter image description here

1
sanjeev

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

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);
    }
}
0
Fredde