¿Cómo mostrar la versión de la aplicación en Angular?

¿Cómo muestro la versión de la aplicación en la aplicación Angular? La versión debe tomarse del package.jsonarchivo.

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

En Angular 1.x, tengo este html:

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

En Angular, esto no se representa como número de versión, sino que simplemente se imprime tal como está ( <%=version %>en lugar de 0.0.1).

Jan 21 '16 01:01 Zbynek

Si desea utilizar/mostrar el número de versión en su aplicación angular, haga lo siguiente:

Requisitos previos:

Estructura angular de archivos y carpetas creada a través de Angular CLI

Pasos para Angular 6.1 (TS 2.9+) hasta Angular 11

En su /tsconfig.json(a veces también necesario en /src/tsconfig.app.json) habilite la siguiente opción (después es necesario reiniciar el servidor de desarrollo webpack):

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

Luego, en su componente, por ejemplo, /src/app/app.component.tsuse la información de la versión como esta:

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

Al usar este código con Angular 12+ probablemente obtendrás: Error: Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon). En este caso utilice el siguiente código:

Pasos para Angular 12+

En su /tsconfig.json(a veces también necesario en /src/tsconfig.app.json) habilite las siguientes opciones (después es necesario reiniciar el servidor de desarrollo webpack):

    "compilerOptions": {
      ...
      "resolveJsonModule": true,
      "allowSyntheticDefaultImports": true,
      ...

Luego, en su componente, por ejemplo, /src/app/app.component.tsuse la información de la versión como esta:

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

También es posible realizar el paso 2 en su archivo Environment.ts, haciendo que se pueda acceder a la información de la versión desde allí.

Gracias @Ionaru y @MarcoRinck por ayudar.

Esta solución no debe incluir el contenido del paquete.json al realizar una compilación de producción, solo el número de versión (verificado con Angular 8 y 13).

Para estar seguro, verifique también el archivo main.#hash#.js generado.

Feb 19 '2018 15:02 radomeit

Si está utilizando webpack o angular-cli (que usa webpack), puede simplemente requerir package.json en su componente y mostrar ese accesorio.

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

Y luego tienes tu componente.

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

  constructor() {
    this.appVersion = appVersion
  }
}

Dec 23 '2016 10:12 damirsehic

Usando la opción tsconfig --resolveJsonModulepuede importar archivos json en Typecript.

En el archivo entorno.ts:

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

export const environment = {
    VERSION: version,
};

Ahora puede usarlo environment.VERSIONen su aplicación.

May 02 '2019 08:05 Ionaru