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

如何在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)

2021-02-24 18:17:36

其他回答

在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

2021-08-04 14:31:25

我不认为“角括号百分比”与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

你可以看包装。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);
    }
}

2016-02-18 23:21:25

如果你想在你的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文件!

2018-02-19 15:40:42

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

推荐文章

最新文章

标签