How To Display App Version In Angular
November 19, 2020 • Angular • Published By Josh • 2 minute read
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!
Table of Contents
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 }}
Related Articles
