Como exibir a versão do aplicativo em Angular?

Como faço para exibir a versão do aplicativo no aplicativo angular? a versão deve ser retirada do package.jsonarquivo

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

No angular 1.x, tenho este html:

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

Em angular, isso não é renderizado como número da versão, mas apenas impresso como é (em <%=version %>vez de 0.0.1).

Se você deseja usar / mostrar o número da versão no seu aplicativo angular, faça o seguinte:

Pré-requisitos:

• Estrutura angular de arquivo e pasta criada via Angular CLI

• TypeScript 2.9 ou posterior! (Suportado do Angular 6.1 para cima)

Passos:

1. Na sua /tsconfig.json(às vezes também necessária /src/tsconfig.app.json), ative a opção resolveJsonModule (reinicialização do servidor de webpack dev necessária posteriormente):

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

2. Em seu componente, por exemplo, /src/app/app.component.tsuse as informações da versão:

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

Também é possível executar a etapa 2 no arquivo environment.ts, tornando as informações da versão acessíveis a partir daí.

Thx @Ionaru e @MarcoRinck por ajudarem.

Esta solução não incluirá o conteúdo do package.json, apenas o número da versão.
Testado com Angular8 / Nó10 / TypeScript3.4.3.

Atualize seus aplicativos para usar esta causa da solução, dependendo do conteúdo do seu package.json, a solução original pode implicar problemas de segurança.

Se você estiver usando o webpack ou angular-cli (que usa o webpack), basta solicitar o package.json no seu componente e exibir esse suporte.

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

E então você tem seu componente

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

  constructor() {
    this.appVersion = appVersion
  }
}

Usando a opção tsconfig, --resolveJsonModulevocê pode importar arquivos json no Typescript.

No arquivo environment.ts:

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

export const environment = {
    VERSION: version,
};

Agora você pode usar environment.VERSIONno seu aplicativo.

Tentar a resposta de DyslexicDcuk resultou em cannot find name require

Em seguida, a seção 'Carregamento opcional do módulo e outros cenários de carregamento avançado' em https://www.typescriptlang.org/docs/handbook/modules.html me ajudou a resolver isso. (Mencionado por Gary aqui https://stackoverflow.com/a/41767479/7047595 )

Use a declaração abaixo para exigir o package.json.

declare function require(moduleName: string): any;

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

Solução simplista para usuários de CLI angulares.

Adicionar declare module '*.json';emsrc/typings.d.ts

E depois src/environments/environment.ts:

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

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

Feito :)

É uma boa ideia declarar versioncomo variável de ambiente Para que você possa usá-lo em qualquer lugar do seu projeto. (especialmente no caso de carregar arquivos para serem armazenados em cache com base na versão e.g. yourCustomjsonFile.json?version=1.0.0)
Para evitar problemas de segurança (como o @ZetaPR mencionado) , podemos usar esta abordagem (no comentário de @sgwatgit)
Resumindo: criamos um yourProjectPath \ PreBuild.js Arquivo. Como isso:

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

O snippet acima criará um novo arquivo /src/environments/version.tsque contém uma constante nomeada versione a definirá pelo valor extraído do package.jsonarquivo.

Para executar o conteúdo do PreBuild.jsonbuild, adicionamos este arquivo na seção Package.json-> "scripts": { ... }"como a seguir. Então, podemos executar o projeto usando este código npm start:

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

Agora podemos simplesmente importar a versão e usá-la onde quisermos:

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

Texto datilografado

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>

Eu não acho que "Porcentagem de suporte de ângulo" tenha algo a ver com angular1. Provavelmente, uma interface para outra API que você não percebe está sendo usada em seu projeto anterior.

Sua solução mais fácil: basta listar o número da versão manualmente em seu arquivo HTML ou armazená-lo em uma variável global se você o estiver usando em vários locais:

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

Sua solução mais difícil: execute uma etapa de automação de construção que extrai o número da versão do arquivo package.json e, em seguida, reescreve o arquivo index.html (ou arquivo js / ts) para incluir o valor:

• Poderia simplesmente importar ou exigir o arquivo package.json, se você estiver trabalhando em um ambiente que o suporte:

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

• Isso também pode ser feito em um script bash que lê o package.json e edita outro arquivo.

• Você pode adicionar um script NPM ou modificar seu script inicial para usar módulos adicionais para ler e gravar arquivos.
• Você pode adicionar grunhido ou gole ao seu pipeline e depois usar módulos adicionais para ler ou gravar arquivos.

Tentei resolver isso de uma maneira um pouco diferente, considerando também a facilidade de conveniência e manutenção.

Eu usei o script bash para alterar a versão em todo o aplicativo. O script a seguir solicitará o número da versão desejada e o mesmo será aplicado em todo o aplicativo.

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

Salvei esse script em um arquivo chamado version-manager.sh na raiz do projeto e, no meu arquivo package.json, também criei um script para executá-lo quando for necessário modificar a versão.

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

Finalmente, eu posso mudar a versão executando

npm run change-version 

Este comando alterará a versão no modelo index.html e também no arquivo package.json. A seguir, foram apresentadas algumas capturas de tela do meu aplicativo existente.

Você pode ler o package.json como qualquer outro arquivo, com o http.get assim:

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