How to display the app version in Angular?

How do I display the app version in angular application? the version should be taken from package.json file

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

In angular 1.x, I have this html:

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

In angular, this is not rendered as version number, but instead just printed as it is (<%=version %> instead of 0.0.1).

If you want to use/show the version number in your angular app please do the following:

Prerequisites:

Angular file and folder structure created via Angular CLI

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

In your /tsconfig.json (sometimes also necessary in /src/tsconfig.app.json) enable the following option (webpack dev server restart required afterwards):

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

Then in your component, for example /src/app/app.component.ts use the version info like this:

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

When using this code with Angular 12+ you will probably get: Error: Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon). In this case please use the following code:

Steps for Angular 12+

In your /tsconfig.json (sometimes also necessary in /src/tsconfig.app.json) enable the following options (webpack dev server restart required afterwards):

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

Then in your component, for example /src/app/app.component.ts use the version info like this:

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

It's also possible to do step 2 in your environment.ts file, making the version info accessible from there.

Thx @Ionaru and @MarcoRinck for helping out.

This solution should not include the package.json contents when doing a production build - only the version number (checked w/Angular 8 and 13).

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

If you're using webpack or angular-cli (which uses webpack), you can just require package.json in your component and display that prop.

const { version: appVersion } = require('../../package.json')
// this loads package.json
// then you destructure that object and take out the 'version' property from it
// and finally with ': appVersion' you rename it to const appVersion

And then you have your component

@Component({
  selector: 'stack-overflow',
  templateUrl: './stack-overflow.component.html'
})
export class StackOverflowComponent {
  public appVersion

  constructor() {
    this.appVersion = appVersion
  }
}

Using the tsconfig option --resolveJsonModule you can import json files in Typescript.

In the environment.ts file:

import { version } from '../../package.json';

export const environment = {
    VERSION: version,
};

You can now use environment.VERSION in your application.

Trying DyslexicDcuk's answer resulted in cannot find name require

Then, reading 'Optional Module Loading and Other Advanced Loading Scenarios' section in https://www.typescriptlang.org/docs/handbook/modules.html helped me solve this. (Mentioned by Gary here https://stackoverflow.com/a/41767479/7047595)

Use the below declaration to require package.json.

declare function require(moduleName: string): any;

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

Simplist solution for angular cli users.

Add declare module '*.json'; on src/typings.d.ts

And then on src/environments/environment.ts:

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

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

Done :)

How to display the app version in Angular?

Related

Recent Posts