Як відобразити версію програми у Angular?


146

Як відобразити версію програми у кутовій програмі? версія повинна бути взята з package.jsonфайлу

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

У куті 1.x у мене є цей html:

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

У кутовій формі це не відображається як номер версії, а просто друкується так, як є ( <%=version %>замість 0.0.1).


вам потрібен плагін для gulp або grunt, якщо у вас є система збірки. в даний час немає AFIK жодного механізму в Angular для цього
Angular University

Я використовую програму в додатку typescript, використовую npm startдля запуску компіляції та SystemJSвстановлення конфігурації. чи є спосіб встановити версію, використовуючи будь-яку з них?
Збинек

Відповіді:


255

Якщо ви хочете використовувати / показати номер версії у своєму кутовому додатку, будь ласка, зробіть наступне:

Передумови:

  • Кутова структура файлів і папок, створена за допомогою Angular CLI

  • TypeScript 2.9 або новішої версії! (Підтримується від кута 6.1 вище)

Кроки:

  1. У своєму /tsconfig.json(іноді також необхідному в /src/tsconfig.app.json) увімкніть параметр resolutionJsonModule (після цього потрібно перезапустити сервер розробників webpack):
    "compilerOptions": {
      ...
      "resolveJsonModule": true
      ...
  1. Потім у своєму компоненті, наприклад, /src/app/app.component.tsвикористовуйте інформацію про версію:
    import { version } from '../../package.json';
    ...
    export class AppComponent {
      public version: string = version;
    }

Можна також зробити крок 2 у вашому файлі Environment.ts, зробивши звідти інформацію про версію доступною.

Thx @ Ionaru та @MarcoRinck для надання допомоги.

Це рішення не буде містити вміст package.json, а лише номер версії.
Тестований w / Angular8 / Node10 / TypeScript3.4.3.

Оновіть ваші програми, щоб використовувати це рішення, залежно від вмісту пакета.json, оригінальне рішення може спричинити проблеми із безпекою.


18
це працює з кутовим складанням 5 і aot, якщо хтось цікавився
Nikola.Lukovic

5
Важлива примітка: перезавантажте ваш сервер (чи не запускайте сервіс, або npm запускається заново), щоб це вступило в силу!
користувач1884155

2
@MarcoRinck: Thx для вказівки на це. Я міг би відтворити це питання. Не знаю, чи це було пов’язано з редагуванням відповіді в минулому, але щоб переконатися, що більше ніхто не використовує старе рішення, я відредагував відповідь і видалив проблемний вимагаю () дзвінок у ній.
radomeit

3
кутовий 8 підтверджено
vuhung3990

2
Кутовий 9 підтверджено
Майк де Клерк

56

Якщо ви використовуєте webpack або angular-cli (хто використовує webpack), ви можете просто вимагати package.json у своєму компоненті та відображати цю опору.

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

І тоді у вас є ваш компонент

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

  constructor() {
    this.appVersion = appVersion
  }
}

8
Варто зазначити, що якщо хтось зіткнувся з помилкою "Неможливо знайти ім'я вимагати" після застосування вашого рішення, тоді потрібно додати властивість типу "вузол" всередині "типів" у файл tsconfig.app.ts. << "типи": ["вузол"] >>. Випробуваний у Angular v4
Томаш Чеховський

@baio - цей фрагмент коду працює в моїх виробничих програмах вже близько року (працює AOT у виробництві). Чи можу я допомогти вам якось налагодити свою проблему?
DyslexicDcuk

5
Незважаючи на те, що на цій посаді є деякий час, я мушу зазначити, що це потенційно може викрити деяку інформацію про побудову та розробку, яка створюється у виробництві, і це може бути шкідливим для виробничого середовища.
ZetaPR

@ZetaPR точно не рекомендується!
Джиммі Кейн

7
@DyslexicDcuk бібліотеки з номерами версій - це конфіденційні дані з точки зору безпеки.
Рафієк

25

За допомогою параметра tsconfig --resolveJsonModuleможна імпортувати файли json у Typescript.

У файлі environment.ts:

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

export const environment = {
    VERSION: version,
};

Тепер ви можете використовувати environment.VERSIONу своїй програмі.


