如何在Angular中显示应用程序版本？

如何在角度应用程序中显示应用程序版本？该版本应从package.json文件中获取

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

在angular 1.x中，我有以下html：

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

用角形表示，它不会呈现为版本号，而只是按原样打印（<%=version %>而不是0.0.1）。

如果要在Angular应用中使用/显示版本号，请执行以下操作：

先决条件：

• 通过Angular CLI创建的Angular文件和文件夹结构

• TypeScript 2.9或更高版本！（从Angular 6.1起受支持）

脚步：

1. 在您的中/tsconfig.json（有时也需要/src/tsconfig.app.json），启用resolveJsonModule选项（此后需要重启webpack dev服务器）：

    "compilerOptions": {
      ...
      "resolveJsonModule": true
      ...

2. 然后在您的组件中，例如，/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的内容，原始解决方案可能暗示安全问题。

如果您使用的是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
  }
}

使用tsconfig选项 --resolveJsonModule您可以在Typescript中导入json文件。

在environment.ts文件中：

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

export const environment = {
    VERSION: version,
};

您现在可以environment.VERSION在您的应用程序中使用。

尝试DyslexicDcuk的答案导致 cannot find name require

然后，阅读https://www.typescriptlang.org/docs/handbook/modules.html中的 “可选模块加载和其他高级加载方案”部分，帮助我解决了这一问题。（由Gary在这里提到https://stackoverflow.com/a/41767479/7047595）

使用以下声明要求package.json。

declare function require(moduleName: string): any;

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

针对角度cli用户的简化列表解决方案。

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

然后src/environments/environment.ts：

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

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

完成:)

声明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.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;
}

打字稿

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>

我认为“ 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;

• 这也可以在bash脚本中完成，该脚本读取package.json，然后编辑另一个文件。

• 您可以添加一个NPM脚本或修改您的启动脚本，以使用其他模块来读写文件。
• 您可以在管道中添加grunt或gulp，然后使用其他模块读取或写入文件。

我试图以一种不同的方式解决此问题，同时考虑了便利性和可维护性。

我已经使用了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文件中的版本。以下是从我现有应用程序中截取的一些屏幕截图。

您可以像使用任何其他文件一样读取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);
    }
}