It’s common for applications to display what version of the application is currently being used. For example, in browsers, you can go to their About page and see what browser version you’re using. Let’s learn how to display your package.json version in your Angular application!

resolveJsonModule

When working with Javascript modules, it’s common to import specific pieces you need using an import statement.

import { Component } from '@angular/core';

We’d like to import the version value from the package.json file. However, that’s not possible at the moment. We need to tell Typescript to allow that to happen using the resolveJsonModule setting. In your tsconfig.app.json file, add the following under the compilerOptions property:

compilerOptions: {
  ...
  "resolveJsonModule": true
  ...
}

Import Version

In the component where you’d like to display the version number, now you can import it successfully.

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

Make sure to import the version only. It can be dangerous to expose other information about your package.json file.

Create a variable in your component and assign it the version value you just imported.

export class AppComponent {
  version = version;
}

Display Version

In your component’s html, place the variable where you want the version to appear.

Version: {{ version }}

Visit our website at https://nightwolf.dev and follow us on Facebook and Twitter!