Come visualizzare la versione dell'app in Angolare?

Come posso visualizzare la versione dell'app nell'applicazione angolare? la versione dovrebbe essere presa dal package.jsonfile

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

In 1.x angolare, ho questo HTML:

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

In angolare, questo non viene visualizzato come numero di versione, ma semplicemente stampato così com'è ( <%=version %>anziché 0.0.1).

Se desideri utilizzare / mostrare il numero di versione nella tua app angolare, procedi come segue:

Prerequisiti:

• Struttura angolare di file e cartelle creata tramite CLI angolare

• TypeScript 2.9 o successivo! (Supportato da Angular 6.1 in poi)

passi:

1. Nel tuo /tsconfig.json(a volte anche necessario in /src/tsconfig.app.json) abilita l'opzione resolJsonModule (riavvio del server dev webpack richiesto in seguito):

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

2. Quindi nel tuo componente, ad esempio, /src/app/app.component.tsutilizza le informazioni sulla versione:

    import { version } from '../../package.json';
    ...
    export class AppComponent {
      public version: string = version;
    }

È anche possibile eseguire il passaggio 2 nel file environment.ts, rendendo accessibili le informazioni sulla versione da lì.

Thx @Ionaru e @MarcoRinck per dare una mano.

Questa soluzione non includerà i contenuti package.json, ma solo il numero di versione.
Testato con Angular8 / Node10 / TypeScript3.4.3.

Aggiorna le tue app per utilizzare questa soluzione in base al contenuto del pacchetto. La soluzione originale potrebbe comportare problemi di sicurezza.

Se stai usando webpack o angular-cli (che usa webpack), puoi semplicemente richiedere package.json nel tuo componente e visualizzare quel 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

E poi hai il tuo componente

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

  constructor() {
    this.appVersion = appVersion
  }
}

Utilizzando l'opzione tsconfig --resolveJsonModule è possibile importare file json in Typescript.

Nel file environment.ts:

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

export const environment = {
    VERSION: version,
};

Ora puoi usare environment.VERSIONnella tua applicazione.

Provando la risposta di DyslexicDcuk è risultata cannot find name require

Quindi, leggendo la sezione "Caricamento del modulo opzionale e altri scenari di caricamento avanzato" in https://www.typescriptlang.org/docs/handbook/modules.html mi ha aiutato a risolvere questo problema. (Menzionato da Gary qui https://stackoverflow.com/a/41767479/7047595 )

Utilizzare la seguente dichiarazione per richiedere package.json.

declare function require(moduleName: string): any;

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

Soluzione più semplice per gli utenti di angular cli.

Aggiungi declare module '*.json';susrc/typings.d.ts

E poi su src/environments/environment.ts:

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

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

Fatto :)

È una buona idea dichiarare versioncome variabile d'ambiente in modo da poterlo utilizzare ovunque nel progetto. (specialmente in caso di caricamento di file da memorizzare in cache in base alla versione e.g. yourCustomjsonFile.json?version=1.0.0)
Al fine di prevenire problemi di sicurezza (come menzionato da @ZetaPR) possiamo usare questo approccio (sul commento di @sgwatgit)
In breve: creiamo un tuoProjectPath \ PreBuild.js file. Come questo:

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

Lo snippet sopra crea un nuovo file /src/environments/version.tsche contiene una costante denominata versione lo imposta in base al valore estratto dal package.jsonfile.

Per eseguire il contenuto di PreBuild.jsonbuild, aggiungiamo questo file nella sezione Package.json-> "scripts": { ... }"come segue. Quindi possiamo eseguire il progetto usando questo codice npm start:

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

Ora possiamo semplicemente importare la versione e usarla dove vogliamo:

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

Dattiloscritto

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>

Non credo che "Percentuale parentesi angolare" abbia qualcosa a che fare con angolare1. È probabile che un'interfaccia con un'altra API che non ti rendi conto venga utilizzata nel tuo progetto precedente.

La soluzione più semplice: basta elencare manualmente il numero di versione nel file HTML o archiviarlo in una variabile globale se lo si utilizza in più posizioni:

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

La tua soluzione più difficile: esegui un passaggio di automazione della build che estrae il numero di versione dal tuo file package.json e quindi riscrive il tuo file index.html (o file js / ts) per includere il valore:

• Potrebbe semplicemente importare o richiedere il file package.json, se stai lavorando in un ambiente che lo supporta:

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

• Questo potrebbe anche essere fatto in uno script bash che legge il package.json e quindi modifica un altro file.

• È possibile aggiungere uno script NPM o modificare lo script iniziale per utilizzare moduli aggiuntivi per leggere e scrivere file.
• È possibile aggiungere grugnito o gulp alla pipeline e quindi utilizzare moduli aggiuntivi per leggere o scrivere file.

Ho provato a risolverlo in un modo un po 'diverso, anche considerando la facilità di praticità e manutenibilità.

Ho usato lo script bash per cambiare la versione nell'intera applicazione. Il seguente script ti chiederà il numero di versione desiderato e lo stesso verrà applicato in tutta l'applicazione.

#!/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;

Ho salvato questo script in un file chiamato version-manager.sh nella radice del progetto e nel mio file package.json, ho anche creato uno script per eseguirlo quando è necessario modificare la versione.

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

Infine, posso solo cambiare la versione eseguendo

npm run change-version 

Questo comando cambierà la versione nel modello index.html e anche nel file package.json. Di seguito sono stati riportati alcuni screenshot presi dalla mia app esistente.

Puoi leggere package.json come qualsiasi altro file, con http.get in questo modo:

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