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

小编典典

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

all

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

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

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

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

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

阅读 118

2022-06-16

共1个答案

小编典典

如果您想在 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+ 一起使用时，您可能会得到：Error: Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon). 在这种情况下，请使用以下代码：

Angular 12+ 的步骤

在您的/tsconfig.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;
}

也可以在您的 environment.ts 文件中执行第 2 步，从而可以从那里访问版本信息。

感谢@Ionaru 和@MarcoRinck 提供帮助。

在进行生产构建时，此解决方案不应包含 package.json 内容 - 仅包含版本号（使用 Angular 8 和 13 检查）。

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

2022-06-16