如何在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)
其他回答
将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;
}
我不认为“角括号百分比”与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 然后使用附加模块来读取或写入文件。
打印稿
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>
我尝试用一种不同的方式来解决这个问题，同时考虑到便利性和可维护性。
我使用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文件。以下是我从现有应用中截取的几张截图。
如果你想在你的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文件!
推荐文章
- NullInjectorError: AngularFirestore没有提供程序
- 从元组/数组值派生联合类型
- 如何在Angular2中截断文本?
- 如何在Angular2 ngSwitch语句中使用typescript enum值
- Angular CLI错误:serve命令需要在Angular项目中运行，但是找不到项目定义
- 找到合成属性@panelState。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。
- 在Angular中上传文件?
- 模板驱动表单和响应式表单之间的实际区别是什么?
- Angular 2+和debounce
- Maven检查存储库中更新的依赖项
- 在TypeScript箭头函数中指定返回类型
- 如何使用jQuery与TypeScript
- 如何以及在哪里使用::ng-deep?
- 禁用在角材质对话框区域外单击以关闭对话框(angular 4.0+版本)
- Angular 2模板中的标签是什么意思?
