How to print application package json version in angular

This blog post shows the multiple below things.

• How to display the application version in Angular
• How to get the version from package.json in Angular

During development, the Version number is displayed on the footer to know what version the application is using.

Version Number is a version of the code base configured in package.json for any node application.

For example, package.json is located in the Angular application root folder.

It contains

{
  "name": "angular-icon-example",
  "version": "2.0.1",

}

The version number is changed for every development agile sprint cycle with more additional features.

How do you get the version number from package.json in the Angular application?

#How to print the application version in the Angular application?

There are multiple ways we can print application versions to browser UI.

• read package.json directly in the Angular component.

In AppComponent, Import the package.json file as given below

import { Component } from '@angular/core';
import packagejson from '../../package.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public appVersion: string = packagejson.version;


  constructor() {
  }
}

And it throws the below error

    Error: src/app/app.component.ts:3:25 - error TS2732: Cannot find module '../../package.json'. Consider using '--resolveJsonModule' to import the module with the '.json' extension.

The reason, Angular does not allow you to import json files by default.

So you have to add the typescript compiler optionresolveJsonModule configuration tsconfig.json or tsconfig.app.json.

resolveJsonModule: You can import json modules like normal javascript modules tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

Restart the angular application, you see another error

This module is declared using ‘export =’, and can only be used with a default import when using the ‘allowSyntheticDefaultImports’ flag.

The error, says you need to import the modules declared with the export option. if no export is used in the module, you have to configure the allowSyntheticDefaultImports option in tsconfig.json or tsconfig.app.json. allowSyntheticDefaultImports: You can import modules without an export option like a normal import.

{
  "compileOnSave": false,
  "compilerOptions": {
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,

  },

Now It works and displays

With this approach, the following is the step by step summary to get the version

• Add typescript compiler options in tsconfig.json or tsconfig.app.json.

  {
  "compileOnSave": false,
  "compilerOptions": {
      "resolveJsonModule": true,
      "allowSyntheticDefaultImports": true,
  
  },

• In component

import package.json file like a normal component.

import packageJson from "../../package.json";

Declare a variable of string and initialized with the version attribute of packageJson

  public appVersion: string = packageJson.version;

In the template, print the variable using angular expression braces syntax.

<div>{{ appVersion }}</div>