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.