Comment afficher la version de l'application dans Angular2?

Question

Comment afficher la version de l'application dans Angular2?

Comment afficher la version de l'application dans l'application angular2? la version doit être tirée du fichier package.json

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

Dans l'angle 1.x, j'ai ce html:

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

Dans angular2, ceci n'est pas rendu en tant que numéro de version, mais simplement imprimé tel quel (<%=version %> au lieu de 0.0.1).

45

angular package.json version

demandé sur Lynx 242 2016-01-20 21:25:43

9 réponses

score 56 · Answer 1

Si vous utilisez Angular CLI et que vous voulez avoir la version dans les variables d'environnement, vous pouvez simplement écrire dans votre environnement..ts:

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

Et dans votre composant:

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

Si vous obtenez le

Impossible de trouver le nom 'require'

Erreur, veuillez modifier votre /src/tsconfig.app.json (pas le tsconfig.json dans le dossier racine) pour inclure les types de nœuds:

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

Vous devez également installer @types / node

npm install --save @types/node

score 40 · Answer 2

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

score 18 · Answer 3

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

Ensuite, en lisant la section 'Chargement du Module optionnel 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 exiger le paquet.json.

declare function require(moduleName: string): any;

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

score 4 · Answer 4

Je ne pense pas que "pourcentage de support D'Angle" ait quelque chose à voir avec angular1. C'est probablement une interface vers une autre API que vous ne réalisez pas est utilisée dans votre projet précédent.

Votre solution la plus simple: Il suffit de lister 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 plus difficile: exécutez une étape d'automatisation de génération qui extrait le numéro de version de votre package.fichier json et puis réécrit votre index.fichier html (ou fichier JS / ts) pour inclure la valeur:

Pourrait simplement importer ou exiger le paquet.fichier 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 paquet.json et puis édite un autre fichier.
Vous pouvez ajouter un script npm ou modifier votre script de démarrage pour utiliser modules supplémentaires à lire et d'écrire des fichiers.
Vous pouvez ajouter grunt ou gulp pour votre pipeline, puis utiliser des modules supplémentaires pour lire ou écrire des fichiers.

score 3 · Answer 5

Tapuscrit

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>

score 3 · Answer 6

C'est une bonne idée de déclarer version comme variable d'environnement afin que vous puissiez l'utiliser partout dans votre projet. (spécialement en cas de chargement de fichiers à mettre en cache en fonction de la version e.g. yourCustomjsonFile.json?version=1.0.0)
Afin d'éviter les problèmes de sécurité (comme mentionné par @ZetaPR) nous pouvons utiliser cette approche (sur le commentaire de @ sgwatgit)
En bref: nous créons un yourProjectPath \ PreBuild.fichier js. Comme ceci:

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

Ci-dessus extrait va créer un nouveau fichier /src/environments/version.ts qui contient un constante nommée version et définissez-la par la valeur extraite du fichier package.json.

Afin d'exécuter le contenu de PreBuild.json sur build, nous ajoutons ce fichier dans Package.json -> "scripts": { ... }" section comme suit. Nous pouvons donc exécuter le projet en utilisant 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;
}

score 3 · Answer 7

Solution Simplist pour les utilisateurs cli angular.

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

, puis sur src/environments/environment.ts:

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

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

Fait :)

score 0 · Answer 8

Vous pouvez lire le paquet.json comme tout autre fichier, avec http.obtenez comme ça:

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

score -6 · Answer 9

Dans la commande NodeJS promt C:\Users\Username > node-V ceci est pour la version nodejs, C:\Users\Username>npm-v ceci est pour la version npm.

Las etiquetas más populares

Comment afficher la version de l'application dans Angular2?

9 réponses