Version with Angular CLI

Displaying the version of your application is useful in almost every scenario. The Angular CLI, really Webpack, make it easy to access the current version from your package.json file.

In your component file we first need to set to access the package.json file.

1

const { version: applicationVersion } = require('../../package.json');

This brings in the package.json file and accesses the version parameter, assigning it to a variable called applicationVersion.

Then down in our Component class we can reference the applicationVersion variable and make it available to our component.

1
2
3
4
5
6
7
8
9
10

@Component({
  selector: 'my-version-component',
  template: '<p>Application Version: {{version}}</p>'
})

export class MyVersionComponent {

  public applicationVersion: string = applicationVersion;

}

Another option is to make your application version available as an environment variable. In your environment.ts file we add a new variable called VERSION which then requires the version parameter from the package.json file.

1
2
3
4

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

And in our component we import the environment object.

1
2
3
4
5
6
7
8
9
10
11
12

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

@Component({
  selector: 'my-version-component',
  template: '<p>Application Version: {{version}}</p>'
})

export class MyVersionComponent {

  public applicationVersion: string = environment.VERSION;

}