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

Question

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

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

在 Angular 1.x 中，我有这个 html：

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

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

原文由 Zbynek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您想在 Angular 应用程序中使用/显示版本号，请执行以下操作：

先决条件：

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

Angular 6.1 (TS 2.9+) 到 Angular 11 的步骤

1. 在您的 /tsconfig.json （有时在 /src/tsconfig.app.json 中也需要）启用以下选项（之后需要重新启动 webpack 开发服务器）：

     "compilerOptions": {
      ...
      "resolveJsonModule": true,
      ...

1. 然后在您的组件中，例如 /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+ 的步骤

1. 在您的 /tsconfig.json （有时在 /src/tsconfig.app.json 中也需要）启用以下选项（之后需要重新启动 webpack 开发服务器）：

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

1. 然后在您的组件中，例如 /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 内容 - 仅包含版本号（使用 Angular 8 和 13 检查）。

请务必检查您生成的 main.#hash#.js 文件！

原文由 radomeit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Angular 13+ / 离子

这对我有用：

将它放在 dev 和 prod 环境文件下。

环境.ts

 declare const require: any;

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

任何组件上的示例用法：

 import { environment } from 'src/environments/environment';

     constructor() {
        console.log(environment.appVersion);
      }

原文由 Sampath 发布，翻译遵循 CC BY-SA 4.0 许可协议