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

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

Prerequisites:

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

Steps for Angular 6.1 (TS 2.9+) till Angular 11

1. 在/tsconfig.json中(/src/tsconfig.app.json中有时也需要)启用以下选项(之后需要重新启动webpack dev服务器):

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

2. 然后在组件中，例如/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).

Steps for Angular 12+

1. 在/tsconfig.json中(/src/tsconfig.app.json中有时也需要)启用以下选项(之后需要重新启动webpack dev服务器):

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

2. 然后在组件中，例如/src/app/app.component.ts，使用如下版本信息:

    import packageJson from '../../package.json';
    ...
    export class AppComponent {
      public version: string = packageJson.version;
    }

也可以在您的环境中执行步骤2.ts文件，使版本信息可以从那里访问.

感谢您的帮助.

此解决方案不应包括该软件包.生产构建时的json内容——仅版本号(选中8和13).

To be sure please check your generated main.#hash#.js file too!