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

¿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).

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
      ...

2. 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.

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

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.

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

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 :)

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

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>

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.

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.

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