How to pull application version (or import package.json file)? Google does not help :(

Question

In my Angular application, I'd like to display the version from the package.json file.

I know that to import it I need to allow importing json and for this tsconfig.json file needs to get a few extra lines:

{
  "compilerOptions": {      
    "module": "commonjs",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "moduleResolution": "node"
  }
}

I did this, but after that when I import json file in my component class:

import { myPackage } from '../../../package.json';

I still get an error:

Cannot find module '../../../package.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.ts(2732)

And problem is not with path as I put another simple json file to the same folder but getting the same error.

I've googled and seen many examples that speak about '--resolveJsonModule', but it seems like I do all what's needed... but it still does not work.

I also restarted VScode and angular service - it did not help.

I use Angular 10.0.11 and TS 3.9.7

Please advise! Thanks!

have you checked out https://stackoverflow.com/a/48869478/6904274 it is working. — deepak thomas, May 13 '21 at 04:02
I read similar things many times, but THIS time it had an additional piece of information "(sometimes also necessary in /src/tsconfig.app.json)". Apparently, it is ONLY required it tsconfig.app.json. Thanks, deepak thomas! You saved my evening!!! If you post this as an answer, I'll be able to accept it. — Budda, May 13 '21 at 05:21
It seems, like the reason I had to use 'app' version of tsconfig is that I also have a few other 'flavours': base, spec, and app. And each is responsible for own thing. Obviously, to have that import work in components under tests, I need to add it to 'spec' as well. But, better to just 'base'. — Budda, May 13 '21 at 05:51

score 13 · Answer 1 · answered May 15 '21 at 09:18

In order to access the package.json information in angular, you need to do 3 things

In your tsconfig.json, you need to enable resolveJsonModule option that is present in the compilerOptions like

    compilerOptions": {
         ......
         "resolveJsonModule": true
         ......
    }

After that, you can rerun npm start in your terminal.
Once you have rerun npm start, you will be able to access all the package.json variables inside the component as

import * as  packageJson from 'package.json';
......
export class AppComponent {
      ......
      version = packageJson.version;
      ......
}

score 1 · Accepted Answer · answered May 18 '21 at 04:47

Deepak posted an almost proper answer, but for some reasons it did not work to me. Though, referenced answer (https://stackoverflow.com/a/48869478/6904274) has comments that actually helped.

In my case, the Angular application had more than just tsconfig.json, and to be able to import JSON files I had to modify other 'flavours': base, spec, and app. And each is responsible for their own thing. Obviously, to have that import work in components under tests, I need to add it to 'spec'. But, better to just 'base'.

How to pull application version (or import package.json file)? Google does not help :(

2 Answers2