Jak wyświetlić wersję aplikacji w Angular?

Jak wyświetlić wersję aplikacji w aplikacji kątowej? wersję należy pobrać z package.jsonpliku

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

W angular 1.x mam taki html:

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

W wersji kątowej nie jest to renderowane jako numer wersji, ale po prostu drukowane tak, jak jest ( <%=version %>zamiast 0.0.1).

Jeśli chcesz używać / wyświetlać numer wersji w swojej aplikacji kątowej, wykonaj następujące czynności:

Wymagania wstępne:

• Angular struktura plików i folderów utworzona za pomocą Angular CLI

• TypeScript 2.9 lub nowszy! (Obsługiwane od wersji Angular 6.1)

Kroki:

1. W swoim /tsconfig.json(czasami jest to również konieczne /src/tsconfig.app.json) włącz opcję resolutionJsonModule (później wymagany jest restart serwera webpack dev):

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

2. Następnie w swoim komponencie /src/app/app.component.tsużyj na przykład informacji o wersji:

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

Możliwe jest również wykonanie kroku 2 w pliku environment.ts, dzięki czemu informacje o wersji będą dostępne z tego miejsca.

Thx @Ionaru i @MarcoRinck za pomoc.

To rozwiązanie nie będzie zawierało zawartości package.json, a jedynie numer wersji.
Przetestowano w / Angular8 / Node10 / TypeScript 3.4.3.

Zaktualizuj swoje aplikacje, aby korzystały z tego rozwiązania, ponieważ w zależności od zawartości pliku package.json oryginalne rozwiązanie może powodować problemy z bezpieczeństwem.

Jeśli używasz webpacka lub angular-cli (który używa webpacka), możesz po prostu zażądać package.json w swoim komponencie i wyświetlić ten atrybut.

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

A potem masz swój komponent

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

  constructor() {
    this.appVersion = appVersion
  }
}

Używając opcji tsconfig --resolveJsonModule, możesz importować pliki JSON w Typescript .

W pliku environment.ts:

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

export const environment = {
    VERSION: version,
};

Możesz teraz użyć environment.VERSIONw swojej aplikacji.

Wypróbowanie odpowiedzi DyslexicDcuk zaowocowało cannot find name require

Następnie przeczytanie sekcji „Opcjonalne ładowanie modułów i inne zaawansowane scenariusze ładowania” na stronie https://www.typescriptlang.org/docs/handbook/modules.html pomogło mi rozwiązać ten problem. (Wspomniane przez Gary'ego tutaj https://stackoverflow.com/a/41767479/7047595 )

Użyj poniższej deklaracji, aby wymagać pliku package.json.

declare function require(moduleName: string): any;

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

Proste rozwiązanie dla użytkowników kątowych CLI.

Dodaj declare module '*.json';nasrc/typings.d.ts

A potem src/environments/environment.ts:

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

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

Gotowe :)

Dobrym pomysłem jest zadeklarowanie versionjako zmienna środowiskowa, dzięki czemu można jej używać wszędzie w projekcie. (szczególnie w przypadku ładowania plików do buforowania na podstawie wersji e.g. yourCustomjsonFile.json?version=1.0.0)
Aby zapobiec problemom z bezpieczeństwem (jak wspomniano w @ZetaPR) , możemy zastosować to podejście (w komentarzu @sgwatgit)
W skrócie: tworzymy twoją ścieżkę projektu \ PreBuild.js plik. Lubię to:

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

Powyższy fragment utworzy nowy plik, /src/environments/version.tsktóry zawiera stałą o nazwie versioni ustawi ją na podstawie wyodrębnionej wartości z package.jsonpliku.

Aby uruchomić zawartość PreBuild.jsonpodczas kompilacji, dodajemy ten plik do sekcji Package.json-> "scripts": { ... }"jak poniżej. Możemy więc uruchomić projekt używając tego kodu npm start:

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

Teraz możemy po prostu zaimportować wersję i używać jej w dowolnym miejscu:

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

Maszynopis

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>

Nie sądzę, aby „Procent wspornika kątowego” miał coś wspólnego z angular1. Prawdopodobnie jest to interfejs do innego interfejsu API, o którym nie zdajesz sobie sprawy, że jest używany w poprzednim projekcie.

Najłatwiejsze rozwiązanie: po prostu wpisz ręcznie numer wersji w pliku HTML lub zapisz go w zmiennej globalnej, jeśli używasz jej w wielu miejscach:

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

Trudniejsze rozwiązanie: uruchom krok automatyzacji kompilacji, który wyodrębnia numer wersji z pliku package.json, a następnie przepisuje plik index.html (lub plik js / ts), aby zawierał wartość:

• Możesz po prostu zaimportować lub wymagać pliku package.json, jeśli pracujesz w środowisku, które go obsługuje:

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

• Można to również zrobić w skrypcie bash, który czyta plik package.json, a następnie edytuje inny plik.

• Możesz dodać skrypt NPM lub zmodyfikować skrypt startowy, aby korzystać z dodatkowych modułów do odczytu i zapisu plików.
• Możesz dodać chrząknięcie lub łyk do swojego potoku, a następnie użyć dodatkowych modułów do odczytu lub zapisu plików.

Próbowałem rozwiązać ten problem w nieco inny sposób, biorąc pod uwagę również wygodę i łatwość konserwacji.

Użyłem skryptu bash, aby zmienić wersję w całej aplikacji. Poniższy skrypt zapyta Cię o żądany numer wersji i to samo zostanie zastosowane w całej aplikacji.

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

Zapisałem ten skrypt w pliku o nazwie version-manager.sh w katalogu głównym projektu, aw moim pliku package.json utworzyłem również skrypt, który uruchamia go, gdy zajdzie potrzeba zmodyfikowania wersji.

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

Wreszcie mogę po prostu zmienić wersję, wykonując

npm run change-version 

To polecenie zmieni wersję w szablonie index.html, a także w pliku package.json. Poniżej przedstawiono kilka zrzutów ekranu zrobionych z mojej istniejącej aplikacji.

Możesz czytać package.json jak każdy inny plik, z http.get w ten sposób:

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