如何在Angular中显示应用程序版本？

Question

如何在angular应用程序中显示应用程序版本？版本应取自 package.json 文件

{
  "name": "angular-app",
  "version": "0.0.1",
  ...
}

在 angular 1.x 中，我有这个 html:

<p><%=version %></p>

在 angular 中，这不会呈现为版本号，而是按原样打印（<%=version %> 而不是 0.0.1）。

Answer 1

我认为 "Angle Bracket Percent" 与 angular1 没有任何关系。这可能是另一个 API 的接口，您没有意识到在您之前的项目中正在使用它。

您最简单的解决方案： 只需在您的 HTML 文件中手动列出版本号，或者如果您在多个地方使用它，则将其存储在全局变量中：

<script>
  var myAppVersionNumber = "0.0.1";
</script>
...
<body>
  <p>My App's Version is: {{myAppVersionNumber}}</p>
</body>

你更难的解决方案： 运行一个构建自动化步骤，从你的 package.json 文件中提取版本号，然后重写你的 index.html文件（或 js/ts 文件）以包含值：

可以简单地导入或要求 package.json 文件，如果您在支持它的环境中工作：

var version = require("../package.json").version;
这也可以在读取 package.json 的 bash script 中完成然后编辑另一个文件。
您可以添加 NPM script 或修改您的启动脚本以利用额外 modules 读写文件。
您可以将 grunt or gulp 添加到您的管道，然后使用其他模块来读取或写入文件。

Answer 2

您可以像阅读任何其他文件一样阅读 package.json，http.get 如下所示：

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

Answer 3

如果您使用的是 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 WhosebugComponent {
  public appVersion

  constructor() {
    this.appVersion = appVersion
  }
}

Answer 4

尝试 DyslexicDcuk 的回答导致 cannot find name require

然后，阅读 https://www.typescriptlang.org/docs/handbook/modules.html helped me solve this. (Mentioned by Gary here 中的 'Optional Module Loading and Other Advanced Loading Scenarios' 部分）

使用下面的声明要求 package.json。

declare function require(moduleName: string): any;

const {version : appVersion} = require('path-to-package.json');

Answer 5

打字稿

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>

Answer 6

如果您想 use/show 您的 angular 应用程序中的版本号，请执行以下操作：

先决条件：

Angular 通过 Angular CLI 创建的文件和文件夹结构

Angular6.1 (TS 2.9+) 到 Angular11

的步骤

在你的 /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+ 一起使用时，您可能会得到：Error: Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)。在这种情况下，请使用以下代码：

步骤 Angular 12+

在你的 /tsconfig.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;
    }

也可以在 environment.ts 文件中执行第 2 步，以便从那里访问版本信息。

感谢 @Ionaru 和 @MarcoRinck 的帮助。

此解决方案在进行生产构建时不应包含 package.json 内容 - 仅包含版本号（选中 w/Angular 8 和 13）。

请检查您生成的 main.#hash#.js 文件以确保万无一失！

Answer 7

将version 声明为环境变量是个好主意，这样您就可以在项目的任何地方使用它。（特别是在根据版本 e.g. yourCustomjsonFile.json?version=1.0.0 加载要缓存的文件的情况下）
为了防止安全问题（如@ZetaPR 所述） 我们可以使用this 方法（在@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, { flat: '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 的常量，并通过从 package.json 文件中提取的值进行设置。

为了运行构建 PreBuild.json 的内容，我们将此文件添加到 Package.json -> "scripts": { ... }" 部分，如下所示。所以我们可以运行使用此代码进行项目：npm start:

{
  "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;
}

Answer 8

angular cli 用户的简单解决方案。

在 src/typings.d.ts

上添加 declare module '*.json';

然后 src/environments/environment.ts:

import * as npm from '../../package.json';

export const environment = {
  version: npm.version
};

完成:)

Answer 9

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

我已经使用 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 的文件中，在我的 package.json 文件中，我也在需要修改版本时为它创建了一个脚本运行。

"change-version": "bash ./version-manager.sh"

最后，我可以通过执行

来更改版本

npm run change-version

此命令将更改 index.html 模板和 package.json 文件中的版本。以下是从我现有的应用程序中截取的几张屏幕截图。

Answer 10

使用 tsconfig 选项 --resolveJsonModule 您可以在 Typescript 中导入 json 个文件。

在 environment.ts 文件中：

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

export const environment = {
    VERSION: version,
};

您现在可以在您的应用程序中使用 environment.VERSION。

Answer 11

这个 https://github.com/angular/angular-cli/issues/5190 有一个有趣的解决方案，使用 shell 文件生成 version.ts 文件。 @sanjeev 在这个论坛上有类似的解决方案。

此解决方案使用 Node，javascript 和 fs 模块来实现相同的目的。在 linux 中肯定有效。在 Windows 中应该可以正常工作，因为 Node/fs 是跨平台的...对吗？

在package.json中添加一行：

{
  "version": "0.0.1",
  ... 
  "scripts": {
    "version": "node gen_version.js $npm_package_version",
     ...
  },
...
}

创建gen_version.js（注意：不是打字稿）

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

运行来自 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

从您的应用中使用：

import {Constants} from "../environments/version"
...
console.log('Version:', Constants.version)

Answer 12

此答案特定于 Angular 12+。它使用 Webpack 5.

根据webpack5 documentation

这是不新规范支持的，你会得到一个警告。而不是：

import { version } from './package.json';
console.log(version);

使用：

import pkg from './package.json';
console.log(pkg.version);

此外，您还必须在 tsconfig.json

中提供

"compilerOptions": {
  ...
  "allowSyntheticDefaultImports": true
  "resolveJsonModule":true
  ...

Answer 13

对于不喜欢将 package.json 引入构建文件夹的人，请查看此插件 ngx-build-plus.

提示：如果您想在不同的文件中使用它，请使用注入令牌来提供 VERSION，因此不再需要 declare 语句。

Answer 14

在Angular12import { version } from '../../package.json';给出了一个错误：

./src/environments/environment.ts:10:13-20 - Error: Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)

要继续导入版本，而不会将 package.json 的全部内容引入构建中，您可以这样做：

export const environment = {
  ...
  VERSION: require('../../package.json').version,
};

来自https://github.com/angular/angular-cli/issues/3770#issuecomment-269822722

如果遇到 Cannot find name 'require' 错误，请参阅 and

Answer 15

作为已经提出的解决方案的替代方案，我创建了一个简单的 JS 脚本，该脚本将版本写入 .ts 文件中的 constant，因此它可以像任何其他 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"
...

Answer 16

Angular 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中显示应用程序版本？

How to display the app version in Angular?

angular

typescript

ionic-framework

version

package.json