This blog post shows the multiple below things.
- How to display application version in Angular
- How to get the version from package.json in Angular
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 application version in Angular application?
There are multiple ways we can print application versions to browser UI.
- read package.json directly in Angular component.
In AppComponent, Import 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 below error Error: src/app/app.component.ts:3:25 - error TS2732: Cannot find module ā../../package.jsonā. Consider using āāresolveJsonModuleā to import module with ā.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 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 version attribute of packageJson
public appVersion: string = packageJson.version;
In the template, print the variable using angular expression braces syntax.
<div>{{appVersion}}</div>