如何在Angular应用中显示应用版本?版本应该从包中取出。json文件。
{
"name": "angular-app",
"version": "0.0.1",
...
}
在Angular 1中。x，我有这个html:
<p><%=version %></p>
在Angular中，它不会被渲染为版本号，而是直接打印出来(<%=version %>而不是0.0.1)。
我不认为“角括号百分比”与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);
}
}
如果你正在使用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
}
}
尝试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');
打印稿
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>
如果你想在你的angular应用中使用/显示版本号，请执行以下操作:
先决条件:
通过Angular CLI创建的Angular文件和文件夹结构
Angular 6.1 (TS 2.9+)到Angular 11的步骤
在/tsconfig中。Json(有时在/src/tsconfig.app.json中也需要)启用以下选项(之后需要重新启动webpack开发服务器):
"compilerOptions": {
...
"resolveJsonModule": true,
...
然后在你的组件中，例如/src/app/app.component.ts使用这样的版本信息:
import { version } from '../../package.json';
...
export class AppComponent {
public version: string = version;
}
当在Angular 12+中使用这段代码时，你可能会得到:错误:不应该从default- exports模块导入命名的export 'version'(导入为'version')(很快只有default export可用)。 在这种情况下，请使用以下代码:
Angular 12+的步骤
在/tsconfig中。/src/tsconfig.app.json(有时在/src/tsconfig.app.json中也需要)启用以下选项(之后需要重新启动webpack开发服务器):
"compilerOptions": {
...
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
...
然后在你的组件中，例如/src/app/app.component.ts使用这样的版本信息:
import packageJson from '../../package.json';
...
export class AppComponent {
public version: string = packageJson.version;
}
在您的环境中也可以执行第2步。Ts文件，使版本信息可从那里访问。
谢谢@Ionaru和@MarcoRinck的帮助。
这个解决方案不应该包含包。json内容——只有版本号(在Angular 8和13中勾选)。
为了确保这一点，请检查生成的main.#hash#.js文件!
将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;
}
为angular cli用户提供简单的解决方案。
添加声明模块'*.json';在src / typings.d.ts
然后在src/environments/environment.ts上:
import * as npm from '../../package.json';
export const environment = {
version: npm.version
};
:完成)
我尝试用一种不同的方式来解决这个问题，同时考虑到便利性和可维护性。
我使用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文件。以下是我从现有应用中截取的几张截图。
使用tsconfig选项——resolveJsonModule你可以在Typescript中导入json文件。
在环境方面。ts文件:
import { version } from '../../package.json';
export const environment = {
VERSION: version,
};
现在可以使用environment了。应用程序中的版本。
这个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 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
...
对于那些不喜欢带包裹的人。查看这个插件ngx-build-plus。
提示:如果你想在不同的文件中使用它，就使用一个注入令牌来提供VERSION，这样就没有更多的declare语句了。
在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
作为已经提出的解决方案的替代方案，我创建了一个简单的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"
...
角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中相当于AngularJS $watch的东西是什么?
- Angular 2没有base href设置
- 如何实现typescript装饰器?
- 如何为对象数组定义接口?
- 如何获得参数类型从函数在Typescript
- “无法写入文件…”因为它会覆盖输入文件。”
- 检查已安装的angular-cli版本?
- TypeScript对数组进行排序
- 如何在TypeScript中声明一个固定长度的数组
- 在使用“apt-get”安装包之前，我如何检查版本?
- 我如何使用可选的链接与数组和函数?
- Angular:如何在不改变路由的情况下更新queryParams
- 当我通过浏览器刷新时，会出现Angular 2: 404错误
- 如何禁用ts规则为特定的行?
- Angular中的Subject vs behaviour Subject vs ReplaySubject
