如何在Angular应用中显示应用版本?版本应该从包中取出。json文件。

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

在Angular 1中。x,我有这个html:

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

在Angular中,它不会被渲染为版本号,而是直接打印出来(<%=version %>而不是0.0.1)。


当前回答

我尝试用一种不同的方式来解决这个问题,同时考虑到便利性和可维护性。

我使用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的文件中,并保存在我的包中。json文件,我还创建了一个脚本,当需要修改版本时运行它。

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

最后,我可以通过执行来更改版本

npm run change-version 

这个命令将改变index.html模板和包中的版本。json文件。以下是我从现有应用中截取的几张截图。

其他回答

我尝试用一种不同的方式来解决这个问题,同时考虑到便利性和可维护性。

我使用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的文件中,并保存在我的包中。json文件,我还创建了一个脚本,当需要修改版本时运行它。

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

最后,我可以通过执行来更改版本

npm run change-version 

这个命令将改变index.html模板和包中的版本。json文件。以下是我从现有应用中截取的几张截图。

你可以看包装。Json就像任何其他文件一样,带有http。像这样:

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

这个https://github.com/angular/angular-cli/issues/5190有一个有趣的解决方案,使用shell文件来生成版本。ts文件。@sanjeev在这个论坛上有一个类似的解决方案。

这个解决方案使用Node, javascript和fs模块来实现相同的功能。在linux中工作是肯定的。在Windows中应该工作正常,因为Node/fs是跨平台的…对吧?

add a line to package.json: { "version": "0.0.1", ... "scripts": { "version": "node gen_version.js $npm_package_version", ... }, ... } create gen_version.js (note: it's not typescript) var fs = require('fs'); // arg[0]: node path // arg[1]: this script's path // arg[2]: 1st arg on command line console.log('current version: ' + process.argv[2]) path = 'src/environments/version.ts' script = 'export class Constants {' script += ' static readonly version = \'' + process.argv[2] + '\'' script += '}' fs.writeFile(path, script, function (err, file) { if (err) throw err; console.log('file saved:', path); }); Run it from npm: npm run version > omnitool@0.0.1 version ... > node gen_version.js $npm_package_version current version: 0.0.1 file saved: src/environments/version.ts use from your app: import {Constants} from "../environments/version" ... console.log('Version:', Constants.version)

尝试DyslexicDcuk的答案,结果是找不到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');

在Angular 12中,从'../../package.json'导入{version};给出一个错误:

. / src /环境/环境。ts:10:13-20 -错误:不应该从默认导出模块导入命名的导出'version'(作为'version'导入)(只有默认导出可用)

继续导入版本,而不会带来包的全部内容的安全隐患。Json到构建中,你可以做:

export const environment = {
  ...
  VERSION: require('../../package.json').version,
};

从https://github.com/angular/angular-cli/issues/3770 # issuecomment - 269822722

如果遇到无法找到名称“要求”错误,请参阅https://stackoverflow.com/a/43129815/418819和https://stackoverflow.com/a/54004979/418819