angularangular-librarynpm-version

Angular library - export package.json version

I created an NX workspace containing multiple libraries and a single showcase-application that's being uploaded to the webserver. I would like to show the library version on the angular application.

Library version is being shown in the application

At the moment I'm doing it like this

Export the package.json version field from the library:

/* eslint-disable @typescript-eslint/no-var-requires */
export const NgBootstrapVersion: string = require('../package.json').version;

Import the constant in the application component:

import { NgBootstrapVersion } from '@example/ng-bootstrap';

@Component({ ... })
export class AppComponent {
  versionInfo = NgBootstrapVersion;
}

Show the version in the app:

<span class="me-2 align-middle">{{ versionInfo }}</span>

This seems to work in angular applications inside the same NX workspace.

Problem with this approach is that I'm getting the following error when doing the same in a seperate blank angular application (or NX workspace):

Uncaught ReferenceError: require is not defined

Another approach: resolveJsonModule

As described here

tsconfig.lib.json

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

index.ts

import * as packageJson from '../package.json';
export const NgBootstrapVersion: string = packageJson.version;

This gives me the following error:

Error: Should not import the named export 'version' (imported as 'packageJson') from default-exporting module (only default export is available soon)

error TS2732: Cannot find module '../package.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.

Which would require me to modify my tsconfig.app.json to solve the second error, which is off course undesired... and still leaves me with the first error.

How angular does it

You can simply use the following code in your angular application to display the @angular/core version:

import { VERSION } from '@angular/core';
export const AngularVersion = VERSION.full;

The code is written here, but I can't understand where the version from the specific package.json is being extracted and what the 0.0.0-placeholder is for.

How can I easily make the package version available outside my library? I do use Github Actions.

Solution

  • Apparently all you need to do is:

    Import the version like this:

    import packageJson from '@angular/core/package.json';
version = packageJson.version;