How to display the app version in Angular?

问题

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

回答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:

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

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

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.

回答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:

Using the tsconfig option --resolveJsonModule you can import json files in Typescript.

In the environment.ts file:

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

export const environment = {
    VERSION: version,
};

You can now use environment.VERSION in your application.

回答5:

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

回答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:

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

回答8:

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.

回答9:

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.

回答10:

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

来源：https://stackoverflow.com/questions/34907682/how-to-display-the-app-version-in-angular

标签

version

angular

package.json