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

如果您想在 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+ 中使用此代码时，您可能会得到:错误:不应从默认导出模块导入命名导出“版本”(导入为“版本”)(仅默认导出即将可用) 。 在这种情况下，请使用以下代码:

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 文件!