web-dev-qa-db-fra.com

Comment afficher la version de l'application en angulaire?

Comment afficher la version de l'application dans l'application angular? la version doit provenir du fichier package.json

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

Dans angular 1.x, j'ai ce code HTML:

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

Dans angular, cela n'est pas rendu sous forme de numéro de version, mais simplement imprimé tel quel (<%=version %> au lieu de 0.0.1).

versionangularpackage.json
92
Zbynek

Si vous souhaitez utiliser/afficher le numéro de version dans votre application angular, procédez comme suit:

Prérequis:

  • Fichier angulaire et structure de dossier créée via Angular CLI

  • TypeScript 2.9 ou version ultérieure! (Pris en charge à partir de Angular 6.1 à partir de)

Étapes:

  1. Dans votre /tsconfig.app.json, activez l'option resolJsonModule (le redémarrage du serveur est requis par la suite):
    "compilerOptions": {
      ...
      "resolveJsonModule": true
      ...
  1. Ensuite, dans votre composant, par exemple /src/app/app.component.ts, utilisez les informations de version:
    import { version } from '../../package.json';
    ...
    export class AppComponent {
      public version: string = version;
    }

Il est également possible d'effectuer l'étape 2 dans votre fichier environment.ts, rendant les informations de version accessibles à partir de là.

Merci @ Ionar et @ MarcoRinck pour nous avoir aidé.

Cette solution n'inclut pas le contenu de package.json, mais uniquement le numéro de version.
Testé avec Angular8/Node10/TypeScript3.4.3.

Veuillez mettre à jour vos applications pour utiliser cette solution car, en fonction du contenu de votre package.json, la solution d'origine pourrait entraîner des problèmes de sécurité.

159
radomeit

Si vous utilisez webpack ou angular-cli (qui utilise webpack), vous pouvez simplement exiger package.json dans votre composant et afficher cet accessoire.

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

Et puis vous avez votre composant

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

  constructor() {
    this.appVersion = appVersion
  }
}
45
DyslexicDcuk

Essayer la réponse de DyslexicDcuk a abouti à cannot find name require

Ensuite, la lecture de la section "Chargement facultatif de module et autres scénarios de chargement avancés" dans https://www.typescriptlang.org/docs/handbook/modules.html m'a aidé à résoudre ce problème. (Mentionné par Gary ici https://stackoverflow.com/a/41767479/7047595 )

Utilisez la déclaration ci-dessous pour requérir package.json.

declare function require(moduleName: string): any;

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

En utilisant l'option tsconfig --resolveJsonModule, vous pouvez importer des fichiers JSON dans TypeScript.

Dans le fichier environment.ts:

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

export const environment = {
    VERSION: version,
};

Vous pouvez maintenant utiliser environment.VERSION dans votre application.

11
Ionaru

Il est judicieux de déclarer version en tant que variable d'environnement afin de pouvoir l'utiliser partout dans votre projet. (spécialement en cas de chargement de fichiers à mettre en cache sur la version e.g. yourCustomjsonFile.json?version=1.0.0)
Pour éviter les problèmes de sécurité (comme mentionné par @ZetaPR) , nous pouvons utiliser la méthode this (sur le commentaire de @sgwatgit)
En bref: nous créons un fichier yourProjectPath\PreBuild.js . Comme ça:

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

L'extrait ci-dessus crée un nouveau fichier /src/environments/version.ts qui contient une constante nommée version et le définit comme valeur extraite du fichier package.json.

Afin d'exécuter le contenu de PreBuild.json sur la construction, nous ajoutons ce fichier dans la section Package.json -> "scripts": { ... }" comme suit. Nous pouvons donc exécuter le projet avec ce code: npm start:

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

Maintenant, nous pouvons simplement importer la version et l’utiliser où nous voulons:

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

Solution simpliste pour angular utilisateurs cli.

Ajouter declare module '*.json'; sur src/typings.d.ts

Et puis sur src/environments/environment.ts:

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

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

Terminé :)

4
박관영

Je ne pense pas que "Angle Bracket Percent" ait un rapport avec angular1. C'est probablement une interface vers une autre API dont vous ne réalisez pas qu'elle est utilisée dans votre projet précédent.

Votre solution la plus simple: Il vous suffit de répertorier le numéro de version manuellement dans votre fichier HTML ou de le stocker dans une variable globale si vous l'utilisez à plusieurs endroits:

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

Votre solution la plus difficile: lancez une étape d'automatisation de la construction qui extrait le numéro de version de votre fichier package.json, puis réécrit votre fichier index.html (ou js/ts fichier) pour inclure la valeur:

  • Pourriez tout simplement importer ou requérir le fichier package.json, si vous travaillez dans un environnement qui le supporte:

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

  • Cela pourrait aussi être fait dans un script bash qui lit le package.json puis édite un autre fichier.

  • Vous pouvez ajouter un script NPM ou modifier votre script de démarrage pour utiliser des modules supplémentaires pour lire et écrire des fichiers.
  • Vous pouvez ajouter grunt ou gulp à votre pipeline, puis utiliser des modules supplémentaires pour lire ou écrire des fichiers.
4
Cooper Buckingham

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>
4
vrbsm

J'ai essayé de résoudre ce problème de manière un peu différente, tout en tenant compte de la facilité d'utilisation et de la facilité de maintenance.

J'ai utilisé le script bash pour changer la version dans toute l'application. Le script suivant vous demandera le numéro de version souhaité, qui sera appliqué dans l’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;

J'ai enregistré ce script dans un fichier nommé version-manager.sh à la racine du projet et créé dans mon fichier package.json. un script pour l'exécuter lorsqu'il est nécessaire de modifier la version.

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

Enfin, je peux simplement changer la version en exécutant

npm run change-version

Cette commande modifiera la version dans le modèle index.html et également dans le fichier package.json. Voici les quelques captures d'écran prises avec mon application existante.

enter image description here

enter image description here

enter image description here

enter image description here

1
sanjeev

Vous pouvez lire package.json comme n'importe quel autre fichier, avec http.get comme suit:

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