发表新帖
发表新帖

How to display the app version in Angular?

后端 未结
关注
10 1520
暗喜
暗喜 2020-12-02 04:55

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

{
  \"name\": \"angular-app\",
  \"v
相关标签:
10条回答
  • 名媛妹妹
    2020-12-02 05:08

    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>
    0 讨论(0)
  • 慢半拍i
    2020-12-02 05:08

    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.
    0 讨论(0)
  • 情歌与酒
    2020-12-02 05:11

    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.

    0 讨论(0)
  • 悲哀的现实
    2020-12-02 05:12

    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.

    0 讨论(0)
  • 不思量自难忘°
    2020-12-02 05:14

    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');
    0 讨论(0)
  • 既然无缘
    2020-12-02 05:16

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

    0 讨论(0)
 看不清?
提交回复
热议问题