typescript - Hur visar man appens version i Angular?

Hur visar jag appversionen i en Angular-applikation? Versionen ska hämtas från package.json-filen.

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

I Angular 1.x har jag denna HTML:

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

I Angular renderas detta inte som versionsnummer, utan skrivs istället ut som det är (<%=version %> istället för 0.0.1).

Svar #1

Om du vill använda/visa versionsnumret i din Angular-app, vänligen gör följande:

Förkunskaper:

  • Angular-fils- och mappstruktur skapad via Angular CLI

Steg för Angular 6.1 (TS 2.9+) till Angular 11

  1. I din /tsconfig.json (ibland också nödvändigt i /src/tsconfig.app.json) aktivera följande alternativ (omstart av webpack dev server krävs därefter):
    "compilerOptions": {
      ...
      "resolveJsonModule": true,
      ...
  1. Sedan, i din komponent, till exempel /src/app/app.component.ts, använd versionsinformationen så här:
    import { version } from '../../package.json';
    ...
    export class AppComponent {
      public version: string = version;
    }

När du använder denna kod med Angular 12+ kommer du troligen att 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, vänligen använd följande kod:

Steg för Angular 12+

  1. I din /tsconfig.json (ibland också nödvändigt i /src/tsconfig.app.json) aktivera följande alternativ (omstart av webpack dev server krävs därefter):
    "compilerOptions": {
      ...
      "resolveJsonModule": true,
      "allowSyntheticDefaultImports": true,
      ...
  1. Sedan, i din komponent, till exempel /src/app/app.component.ts, använd versionsinformationen så här:
    import packageJson from '../../package.json';
    ...
    export class AppComponent {
      public version: string = packageJson.version;
    }

Det är också möjligt att göra steg 2 i din environment.ts-fil, vilket gör versionsinformationen tillgänglig därifrån.

Tack @Ionaru och @MarcoRinck för att ni hjälpte till.

Denna lösning bör inte inkludera innehållet i package.json vid en produktionsbyggnad - endast versionsnumret (kontrollerat med Angular 8 och 13).

För att vara säker, vänligen kontrollera även din genererade main.#hash#.js-fil!

Svar #2

Om du använder webpack eller angular-cli (som använder webpack), kan du helt enkelt kräva package.json i din komponent och visa 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

Och sedan har du din komponent

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

  constructor() {
    this.appVersion = appVersion
  }
}

Svar #3

Genom att använda tsconfig-alternativet --resolveJsonModule kan du importera json-filer i Typescript.

I filen environment.ts:

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

export const environment = {
    VERSION: version,
};

Du kan nu använda environment.VERSION i din applikation.

Svar #4

Att prova DyslexicDcuks svar resulterade i kan inte hitta namnet require

Sedan hjälpte läsningen av avsnittet 'Optional Module Loading and Other Advanced Loading Scenarios' på https://www.typescriptlang.org/docs/handbook/modules.html mig att lösa detta. (Nämnt av Gary här https://stackoverflow.com/a/41767479/7047595)

Använd nedanstående deklaration för att kräva package.json.

declare function require(moduleName: string): any;

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

Svar #5

Det är en bra idé att deklarera version som en miljövariabel så att du kan använda den överallt i ditt projekt. (särskilt i fall av att ladda filer som ska cachelagras baserat på version t.ex. yourCustomjsonFile.json?version=1.0.0)
För att förhindra säkerhetsproblem (som @ZetaPR nämnde) kan vi använda detta tillvägagångssätt (på @sgwatgit:s kommentar)
Kort sagt: vi skapar en yourProjectPath\PreBuild.js fil. Så här:

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

Ovanstående kodsnutt kommer att skapa en ny fil /src/environments/version.ts som innehåller en konstant som heter version och sätter den med värdet hämtat från package.json-filen.

För att köra innehållet i PreBuild.json vid byggande, lägger vi till denna fil i Package.json -> "scripts": { ... }"-sektionen som följer. Så vi kan köra projektet med denna kod: npm start:

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

Nu kan vi enkelt importera version och använda den var vi vill:

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

Enklaste lösningen för Angular CLI-användare.

Lägg till declare module '*.json'; i src/typings.d.ts

Och sedan på src/environments/environment.ts:

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

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

Klart :)

Svar #8

I Angular 12 import { version } from '../../package.json'; ger ett fel:

./src/environments/environment.ts:10:13-20 - Fel: Bör inte importera den namngivna exporten 'version' (importerad som 'version') från en modul som exporterar standard (endast standardexport kommer snart att vara tillgänglig)

För att fortsätta importera versionen utan säkerhetskonsekvenserna av att föra in hela innehållet i package.json i bygget, kan du göra:

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

Från https://github.com/angular/angular-cli/issues/3770#issuecomment-269822722

Om du stöter på ett Cannot find name 'require'-fel, se https://stackoverflow.com/a/43129815/418819 och https://stackoverflow.com/a/54004979/418819

Relaterade artiklar