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


146

¿Cómo visualizo 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 se imprime tal como está (en <%=version %>lugar de 0.0.1).


necesita un complemento de trago o gruñido, si tiene un sistema de compilación. actualmente no hay ningún mecanismo de AFIK en Angular para esto
Angular University

Uso el programa en la aplicación typescript, lo uso npm startpara ejecutar la compilación y SystemJSestablecer la configuración. ¿Hay alguna manera de configurar la versión con alguno de estos?
Zbynek

Respuestas:


255

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

Prerrequisitos:

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

  • TypeScript 2.9 o posterior! (Compatible desde Angular 6.1 hacia arriba)

Pasos:

  1. En su /tsconfig.json(a veces también necesario /src/tsconfig.app.json), habilite la opción resolveJsonModule (se requiere reiniciar el servidor dev webpack después):
    "compilerOptions": {
      ...
      "resolveJsonModule": true
      ...
  1. Luego, en su componente, por ejemplo, /src/app/app.component.tsuse la información de versión:
    import { version } from '../../package.json';
    ...
    export class AppComponent {
      public version: string = version;
    }

También es posible realizar el paso 2 en su archivo environment.ts, haciendo que la información de la versión sea accesible desde allí.

Gracias a @Ionaru y @MarcoRinck por ayudar.

Esta solución no incluirá el contenido de package.json, solo el número de versión.
Probado con Angular8 / Node10 / TypeScript3.4.3.

Actualice sus aplicaciones para usar esta solución porque, según el contenido de su paquete. Json, la solución original puede implicar problemas de seguridad.


18
esto funciona con angular 5 y mucho compilación si alguien se preguntaba
Nikola

55
Nota importante: reinicie su servidor (haga ng serve o npm start de nuevo) para que esto surta efecto.
user1884155

2
@MarcoRinck: Thx por señalar esto. Podría reproducir este problema. No sé si se debió a una edición de la respuesta en el pasado, pero para asegurarme de que ya nadie usara la solución anterior, edité la respuesta y eliminé la llamada problemática require ().
Radomeit

3
angular 8 confirmado
vuhung3990

2
Angular 9 confirmado
Mike de Klerk

56

Si está usando webpack o angular-cli (que usa webpack), solo puede 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
  }
}

8
Vale la pena mencionar que si alguien encuentra el error "No se puede encontrar el nombre requerido" después de aplicar su solución, entonces debe agregar el tipo "nodo" dentro de la propiedad "tipos" en el archivo tsconfig.app.ts. << "tipos": ["nodo"] >>. Probado en Angular v4
Tomasz Czechowski

@baio: tengo este fragmento de código ejecutándose en mis aplicaciones de producción desde hace aproximadamente un año (ejecutando AOT en producción). ¿Puedo ayudarlo a depurar su problema de alguna manera?
DyslexicDcuk

55
A pesar de que esta publicación tiene algo de tiempo, debo señalar que esto podría exponer alguna información de compilación y desarrollo en compilaciones de producción y que es potencialmente dañino para un entorno de producción.
ZetaPR

@ZetaPR exactamente no recomendado!
Jimmy Kane

77
Las bibliotecas @DyslexicDcuk con números de versión son datos confidenciales desde una perspectiva de seguridad.
Rafiek

25

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

En el archivo environment.ts:

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

export const environment = {
    VERSION: version,
};

Ahora puede usar environment.VERSIONen su aplicación.


1
@lonaru Son implicaciones de seguridad al importar el archivo package.json. Me pregunto si esto de alguna manera expone el contenido de package.json.
tif

1
@tif No debería haber implicaciones de seguridad porque el package.json no se importa completamente. La versión es lo único que termina en la construcción de producción.
Ionaru

19

Probar la respuesta de DyslexicDcuk resultó en cannot find name require

Luego, leer la sección 'Carga opcional de módulos y otros escenarios de carga avanzada' en https://www.typescriptlang.org/docs/handbook/modules.html me ayudó a resolver esto. (Mencionado por Gary aquí https://stackoverflow.com/a/41767479/7047595 )

Use la siguiente declaración para requerir package.json.

declare function require(moduleName: string): any;

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

8

Solución simplista para usuarios de cli angular.

Añadir declare module '*.json';elsrc/typings.d.ts

Y luego en src/environments/environment.ts:

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

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

Hecho :)


1
Es posible que deba agregar "allowSyntheticDefaultImports": truea su tsconfig.json dependiendo de su versión angular.
bjornalm

6

Es una buena idea declarar versioncomo variable de entorno para que pueda usarlo en cualquier parte de su proyecto. (especialmente en el caso de cargar archivos para almacenar en caché según la versión e.g. yourCustomjsonFile.json?version=1.0.0)
Para evitar problemas de seguridad (como mencionó @ZetaPR) podemos usar este enfoque (en el comentario de @sgwatgit)
En resumen: creamos un yourProjectPath \ PreBuild.js expediente. Me gusta esto:

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

El fragmento anterior creará un nuevo archivo /src/environments/version.tsque contiene una constante llamada versiony lo establecerá por valor extraído del package.jsonarchivo.

Para ejecutar el contenido de la PreBuild.jsoncompilación, agregamos este archivo a la sección Package.json-> "scripts": { ... }"como se muestra a continuación. Entonces podemos ejecutar el proyecto usando este código npm start:

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

Ahora podemos simplemente importar la versión y usarla donde queramos:

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

5

Mecanografiado

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>

4

No creo que el "porcentaje de paréntesis angular" tenga algo que ver con angular1. Es probable que se esté utilizando una interfaz con otra API que no sabe que se está utilizando en su proyecto anterior.

Su solución más fácil: simplemente enumere el número de versión manualmente en su archivo HTML o guárdelo en una variable global si lo está utilizando en varios lugares:

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

Su solución más difícil: ejecute un paso de automatización de compilación que extraiga el número de versión de su archivo package.json y luego vuelva a escribir su archivo index.html (o archivo js / ts) para incluir el valor:

  • Simplemente podría importar o requerir el archivo package.json, si está trabajando en un entorno que lo admite:

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

  • Esto también podría hacerse en un script bash que lea el paquete.json y luego edite otro archivo.

  • Puede agregar un script NPM o modificar su script de inicio para hacer uso de módulos adicionales para leer y escribir archivos.
  • Puede agregar gruñidos o tragos a su tubería y luego utilizar módulos adicionales para leer o escribir archivos.

Sin la sugerencia de uso requerida, esta es realmente la mejor respuesta. Porque no habrá información innecesaria / confidencial en la compilación de producción.
Rafiek

<% %>generalmente indica un lenguaje .Net como c #
danwellman

2

He tratado de resolver esto de una manera un poco diferente, también considerando la facilidad de conveniencia y facilidad de mantenimiento.

He usado el script bash para cambiar la versión en toda la aplicación. El siguiente script le pedirá el número de versión deseado, y lo mismo se aplica en toda la aplicación.

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

He guardado este script en un archivo llamado version-manager.sh en la raíz del proyecto, y en mi archivo package.json, también creé un script para ejecutarlo cuando es necesario modificar la versión.

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

Finalmente, puedo cambiar la versión ejecutando

npm run change-version 

Este comando cambiará la versión en la plantilla index.html y también en el archivo package.json. Las siguientes fueron las pocas capturas de pantalla tomadas de mi aplicación existente.

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí


0

Puede leer package.json como cualquier otro archivo, con http.get así:

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);
    }
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.