version - уроки - Как отобразить версию приложения в Angular?




angular версии (7)

Вы можете прочитать 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);
    }
}

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

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

В угловой 1.x у меня есть этот HTML:

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

В angular это не отображается как номер версии, а просто печатается как есть ( <%=version %> вместо 0.0.1 ).


Если вы используете 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 Component {
  public appVersion

  constructor() {
    this.appVersion = appVersion
  }
}

Используя опцию --resolveJsonModule вы можете импортировать файлы json в Typescript.

В файле environment.ts:

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

export const environment = {
    VERSION: version,
};

Теперь вы можете использовать environment.VERSION в вашем приложении.


Попытка ответа DyslexicDcuk привела к cannot find name require

Затем чтение раздела «Загрузка дополнительных модулей и другие дополнительные сценарии загрузки» в https://www.typescriptlang.org/docs/handbook/modules.html помогло мне решить эту проблему. (Упоминается Гари здесь https://.com/a/41767479/7047595 )

Используйте приведенную ниже декларацию, чтобы требовать package.json.

declare function require(moduleName: string): any;

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

Я не думаю, что «Angle Bracket Percent» имеет какое-либо отношение к angular1. Вероятно, интерфейс к другому 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 или изменить скрипт запуска, чтобы использовать дополнительные modules для чтения и записи файлов.
  • Вы можете добавить grunt или gulp к вашему конвейеру, а затем использовать дополнительные модули для чтения или записи файлов.

Я попытался решить эту проблему немного по-другому, учитывая легкость и удобство обслуживания.

Я использовал скрипт 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. Ниже приведены несколько скриншотов из моего существующего приложения.


Упрощенное решение для пользователей angular.

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

А затем в src/environments/environment.ts :

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

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

Готово :)





package.json