How to get the version from the package.json in Typescript?

Question

I have found this Q&A.

I have tried to get the version from the package.json using:

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

but it results in:

package.json' has unsupported extension. The only supported extensions are '.ts',
'.tsx', '.d.ts'.

Answer 1

The way I like to do this without requiring webpack or any other dependencies is to add a prebuild script to package.json that writes the version to a TypeScript source file that can be imported elsewhere.

  "scripts": {
    "prebuild": "node -p \"'export const LIB_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'\" > src/version.ts",
    "build": "tsc",
  }

This runs node.js with the following code:

'export const LIB_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'

and redirects the output to src/version.ts

Which results in src/version.ts containing:

export const LIB_VERSION = "1.0.0";

You can then simply import and use this from other files:

import { LIB_VERSION } from './version';

You might want to exclude src/version.ts from source control so it's changes don't litter your change history!

Answer 2

There are various methods, but the one I found most useful was using ng-node-environment package. This generates a file ./src/environments/base.ts that you can directly reference in your typescript imports. It contains a const object called sharedEnvironment. Your import line looks like this: import sharedEnvironment from './base';

When you execute the command, it looks for all environment variables beginning with 'NG_' and adds them as properties to sharedEnvironment.

So, I created a package.json script that sets the variable and executes the ng-node-environment. For compatibility, I used cross-env to make it platform agnostic (works on windows and *nix)

Here's my package.json script: -

"scripts": {
    "version": "cross-env-shell NG_APPVERSION=$npm_package_version node ./node_modules/ng-node-environment/index.js",
    "another" : "echo hello world"
}

Then run: npm run version to extract the version and put it in ./src/environments/base.ts

I can now access property appversion and use it in my environment.ts.

Note: If I had called the variable NG_APP_Version the property name would be camel cased to appVersion

import sharedEnvironment from './base';

export const environment = {
  production: false,
  logLevel: LogLevel.Error,
  version : sharedEnvironment.appversion,
};

Of course, this way I can add other values from package.json by setting other variables before execution of ng-node-environment, or can add more properties in advance by creating variables called NG_<Something> e.g: NG_GitBranch, NG_ComputerName, NG_CliVersion etc

When developing in Angular and to ensure it's in sync all the time, I start development with a start script: -

"scripts": {
    "version": "cross-env-shell NG_APPVERSION=$npm_package_version node ./node_modules/ng-node-environment/index.js",
    "start": "npm run version && ng serve"
}

So I type: npm start and it syncs the version number, builds and launches