如何在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)。
当前回答
这个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)
其他回答
为angular cli用户提供简单的解决方案。
添加声明模块'*.json';在src / typings.d.ts
然后在src/environments/environment.ts上:
import * as npm from '../../package.json';
export const environment = {
version: npm.version
};
:完成)
使用tsconfig选项——resolveJsonModule你可以在Typescript中导入json文件。
在环境方面。ts文件:
import { version } from '../../package.json';
export const environment = {
VERSION: version,
};
现在可以使用environment了。应用程序中的版本。
打印稿
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>
对于那些不喜欢带包裹的人。查看这个插件ngx-build-plus。
提示:如果你想在不同的文件中使用它,就使用一个注入令牌来提供VERSION,这样就没有更多的declare语句了。
将version声明为环境变量是个好主意,这样你就可以在项目的任何地方使用它。(特别是在加载基于版本缓存的文件时,例如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, { flag: '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的常量,并通过从包中提取的值来设置它。json文件。
为了运行预构建的内容。我们把这个文件添加到包中。Json -> "scripts":{…}”部分。所以我们可以使用下面的代码运行项目:
{
"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;
}