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

如何在Angular应用中显示应用版本?版本应该从包中取出。json文件。

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

在Angular 1中。x，我有这个html:

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

在Angular中，它不会被渲染为版本号，而是直接打印出来(<%=version %>而不是0.0.1)。

当前回答

作为已经提出的解决方案的替代方案，我创建了一个简单的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"
...

2021-10-26 09:36:30

其他回答

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

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

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

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

在环境方面。ts文件:

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

export const environment = {
    VERSION: version,
};

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

2019-05-02 08:56:28

打印稿

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>

2018-01-12 18:16:35

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

推荐文章

最新文章

标签