How to load version number in angular (v4+) app from package.json?

Question

I am trying to load the version number of my Angular application from package.json because that is where the version number is located. When looking up how to do this, most people suggest using require to load the json file like:

var pckg = require('../../package.json');
console.log(pckg.version);

When I put this code in the constructor of a component, I get undefined.

Next I try putting the require statement above the component by the imports like:

const { version: appVersion } = require('../../package.json')

export class StackOverflowComponent {
  public appVersion

  constructor() {
    this.appVersion = appVersion
  }
}

and I get Error: (SystemJS) Unexpected token : when the require is trying to parse the json file. When I hover over require I see that it is of type "NodeRequire(id: string)". Is this different than requirejs?

I am using systemjs and I noticed a lot of people with answers are referring to Webpack. Here are relevant files that may help you answer my problem.

tsconfig.json:

{
  "compilerOptions": {
   "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },
  "compileOnSave": true,
   "exclude": [
    "node_modules/*",
    "**/*-aot.ts"
  ]
}

devDependencies in package.json:

"devDependencies": {
    "@types/node": "^6.0.46",
    "concurrently": "^3.0.0",
    "lite-server": "^2.3.0",
    "rollup": "^0.50.0",
    "rollup-plugin-commonjs": "^8.2.1",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-uglify": "^2.0.1",
    "source-map-explorer": "^1.5.0",
    "typescript": "~2.3.2"
  },

Answer 1

The problem you've encountered is that SystemJS is trying to interpret a JSON file as if it were executable. In order to get SystemJS to load JSON files sensibly, you need to use a JSON loader like systemjs-plugin-json.

You need to make it available in your SystemJS configuration. For instance, I use:

SystemJS.config({
  paths: {
    // Set an abbreviation to avoid having to type /node_modules/ all the time.
    "npm:": "/node_modules/",
    // ....
  },
  map: {
    // The loader is known to SystemJS under the name "json".
    json: "npm:systemjs-plugin-json",
    // ...
  },
  packageConfigPaths: [
    // Tell SystemJS that it should check the package.json files 
    // when figuring out the entry point of packages. If you omit this, then
    // the map above would have to be "npm:systemjs-plugin-json/json.js".
    "npm:*/package.json",
    // ...
  ],
});

Then you need to use it. You could replace your require call with require('../../package.json!json'); but I suspect that TypeScript would not be happy with this due to the funky module name. The !json part tells SystemJS to use the json loader. I never do this. Instead, I set a meta in my configuration that tells SystemJS, "use the json loader when you load this file":

SystemJS.config({
  meta: {
    "path/to/package.json": {
      loader: "json",
    },
  },
});

You need to figure out path/to/package.json on the basis of the rest of your SystemJS configuration, baseUrl in particular.