A mechanism to read the package.json version

Situation

It is common to render the web application version in the application header. The common approach has been to copy and past the package.json.version value to a component attribute and refer to it on a template:

...
"version": "0.3.3",
...

package.json

...
import { Component } from '@angular/core';
...
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'living-style-guide';
   version =  `0.33`;
...

projects/living-style-guide/src/app/app.component.ts

...
     ... <span style="font-size: 60%;"> v{{version}}</span> ...

...

projects/living-style-guide/src/app/app.component.html

Problem

I often update the package.json version, but forget to copy and paste to projects/living-style-guide/src/app/app.component.ts.

Implication

My app looks bad!

Need

The following mechanism reads the package.json version, freeing me from having to copy and paste it.

Add the following lines to your

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    ...
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "types": []
  ...
}

projects/living-style-guide/tsconfig.app.json

...
import { version } from '../../../../package.json';
...
   public version: string = version;
...

projects/living-style-guide/src/app/app.component.ts

Voila!