How to display app version in Angular2?

问题:

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

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

In angular 1.x, I have this html:

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

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

回答1:

If you are using Angular CLI and want to have the version in the environment variables you can just write in your environment..ts:

export const environment = {
...
    VERSION: require('../../package.json').version
};

And in your component:

import { environment } from '../../environments/environment';
...
public version: string = environment.VERSION;

If you get the

cannot find name 'require'

error, please change your /src/tsconfig.app.json (Not the tsconfig.json in root folder) to include the node types:

{
...
  "compilerOptions": {
...
    "types": ["node"]
  }
}

Also you need to install @types/node

npm install --save @types/node

回答2:

If you're using webpack or angular-cli (who 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
  }
}

回答3:

Trying DyslexicDcuk's answer resulted in cannot find name require

Then, reading 'Optional Module Loading and Other Advanced Loading Scenarios' section in https://www.typescriptlang.org/docs/handbook/modules.html helped me solve this. (Mentioned by Gary here https://stackoverflow.com/a/41767479/7047595)

Use the below declaration to require package.json.

declare function require(moduleName: string): any;

const {version : appVersion} = require('path-to-package.json');

回答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;
}

回答5:

I don't think that "Angle Bracket Percent" has anything to do with angular1. That's likely an interface to another API you don't realize is being used in your previous project.

Your easiest solution: just list the version number manually in your HTML file or store it in a global variable if you are using it in multiple places:

<script>
  var myAppVersionNumber = "0.0.1";
</script>
...
<body>
  <p>My App's Version is: {{myAppVersionNumber}}</p>
</body>

Your harder solution: run a build automation step that extracts the version number from your package.json file and then rewrites your index.html file (or js/ts file) to include the value:

• Could simply import or require the package.json file, if you're working in an environment that supports it:

  var version = require("../package.json").version;

• This could also be done in a bash script that reads the package.json and then edits another file.

• You could add an NPM script or modify your start script to make use of additional modules to read and write files.
• You could add grunt or gulp to your pipeline and then make use of additional modules to read or write files.

回答6:

Typescript

import { Component, OnInit } from '@angular/core';
declare var require: any;

@Component({
  selector: 'app-version',
  templateUrl: './version.component.html',
  styleUrls: ['./version.component.scss']
})
export class VersionComponent implements OnInit {
  version: string = require( '../../../../package.json').version;

  constructor() {}

  ngOnInit() {

  }
}

HTML

<div class="row">
    <p class="version">{{'general.version' | translate}}: {{version}}</p>
</div>

回答7:

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 :)

回答8:

I have tried to solve this in a bit different way, also considering the ease of convenience and maintainability.

I have used the bash script to change the version across the whole application. The following script will ask you for the desired version number, and the same is applied throughout the application.

#!/bin/bash
set -e

# This script will be a single source of truth for changing versions in the whole app
# Right now its only changing the version in the template (e.g index.html), but we can manage
# versions in other files such as CHANGELOG etc.

PROJECT_DIR=$(pwd)
TEMPLATE_FILE="$PROJECT_DIR/src/index.html"
PACKAGE_FILE="$PROJECT_DIR/package.json"

echo ">> Change Version to"
read -p '>> Version: ' VERSION

echo
echo "  #### Changing version number to $VERSION  ####  "
echo

#change in template file (ideally footer)
sed -i '' -E "s/<p>(.*)<\/p>/<p>App version: $VERSION<\/p>/" $TEMPLATE_FILE
#change in package.json
sed -i '' -E "s/\"version\"\:(.*)/\"version\"\: \"$VERSION\",/" $PACKAGE_FILE


echo; echo "*** Mission Accomplished! ***"; echo;

I have saved this script in a file named version-manager.sh in the root of the project, and in my package.json file, I also created a script to run it when it is necessary to modify the version.

"change-version": "bash ./version-manager.sh"

Finally, I can just change the version by executing

npm run change-version 

This command will change the version in the index.html template and also in the package.json file. Following were the few screenshots taken from my existing app.

回答9:

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);
    }
}

回答10:

In nodejs Command promt C:\Users\Username>node -v this is for nodejs version, C:\Users\Username>npm -v this is for npm version.