Bagaimana cara menampilkan versi aplikasi di Angular?


161

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).


Anda membutuhkan plugin gulp atau grunt, jika Anda memiliki sistem build. saat ini tidak ada AFIK mekanisme apa pun di Angular untuk ini
Universitas Angular

Saya menggunakan program aplikasi typescript, gunakan npm startuntuk menjalankan kompilasi dan SystemJSuntuk mengatur konfigurasi. apakah ada cara untuk menyetel versi menggunakan salah satu dari ini?
Zbynek

Jawaban:


280

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
      ...
  1. 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.


20
ini bekerja dengan sudut 5 dan kompilasi aot jika ada yang bertanya
Nikola.Lukovic

5
Catatan penting: mulai ulang server Anda (lakukan servis atau npm mulai lagi) agar ini berlaku!
pengguna1884155

2
Jawaban ini tidak boleh diterima karena membuka masalah keamanan karena Anda sekarang memasukkan package.json Anda dalam bundel browser dan semua orang di internet sekarang dapat membaca konfigurasi proyek internal Anda. Harap edit dengan solusi oleh @Ionarus
Marco Rinck

3
@MarcoRinck: Terima kasih telah menunjukkan hal ini. Saya bisa mereproduksi masalah ini. Tidak tahu apakah itu datang karena pengeditan jawaban di masa lalu tetapi untuk memastikan bahwa tidak ada lagi yang menggunakan solusi lama, saya mengedit jawaban dan menghapus panggilan yang bermasalah () di dalamnya.
radomeit

3
angular 8 dikonfirmasi
vuhung3990

57

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

8
Perlu disebutkan bahwa jika seseorang menemukan kesalahan "Tidak dapat menemukan nama yang diperlukan" setelah menerapkan solusi Anda, maka perlu menambahkan jenis "simpul" di dalam properti "jenis" di file tsconfig.app.ts. << "types": ["node"] >>. Diuji dalam Angular v4
Tomasz Czechowski

@baio - Saya memiliki cuplikan kode ini yang berjalan di aplikasi produksi saya selama sekitar satu tahun sekarang (menjalankan AOT dalam produksi). Dapatkah saya membantu Anda men-debug masalah Anda?
DyslexicDcuk

5
Meskipun posting ini memiliki beberapa waktu, saya harus menunjukkan bahwa ini berpotensi mengekspos beberapa info pembangunan dan pengembangan dalam pembuatan produksi dan yang berpotensi berbahaya bagi lingkungan produksi.
ZetaPR

@ZetaPR sangat tidak direkomendasikan!
Jimmy Kane

8
Library @DyslexicDcuk dengan nomor versi adalah data sensitif dari perspektif keamanan.
Rafiek

29

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.


2
@lonaru Apakah ada implikasi keamanan saat mengimpor file package.json. Saya bertanya-tanya apakah ini dengan cara tertentu mengekspos konten package.json?
tif

2
@tif Seharusnya tidak ada implikasi keamanan karena package.json tidak diimpor sepenuhnya. Versi adalah satu-satunya hal yang berakhir di build produksi.
Ionaru

19

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

9

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 :)


1
Anda mungkin perlu menambahkan "allowSyntheticDefaultImports": trueke tsconfig.json tergantung pada versi Angular Anda.
bjornalm

6

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>

6

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

4

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.

1
Tanpa tip untuk menggunakan Requirement, ini sebenarnya adalah jawaban terbaik. Karena tidak akan ada informasi yang tidak perlu / sensitif dalam pembuatan produksi.
Rafiek

<% %>biasanya menunjukkan bahasa .Net seperti c #
danwellman

2

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.

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini


-1

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);
    }
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.