如何在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)。
当前回答
作为已经提出的解决方案的替代方案,我创建了一个简单的JS脚本,将版本写入. TS文件中的一个常量,因此它可以像任何其他TS文件一样读取。
我在任何新版本更改之前调用这个脚本。
代码如下:
// easier with fs-extra, but possible also with node build-in fs
const fs = require('fs-extra');
function storeVersionInTsFile() {
const packageJson = fs.readJSONSync('./package.json');
const file = `./src/app/version.ts`;
const contents = `/**\n * Auto generated file, do not edit.\n */\n\nexport const appVersion = '${packageJson.version}';\n`;
fs.writeFileSync(file, contents);
}
storeVersionInTsFile()
version.ts的内容:
/**
* Auto generated file, do not edit.
*/
export const appVersion = '0.3.2';
为了方便起见,我还在package.json中添加了一个脚本:
...
"store-version": "node store-version.js",
"build": "npm run store-version && ng build --configuration production"
...
其他回答
这个答案只针对Angular 12+。它使用Webpack 5。
根据webpack5文档
新规范不支持这一点,您将得到一个警告。而不是:
import { version } from './package.json';
console.log(version);
use:
import pkg from './package.json';
console.log(pkg.version);
另外,你必须在tsconfig.json中提供
"compilerOptions": {
...
"allowSyntheticDefaultImports": true
"resolveJsonModule":true
...
角13+ /离子型
这对我来说很管用:
把它放在dev和prod环境文件下。
environment.ts
declare const require: any;
export const environment = {
appVersion: require('../../package.json').version,
};
任何组件的示例用法:
import { environment } from 'src/environments/environment';
constructor() {
console.log(environment.appVersion);
}
为angular cli用户提供简单的解决方案。
添加声明模块'*.json';在src / typings.d.ts
然后在src/environments/environment.ts上:
import * as npm from '../../package.json';
export const environment = {
version: npm.version
};
:完成)
我不认为“角括号百分比”与angar1有任何关系。这很可能是到另一个API的接口,您没有意识到在您之前的项目中正在使用该API。
你最简单的解决方案:在HTML文件中手动列出版本号,或者如果你在多个地方使用它,则将它存储在一个全局变量中:
<script>
var myAppVersionNumber = "0.0.1";
</script>
...
<body>
<p>My App's Version is: {{myAppVersionNumber}}</p>
</body>
更难的解决方案:运行一个构建自动化步骤,从包中提取版本号。Json文件,然后重写index.html文件(或js/ts文件),以包括以下值:
可以简单地导入或要求包。Json文件,如果你在支持它的环境中工作: Var version = require("../package.json").version; 这也可以在读取包的bash脚本中完成。json和 然后编辑另一个文件。 您可以添加一个NPM脚本或修改您的启动脚本来使用 用于读写文件的附加模块。 你可以加上grunt或gulp 然后使用附加模块来读取或写入文件。
你可以看包装。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);
}
}