Bagaimana cara menampilkan versi aplikasi di Angular?

Bagaimana cara menampilkan versi aplikasi dalam aplikasi sudut? versi harus diambil dari package.jsonfile

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

Dalam angular 1.x, saya memiliki html ini:

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

Secara bersudut, ini tidak diberikan sebagai nomor versi, melainkan hanya dicetak sebagaimana adanya ( <%=version %>bukan 0.0.1).

Jika Anda ingin menggunakan / menampilkan nomor versi di aplikasi sudut Anda, lakukan hal berikut:

Prasyarat:

• File sudut dan struktur folder dibuat melalui CLI Angular

• TypeScript 2.9 atau yang lebih baru! (Didukung dari Angular 6.1 ke atas)

Langkah:

1. Di Anda /tsconfig.json(terkadang juga diperlukan /src/tsconfig.app.json), aktifkan opsi resolJsonModule (perlu dimulai ulang server dev webpack setelahnya):

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

2. Kemudian di komponen Anda, misalnya /src/app/app.component.tsgunakan info versi:

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

Anda juga dapat melakukan langkah 2 di file environment.ts Anda, membuat info versi dapat diakses dari sana.

Thx @Ionaru dan @MarcoRinck untuk membantu keluar.

Solusi ini tidak akan menyertakan konten package.json, hanya nomor versinya.
Diuji dengan Angular8 / Node10 / TypeScript3.4.3.

Harap perbarui aplikasi Anda untuk menggunakan solusi ini karena bergantung pada konten package.json solusi asli mungkin melibatkan masalah keamanan.

Jika Anda menggunakan webpack atau angular-cli (yang menggunakan webpack), Anda bisa meminta package.json di komponen Anda dan menampilkan prop itu.

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

Dan kemudian Anda memiliki komponen Anda

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

  constructor() {
    this.appVersion = appVersion
  }
}

Menggunakan opsi tsconfig, --resolveJsonModuleAnda dapat mengimpor file json di Typecript.

Di file environment.ts:

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

export const environment = {
    VERSION: version,
};

Anda sekarang dapat menggunakan environment.VERSIONaplikasi Anda.

Hasil percobaan DyslexicDcuk cannot find name require

Kemudian, membaca bagian 'Pemuatan Modul Opsional dan Skenario Pemuatan Lanjutan Lainnya' di https://www.typescriptlang.org/docs/handbook/modules.html membantu saya mengatasi ini. (Disebutkan oleh Gary di sini https://stackoverflow.com/a/41767479/7047595 )

Gunakan pernyataan di bawah ini untuk meminta package.json.

declare function require(moduleName: string): any;

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

Solusi sederhana untuk pengguna cli sudut.

add declare module '*.json';onsrc/typings.d.ts

Lalu src/environments/environment.ts:

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

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

Selesai :)

Ketikan

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>

Sebaiknya deklarasikan versionsebagai variabel lingkungan sehingga Anda dapat menggunakannya di mana saja dalam proyek Anda. (Khususnya jika memuat file yang akan di-cache berdasarkan versi e.g. yourCustomjsonFile.json?version=1.0.0)
Untuk mencegah masalah keamanan (seperti yang disebutkan @ZetaPR) kita dapat menggunakan pendekatan ini (pada komentar @sgwatgit)
Singkatnya: kami membuat yourProjectPath \ PreBuild.js mengajukan. Seperti ini:

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

Cuplikan di atas akan membuat file baru /src/environments/version.tsyang berisi konstanta bernama versiondan mengaturnya dengan nilai yang diekstrak dari package.jsonfile.

Untuk menjalankan konten PreBuild.jsonon build, Kami menambahkan file ini ke Package.json-> "scripts": { ... }"bagian seperti berikut. Jadi kita bisa menjalankan proyek menggunakan kode ini npm start:

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

Sekarang kita dapat mengimpor versi dan menggunakannya dimanapun kita inginkan:

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

Saya tidak berpikir bahwa "Persen Braket Sudut" ada hubungannya dengan sudut1. Sepertinya itu adalah antarmuka ke API lain yang tidak Anda sadari sedang digunakan dalam proyek Anda sebelumnya.

Solusi termudah Anda: cukup daftarkan nomor versi secara manual di file HTML Anda atau simpan dalam variabel global jika Anda menggunakannya di banyak tempat:

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

Solusi Anda yang lebih sulit: jalankan langkah otomatisasi build yang mengekstrak nomor versi dari file package.json Anda dan kemudian tulis ulang file index.html Anda (atau file js / ts) untuk menyertakan nilai:

• Bisa langsung mengimpor atau memerlukan file package.json, jika Anda bekerja di lingkungan yang mendukungnya:

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

• Ini juga bisa dilakukan dalam skrip bash yang membaca package.json dan kemudian mengedit file lain.

• Anda dapat menambahkan skrip NPM atau mengubah skrip awal Anda untuk menggunakan modul tambahan untuk membaca dan menulis file.
• Anda dapat menambahkan grunt atau gulp ke pipeline Anda, lalu menggunakan modul tambahan untuk membaca atau menulis file.

Saya telah mencoba menyelesaikan ini dengan cara yang sedikit berbeda, juga mempertimbangkan kemudahan kenyamanan dan pemeliharaan.

Saya telah menggunakan skrip bash untuk mengubah versi di seluruh aplikasi. Skrip berikut akan menanyakan nomor versi yang diinginkan, dan hal yang sama diterapkan di seluruh aplikasi.

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

Saya telah menyimpan skrip ini dalam file bernama version-manager.sh di root proyek, dan di file package.json saya, saya juga membuat skrip untuk menjalankannya saat diperlukan untuk mengubah versi.

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

Akhirnya, saya bisa mengubah versinya dengan menjalankan

npm run change-version 

Perintah ini akan mengubah versi di template index.html dan juga di file package.json. Berikut adalah beberapa tangkapan layar yang diambil dari aplikasi saya yang ada.

Anda bisa membaca package.json seperti file lainnya, dengan http.get seperti ini:

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