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\",
  \"v         


        

Answer 1

Simplist solution for angular cli users.

Add declare module '*.json'; on src/typings.d.ts

And then on src/environments/environment.ts:

import * as npm from '../../package.json';

export const environment = {
  version: npm.version
};

Done :)

Answer 2

You could read package.json just like any other file, with http.get like so:

import {Component, OnInit} from 'angular2/core';
import {Http} from 'angular2/http';

@Component({
    selector: 'version-selector',
    template: '<div>Version: {{version}}</div>'
})

export class VersionComponent implements OnInit {

    private version: string;

    constructor(private http: Http) { }

    ngOnInit() {
        this.http.get('./package.json')
            .map(res => res.json())
            .subscribe(data => this.version = data.version);
    }
}

Answer 3

If you're using webpack or angular-cli (which uses webpack), you can just require package.json in your component and display that prop.

const { version: appVersion } = require('../../package.json')
// this loads package.json
// then you destructure that object and take out the 'version' property from it
// and finally with ': appVersion' you rename it to const appVersion

And then you have your component

@Component({
  selector: 'stack-overflow',
  templateUrl: './stack-overflow.component.html'
})
export class StackOverflowComponent {
  public appVersion

  constructor() {
    this.appVersion = appVersion
  }
}

Answer 4

It is a good idea to declare version as environment variable So you can use it everywhere in your project. (specially in case of loading files to be cached based on version e.g. yourCustomjsonFile.json?version=1.0.0)
In order to prevent security issues (as @ZetaPR mentioned) we can use this approach (on @sgwatgit 's comment)
In short: we create a yourProjectPath\PreBuild.js file. Like this:

const path = require('path');
const colors = require('colors/safe');
const fs = require('fs');
const dada = require.resolve('./package.json');
const appVersion = require('./package.json').version;

console.log(colors.cyan('\nRunning pre-build tasks'));

const versionFilePath = path.join(__dirname + '/src/environments/version.ts');

const src = `export const version = '${appVersion}';
`;
console.log(colors.green(`Dada ${colors.yellow(dada)}`));

// ensure version module pulls value from package.json
fs.writeFile(versionFilePath, src, { flat: 'w' }, function (err) {
if (err) {
    return console.log(colors.red(err));
}

console.log(colors.green(`Updating application version         
${colors.yellow(appVersion)}`));
console.log(`${colors.green('Writing version module to 
')}${colors.yellow(versionFilePath)}\n`);
});

Above snippet will create a new file /src/environments/version.ts which contains a constant named version and set it by extracted value from package.json file.

In order to run content of PreBuild.json on build, We add this file into Package.json -> "scripts": { ... }" section like following. So we can run project using this code: npm start:

{
  "name": "YourProject",
  "version": "1.0.0",
  "license": "...",
  "scripts": {
    "ng": "...",
    "start": "node PreBuild.js & ng serve",
  },...
}

Now we can simply import version and use it wherever we want:

import { version } from '../../../../environments/version';
...
export class MyComponent{
  ...
  public versionUseCase: string = version;
}