version - from - crear proyecto angular 6

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

Question

¿Cómo visualizo la versión de la aplicación en la aplicación angular? la versión debe tomarse del archivo package.json

{
  "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á ( <%=version %> lugar de 0.0.1 ).

Answer 1

Es una buena idea declarar la version como variable de entorno Para que pueda usarla en cualquier parte de su proyecto. (especialmente en el caso de cargar archivos para almacenar en caché según la versión, eg yourCustomjsonFile.json?version=1.0.0 )
Para evitar problemas de seguridad (como mencionó @ZetaPR) podemos usar this enfoque (en el comentario de @sgwatgit)
En resumen: creamos un archivo yourProjectPath / PreBuild.js . 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.ts que contiene una version nombre constante y lo establecerá por valor extraído del archivo package.json .

Para ejecutar el contenido de PreBuild.json en la compilación, agregamos este archivo en Package.json -> "scripts": { ... }" sección "scripts": { ... }" como se npm start continuación. Así 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;
}

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

Answer 3

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

  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 utilizar modules adicionales para leer y escribir archivos.
• Puede agregar grunt o gulp a su tubería y luego utilizar módulos adicionales para leer o escribir archivos.

Answer 4

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://.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'');

Answer 5

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

Answer 6

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.app.json habilite la opción resolveJsonModule (se requiere reiniciar el servidor después):

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

2. Luego, en su componente, por ejemplo /src/app/app.component.ts use 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, ya que dependiendo del contenido de su paquete. Json, la solución original puede implicar problemas de seguridad.

Answer 7

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 Component {
  public appVersion

  constructor() {
    this.appVersion = appVersion
  }
}

Answer 8

Usando la opción --resolveJsonModule puede importar archivos json en Typecript.

En el archivo environment.ts:

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

export const environment = {
    VERSION: version,
};

Ahora puede usar environment.VERSION en su aplicación.

Answer 9

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>

Answer 10

Solución simplista para usuarios de cli angular.

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

Y luego en src/environments/environment.ts :

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

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

Hecho :)