1
@lonaru Чи є якісь наслідки для безпеки при імпорті файлу package.json. Мені цікаво, чи це якимось чином викриває вміст package.json?
tif

1
@tif Не повинно бути жодних наслідків для безпеки, оскільки package.json не імпортується повністю. Версія - це єдине, що закінчується у виробництві.
Іонару

19

Спробу відповіді DyslexicDcuk призвів до cannot find name require

Потім, прочитавши розділ "Необов’язкове завантаження модуля та інші розширені сценарії завантаження" на веб-сторінці https://www.typescriptlang.org/docs/handbook/modules.html допомогло мені вирішити це. (Згадував Гері тут https://stackoverflow.com/a/41767479/7047595 )

Використовуйте нижченаведену декларацію, щоб вимагати package.json.

declare function require(moduleName: string): any;

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

8

Рішення спрощеного списку для користувачів кутових кліпів.

Додати declare module '*.json';вsrc/typings.d.ts

А далі src/environments/environment.ts:

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

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

Готово :)


1
Вам може знадобитися додати "allowSyntheticDefaultImports": trueдо свого tsconfig.json залежно від вашої версії Angular.
bjornalm

6

Це гарна ідея оголосити versionзмінною середовища, щоб ви могли використовувати її скрізь у своєму проекті. (особливо у випадку завантаження файлів, кешованих на основі версії e.g. yourCustomjsonFile.json?version=1.0.0)
Для запобігання проблем із безпекою (як згадується @ZetaPR) ми можемо використовувати такий підхід (за коментарем @sgwatgit)
Коротше: ми створюємо yourProjectPath \ PreBuild.js файл. Подобається це:

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

Вище фрагмент створить новий файл, /src/environments/version.tsякий містить константу з ім'ям versionі встановить його за вилученим значенням з package.jsonфайлу.

Для того, щоб запустити вміст у PreBuild.jsonзбірці, ми додаємо цей файл у Package.json-> "scripts": { ... }"розділ, як описано нижче. Тож ми можемо запустити проект за допомогою цього коду npm start::

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

Тепер ми можемо просто імпортувати версію та використовувати її куди завгодно:

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

5

Машинопис

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

Я не думаю, що "Процентний кутовий кронштейн" не має нічого спільного з кутовим1. Це, швидше за все, інтерфейс до іншого API, який ви не знаєте, використовується в попередньому проекті.

Ваше найпростіше рішення: просто перелічіть номер версії вручну у своєму HTML-файлі або збережіть його у глобальній змінній, якщо ви використовуєте її в декількох місцях:

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

Ваші складніші рішення: запустіть крок автоматизації збірки, який витягує номер версії з файлу package.json, а потім переписує файл index.html (або js / ts файл), щоб включити значення:

  • Можна просто імпортувати або вимагати файл package.json, якщо ви працюєте в середовищі, яке його підтримує:

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

  • Це також можна зробити в скрипті bash, який читає package.json, а потім редагує інший файл.

  • Ви можете додати сценарій NPM або змінити свій початковий сценарій, щоб використовувати додаткові модулі для читання та запису файлів.
  • Ви можете додати грунт або глотком до свого конвеєра, а потім скористатися додатковими модулями для читання або запису файлів.

Без підказок використовувати, це насправді найкраща відповідь. Тому що у складі виробництва не буде зайвої / чутливої ​​інформації.
Rafiek

<% %>зазвичай вказує на .Net мову, як c #
danwellman

2

Я намагався вирішити це дещо по-іншому, також враховуючи простоту зручності та ремонту.

Я використовував скрипт bash, щоб змінити версію для всієї програми. Наступний сценарій запитає вас про потрібний номер версії, і той самий застосовується у всій програмі.

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

Я зберег цей скрипт у файлі з назвою version-manager.sh у корені проекту, а у своєму файлі package.json я також створив сценарій, щоб запустити його, коли потрібно змінити версію.

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

Нарешті, я можу просто змінити версію, виконавши

npm run change-version 

Ця команда змінить версію в шаблоні index.html, а також у файлі package.json. Далі було кілька скріншотів, знятих із мого наявного додатка.

введіть тут опис зображення

введіть тут опис зображення

введіть тут опис зображення

введіть тут опис зображення


0

Ви можете прочитати package.json так само, як і будь-який інший файл, з http.get так:

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);
    }
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.