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

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

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

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

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

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

当前回答

尝试DyslexicDcuk的答案，结果是找不到name require

然后，阅读https://www.typescriptlang.org/docs/handbook/modules.html中的“可选模块加载和其他高级加载场景”部分帮助我解决了这个问题。(Gary在这里提到了https://stackoverflow.com/a/41767479/7047595)

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

declare function require(moduleName: string): any;

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

2017-04-18 01:33:26

其他回答

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

添加声明模块'*.json';在src / typings.d.ts

然后在src/environments/environment.ts上:

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

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

:完成)

2018-06-26 08:42:33

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

尝试DyslexicDcuk的答案，结果是找不到name require

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

declare function require(moduleName: string): any;

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

2017-04-18 01:33:26

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

推荐文章

最新文章

标签