如何在Angular中显示应用版本?

如何在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 然后使用附加模块来读取或写入文件。

2016-01-21 01:18:54

其他回答

角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);
      }

2022-02-14 17:48:14

我尝试用一种不同的方式来解决这个问题，同时考虑到便利性和可维护性。

我使用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文件。以下是我从现有应用中截取的几张截图。

2019-01-16 18:07:00

使用tsconfig选项——resolveJsonModule你可以在Typescript中导入json文件。

在环境方面。ts文件:

import { version } from '../../package.json';

export const environment = {
    VERSION: version,
};

现在可以使用environment了。应用程序中的版本。

2019-05-02 08:56:28

如果你正在使用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
  }
}

2016-12-23 10:04:56

对于那些不喜欢带包裹的人。查看这个插件ngx-build-plus。

提示:如果你想在不同的文件中使用它，就使用一个注入令牌来提供VERSION，这样就没有更多的declare语句了。

2021-06-05 17:54:19

如何在Angular中显示应用版本?

推荐文章

最新文章

标签