typescript - Hvordan vise app-versjonen i Angular?

Hvordan viser jeg appversjonen i en Angular-applikasjon? Versjonen skal hentes fra package.json-filen.

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

I Angular 1.x har jeg denne HTML-en:

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

I Angular blir dette ikke vist som versjonsnummer, men bare skrevet ut som det er (<%=version %> i stedet for 0.0.1).

Svar #1

Hvis du vil bruke/vis versjonsnummeret i din Angular-app, vennligst gjør følgende:

Forutsetninger:

  • Angular-fil- og mappestruktur opprettet via Angular CLI

Trinn for Angular 6.1 (TS 2.9+) til Angular 11

  1. I din /tsconfig.json (noen ganger også nødvendig i /src/tsconfig.app.json) aktiver følgende alternativ (webpack dev server må startes på nytt etterpå):
    "compilerOptions": {
      ...
      "resolveJsonModule": true,
      ...
  1. Så i komponenten din, for eksempel /src/app/app.component.ts, bruk versjonsinformasjonen slik:
    import { version } from '../../package.json';
    ...
    export class AppComponent {
      public version: string = version;
    }

Når du bruker denne koden med Angular 12+ vil du sannsynligvis få: Error: Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon). I så fall vennligst bruk følgende kode:

Trinn for Angular 12+

  1. I din /tsconfig.json (noen ganger også nødvendig i /src/tsconfig.app.json) aktiver følgende alternativer (krever omstart av webpack dev server etterpå):
    "compilerOptions": {
      ...
      "resolveJsonModule": true,
      "allowSyntheticDefaultImports": true,
      ...
  1. Så i komponenten din, for eksempel /src/app/app.component.ts, bruk versjonsinformasjonen slik:
    import packageJson from '../../package.json';
    ...
    export class AppComponent {
      public version: string = packageJson.version;
    }

Det er også mulig å gjøre trinn 2 i filen din environment.ts, slik at versjonsinformasjonen blir tilgjengelig derfra.

Takk @Ionaru og @MarcoRinck for hjelpen.

Denne løsningen bør ikke inkludere innholdet i package.json ved produksjonsbygg - bare versjonsnummeret (testet med Angular 8 og 13).

For å være sikker, vennligst sjekk også den genererte main.#hash#.js-filen din!

Svar #2

Hvis du bruker webpack eller angular-cli (som bruker webpack), kan du bare kreve package.json i komponenten din og vise den egenskapen.

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

Og så har du komponenten din

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

  constructor() {
    this.appVersion = appVersion
  }
}

Svar #3

Ved å bruke tsconfig-alternativet --resolveJsonModule kan du importere json-filer i TypeScript.

I filen environment.ts:

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

export const environment = {
    VERSION: version,
};

Du kan nå bruke environment.VERSION i applikasjonen din.

Svar #4

Å prøve DyslexicDcuks svar resulterte i kan ikke finne navnet require

Deretter hjalp det meg å løse dette ved å lese seksjonen 'Optional Module Loading and Other Advanced Loading Scenarios' på https://www.typescriptlang.org/docs/handbook/modules.html. (Nevnt av Gary her https://stackoverflow.com/a/41767479/7047595)

Bruk utsagnet nedenfor for å kreve package.json.

declare function require(moduleName: string): any;

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

Svar #5

Det er en god idé å deklarere version som en miljøvariabel, slik at du kan bruke den overalt i prosjektet ditt. (spesielt i tilfelle du laster filer som skal cachebaseres på versjon f.eks. yourCustomjsonFile.json?version=1.0.0)
For å forhindre sikkerhetsproblemer (som @ZetaPR nevnte) kan vi bruke denne tilnærmingen (på @sgwatgit 's kommentar)
Kort sagt: vi oppretter en yourProjectPath\PreBuild.js fil. Slik:

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, { flag: '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`);
});

Ovenstående utdrag vil opprette en ny fil /src/environments/version.ts som inneholder en konstant kalt version og setter den til verdien hentet fra package.json-filen.

For å kjøre innholdet i PreBuild.json ved bygging, legger vi denne filen inn i Package.json -> "scripts": { ... }"-delen som følger. Så kan vi kjøre prosjektet ved å bruke denne koden: npm start:

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

Nå kan vi enkelt importere version og bruke den hvor som helst:

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

Svar #6

Typescript

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>

Svar #7

Enkleste løsning for Angular CLI-brukere.

Legg til declare module '*.json'; i src/typings.d.ts

Og så på src/environments/environment.ts:

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

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

Ferdig :)

Svar #8

I Angular 12 import { version } from '../../package.json'; gir en feil:

./src/environments/environment.ts:10:13-20 - Feil: Skal ikke importere den navngitte eksporten 'version' (importert som 'version') fra modul som eksporterer default (bare standardeksport vil snart være tilgjengelig)

For å fortsette å importere versjonen uten sikkerhetsimplikasjonene ved å bringe hele innholdet i package.json inn i bygget, kan du gjøre:

export const environment = {
  ...
  VERSION: require('../../package.json').version,
};

Fra https://github.com/angular/angular-cli/issues/3770#issuecomment-269822722

Hvis du støter på en Cannot find name 'require'-feil, se https://stackoverflow.com/a/43129815/418819 og https://stackoverflow.com/a/54004979/418819

Relaterte artikler