How to display the app version in Angular?

Question

How do I display the app version in angular application? the version should be taken from package.json file

{
  "name": "angular-app",
  "version": "0.0.1",
  ...
}

In angular 1.x, I have this html:

<p><%=version %></p>

In angular, this is not rendered as version number, but instead just printed as it is (<%=version %> instead of 0.0.1).

Answer 1

If you want to use/show the version number in your angular app please do the following:

Prerequisites:

• Angular file and folder structure created via Angular CLI

• TypeScript 2.9 or later! (Supported from Angular 6.1 upwards)

Steps:

1. In your /tsconfig.json (sometimes also necessary in /src/tsconfig.app.json) enable the resolveJsonModule option (webpack dev server restart required afterwards):

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

2. Then in your component, for example /src/app/app.component.ts use the version info:

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

It's also possible to do step 2 in your environment.ts file, making the version info accessible from there.

Thx @Ionaru and @MarcoRinck for helping out.

This solution will not include the package.json contents, only the version number.
Tested w/Angular8/Node10/TypeScript3.4.3.

Please update your apps to use this solution cause depending on the contents of your package.json the original solution may implicate security issues.