When working on an Angular app I wanted to display the app version to the user. Instead of simply just copying and pasting the value in the package.json
, I decided to extract it from the file and display it to the user. Here is how to do it:
Angular 6.x to Angular 11
tsconfig.json
In tsconfig.json
enable the option below:
"compilerOptions": {
"resolveJsonModule": true,
}
In your component
In your component file import the key from the package.json
file:
import {version} from '../../package.json`;
export class MyComponent {
public appVersion: string = version;
}
Angular 12+
tsconfig.json
In tsconfig.json
enable the options below:
"compilerOptions": {
"resolveJsonModule": true,
"allowSythenticDefaultImports": true
}
In your component
In your component file import packageJson
from the package.json
file:
import packageJson from '../../package.json`;
export class MyComponent {
public appVersion: string = packageJson.version;
}
After completing the steps above and saving your changes stop and then restart your local server for the changes to take effect.