如何在Angular应用中显示应用版本?版本应该从包中取出。json文件。
{
"name": "angular-app",
"version": "0.0.1",
...
}
在Angular 1中。x,我有这个html:
<p><%=version %></p>
在Angular中,它不会被渲染为版本号,而是直接打印出来(<%=version %>而不是0.0.1)。
如何在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