Wie kann ich die App-Version in der angular2-Anwendung anzeigen? die Version sollte aus package.json DateiWie wird die App-Version in Angular2 angezeigt?
{
"name": "angular2-app",
"version": "0.0.1",
...
}
In Winkel 1.x genommen werden, ich habe diesen HTML:
<p><%=version %></p>
In angular2, wird dies nicht als Versionsnummer gemacht, sondern nur, wie es gedruckt ist (<%=version %> anstelle von 0.0.1).
Wenn Sie Angular CLI verwenden und wollen die Version in den Umgebungsvariablen haben, können Sie einfach in Ihrer Umgebung schreiben ..ts:
export const environment = {
...
VERSION: require('../../package.json').version
};
Und in Ihrer Komponente:
import { environment } from '../../environments/environment';
...
public version: string = environment.VERSION;
Wenn Sie die
Name 'erforderlich'
Fehler nicht finden können, geben Sie bitte Ihre /src/tsconfig.app ändern bekommen. json, um die Knotentypen einzuschließen:
{
...
"compilerOptions": {
...
"types": ["node"]
}
}
Danke, das ist ein alter Thread, aber deine Lösung scheint mir am besten zu sein – Zbynek
Ich glaube nicht, dass "Angle Bracket Percent" etwas mit angular1 zu tun hat. Das ist wahrscheinlich eine Schnittstelle zu einer anderen API, von der Sie nicht wissen, dass sie in Ihrem vorherigen Projekt verwendet wird.
Ihre einfachste Lösung: nur die Versionsnummer Datei manuell in Ihrer HTML-Liste oder speichern sie in einer globalen Variablen, wenn Sie es an mehreren Stellen verwenden:
<script>
var myAppVersionNumber = "0.0.1";
</script>
...
<body>
<p>My App's Version is: {{myAppVersionNumber}}</p>
</body>
Ihre härtere Lösung: Lauf ein Build-Automatisierung Schritt, der die Versionsnummer von Ihrer package.json Datei extrahiert und dann umschreibt Ihre Datei index.html (oder js/ts-Datei), um den Wert zu übernehmen:
konnte einfach importieren oder die package.json Datei benötigen, wenn Sie in einer Umgebung arbeiten, die es unterstützt:
var version = require("../package.json").version;
auch in einem bash script erfolgen Dies könnte, der die package.json liest und editiert dann eine andere Datei.
Ohne den Tipp zu verwenden, ist dies eigentlich die beste Antwort. Weil es keine unnötige/sensible Information in der Produktionserstellung gibt. – Rafiek
Sie könnten package.json wie jede andere Datei, mit http.get wie so zu lesen:
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);
}
}
In NodeJS Befehl promt C: \ Benutzer \ Benutzername> node -v ist dies für nodejs version, C: \ Benutzer \ Benutzername> npm -v dies ist für npm-Version.
Guter Versuch, aber das ist nicht die Version, die er verlangt, seine Angular App hat eine Versionsnummer in dem Paket, JSON – Mikkel
Wenn Sie webpack oder angular-cli verwenden (wer nutzt das webpack), können Sie einfach package.json in Ihrer Komponente benötigen und diese prop anzeigen.
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
Und dann haben Sie Ihre Komponente
@Component({
selector: 'stack-overflow',
templateUrl: './stack-overflow.component.html'
})
export class StackOverflowComponent {
public appVersion
constructor() {
this.appVersion = appVersion
}
}
Es ist erwähnenswert, dass, wenn jemand auf Fehler "Name nicht finden kann erforderlich" nach dem Anwenden Ihrer Lösung muss dann hinzufügen "node" gibt die Eigenschaft "types" in der Datei tsconfig.app.ts ein. << "Typen": ["Knoten"] >>. Getestet in Angular v4 –
Und in AOT funktioniert es nicht (wie üblich) – baio
@baio - Ich habe dieses Code-Schnipsel in meinen Produktions-Apps seit ungefähr einem Jahr (läuft AOT in Produktion). Kann ich Ihnen helfen, Ihr Problem irgendwie zu beheben? – DyslexicDcuk
Antwort DyslexicDcuk versucht, ergab cannot find name require
Dann lesen 'Optionale Module Laden und andere fortgeschrittene Loading Szenarien' Abschnitt in https://www.typescriptlang.org/docs/handbook/modules.html hat mir geholfen, dieses Problem lösen .(Erwähnt von Gary hier https://stackoverflow.com/a/41767479/7047595)
Verwenden Sie die folgende Deklaration, um package.json zu verlangen.
declare function require(moduleName: string): any;
const {version : appVersion} = require('path-to-package.json');
Typoskript
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>
Sie brauchen etwas Schluck oder Grunt-Plugin, wenn Sie ein Build-System haben. es gibt derzeit keine AFIK irgendwelche Mechanismus in Angular für diese –
Ich benutze Programm die App in 'Typoskript', verwenden' npm Start', um die Kompilierung und 'SystemJS' zu starten, um die Konfiguration einzustellen. Gibt es eine Möglichkeit, die Version mit diesen zu setzen? – Zbynek