Uygulama sürümü Angular'da nasıl görüntülenir?

Uygulama sürümünü açısal uygulamada nasıl görüntülerim? sürüm package.jsondosyadan alınmalıdır

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

Açısal 1.x, bu html var:

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

Açısal olarak bu versiyon numarası olarak verilen, ancak (olduğu gibi yerine sadece basılı değildir <%=version %>yerine 0.0.1).

Açısal uygulamanızda sürüm numarasını kullanmak / göstermek istiyorsanız lütfen aşağıdakileri yapın:

Ön şartlar:

• Açısal CLI ile oluşturulan açısal dosya ve klasör yapısı

• TypeScript 2.9 veya üstü! (Açısal 6.1'den yukarı doğru desteklenir)

Adımlar:

1. Senin içinde /tsconfig.json(bazen gerekli in /src/tsconfig.app.jsonresolveJsonModule seçeneğini etkinleştirin) (webpack dev sunucu yeniden başlatma sonrasında gerekli):

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

2. Ardından bileşeninizde, örneğin /src/app/app.component.tssürüm bilgilerini kullanın:

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

Ayrıca, version.ts dosyanızda 2. adımı uygulayarak sürüm bilgisini oradan erişilebilir hale getirebilirsiniz.

Yardım için Thx @Ionaru ve @MarcoRinck .

Bu çözüm package.json içeriğini içermez, sadece sürüm numarasını içerir.
Açısal8 / Düğüm10 / TypeScript 3.4.3 ile test edilmiştir.

Lütfen paketinizin içeriğine bağlı olarak bu çözüm nedenini kullanmak için uygulamalarınızı güncelleyin. Json orijinal çözüm güvenlik sorunlarına neden olabilir.

Webpack veya açısal cli kullanıyorsanız (webpack kullanan), bileşeninizde package.json'a ihtiyacınız olabilir ve bu desteği görüntüleyebilirsiniz.

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

Ve sonra bileşeniniz var

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

  constructor() {
    this.appVersion = appVersion
  }
}

Tsconfig seçeneğini kullanarak --resolveJsonModulejson dosyalarını Typescript'e aktarabilirsiniz.

Environment.ts dosyasında:

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

export const environment = {
    VERSION: version,
};

Artık environment.VERSIONuygulamanızda kullanabilirsiniz .

DislexicDcuk'un cevabı denendi cannot find name require

Ardından, https://www.typescriptlang.org/docs/handbook/modules.html adresindeki 'İsteğe Bağlı Modül Yükleme ve Diğer Gelişmiş Yükleme Senaryoları' bölümünü okumak bunu çözmeme yardımcı oldu. (Gary tarafından burada belirtilmiştir https://stackoverflow.com/a/41767479/7047595 )

Package.json istemek için aşağıdaki bildirimi kullanın.

declare function require(moduleName: string): any;

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

Açısal cli kullanıcıları için basit liste çözümü.

ekle declare module '*.json';üzerindesrc/typings.d.ts

Ve sonra src/environments/environment.ts:

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

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

Tamamlandı :)

versionOrtam değişkeni olarak tanımlamak iyi bir fikirdir, böylece onu projenizin her yerinde kullanabilirsiniz. (özellikle sürüme göre önbelleğe alınacak dosyaların yüklenmesi durumunda e.g. yourCustomjsonFile.json?version=1.0.0)
Güvenlik sorunlarını önlemek için (@ZetaPR'un belirttiği gibi) bu yaklaşımı kullanabiliriz (@sgwatgit'in yorumunda)
Kısacası: birProjectPath \ PreBuild.js oluşturuyoruz dosya. Bunun gibi:

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

Yukarıdaki snippet, /src/environments/version.tsadlı bir sabit içeren yeni bir dosya oluşturur versionve bu package.jsondosyayı dosyadan ayıklanan değere göre ayarlar .

Derlemenin içeriğini çalıştırmak PreBuild.jsoniçin, bu dosyayı aşağıdaki gibi Package.json-> "scripts": { ... }"bölümüne ekliyoruz . Yani bu kodu kullanarak projeyi çalıştırabiliriz npm start:

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

Şimdi sürümü içe aktarabilir ve istediğimiz yerde kullanabiliriz:

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

daktilo ile yazılmış yazı

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>

"Köşeli Ayraç Yüzdesi" nin açısal1 ile ilgisi olduğunu düşünmüyorum. Muhtemelen önceki projenizde kullanıldığını bilmediğiniz başka bir API'nin arayüzü.

En kolay çözümünüz: sürüm numarasını HTML dosyanızda manuel olarak listelemeniz veya birden fazla yerde kullanıyorsanız global bir değişkente depolamanız yeterlidir:

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

Daha zor çözümünüz: package.json dosyanızdan sürüm numarasını ayıklayan ve sonra index.html dosyanızı (veya js / ts dosyanızı) yeniden yazacak bir yapı otomasyon adımı çalıştırın:

• Destekleyen bir ortamda çalışıyorsanız, package.json dosyasını içe aktarabilir veya gerektirebilir:

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

• Bu , package.json dosyasını okuyan ve daha sonra başka bir dosyayı düzenleyen bir bash betiğinde de yapılabilir .

• Dosyaları okumak ve yazmak için ek modüller kullanmak üzere bir NPM komut dosyası ekleyebilir veya başlangıç ​​komut dosyanızı değiştirebilirsiniz .
• Boru hattınıza homurdanma veya yıpranma ekleyebilir ve daha sonra dosyaları okumak veya yazmak için ek modüller kullanabilirsiniz.

Kolaylık ve bakım kolaylığı da göz önüne alındığında, bunu biraz farklı bir şekilde çözmeye çalıştım.

Tüm uygulama boyunca sürümü değiştirmek için bash komut dosyasını kullandım. Aşağıdaki komut dosyası sizden istenen sürüm numarasını isteyecektir ve aynı uygulama genelinde uygulanır.

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

Bu komut dosyasını projenin kök dizininde version-manager.sh adlı bir dosyaya kaydettim ve paket.json dosyamda , sürümü değiştirmek gerektiğinde de çalıştırmak için bir komut dosyası oluşturdum.

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

Son olarak, sadece çalıştırarak sürümü değiştirebilirim

npm run change-version 

Bu komut, index.html şablonundaki ve package.json dosyasındaki sürümü değiştirir. Aşağıda mevcut uygulamamdan alınan birkaç ekran görüntüsü vardı.

Package.json dosyasını diğer herhangi bir dosya gibi http.get ile okuyabilirsiniz:

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