Добавление версий сборки в угловом угловом

Вы когда-нибудь оказались, какая версия SPA работает, когда вы поднимаете свой сайт? Это была проблема, которую я хотел ответить в моем угловом курорте. Использование Версия NPM Команда в моем стробовом трубопроводе, я смог включить номер моего конвейера сборки в моем приложении, значительно снижал время устранения неполадок и путаницу версии.

Некоторые соображения

Имейте в виду, ваши номера версий сборки должны будут соответствовать Нормализованный Semver2 быть действительным для NPM.

инструкции

Шаг 1 — Добавление типов узлов в угловой

В вашем tsconfig.app.json Файл, добавить Узел к Типы множество. Если нет уже Типы Массив, добавьте его под Компиляторы в корне JSON.

{
  "compilerOptions": {
    "types": ["node"]
  }
}

Шаг 2 — Добавление переменных среды

Найдите свой окружающая среда Константа в SRC/среда . Вы должны увидеть два файла, один для prod, окружающая среда и один для не-прод, окружающая среда Отказ В производстве я держу это просто и добавить appversion переменная без каких-либо изменений.

export const environment = {
  appVersion: require('../../package.json').version,
  production: true,
  base: 'area',
};

Однако в непроизводственной среде я люблю добавлять метку Dev.

appVersion: require('../../package.json').version + '--dev';

Это помогает мне помнить, если я в неработающей среде, потому что нет ничего хуже, чем устранение неисправностей проблемы в неправильной среде.

Шаг 3 — Добавление версии на угловой компонент

Точно так же это проще, чем звучит. Теперь, когда доступны типы узлов и переменная версии, их просто нужно получить доступ и отображаться где-то в приложении. Я предпочитаю добавить это на загрузочный компонент, который обычно AppComponent Отказ Этот лучший способ, которым я нашел, это с привязкой хоста.

Примечание : Вам не нужно указывать прод против не-прод в вашей среде импортируют. При угловых сборках он будет использовать производственную среду, если --Прод Флаг сборки используется.

import { Component, HostBinding } from '@angular/core';
import { environment } from 'src/environments/environment';

@Component({
  ...
})
export class AppComponent {
  @HostBinding('attr.app-version') appVersionAttr = environment.appVersion;
}

Шаг 5 — Добавление версии NPM на ваш трубопровод

Если ваш стек трубопровода предлагает автоматически создавать номера версий, просто убедитесь, что они соответствуют Нормализованный Semver2 Отказ После того, как вы добавите задачу в свой трубопровод, чтобы запустить команду NPM

npm version $(build.buildNumber)

Переменная сборки выше для Azure DevOps конкретно. Ваш пакет трубопровода может отличаться.

Последние мысли

Теперь, когда вы добавили номер версии, построить, построить, строить и проверить проверку вашей работы. Вы должны увидеть атрибут HTML на каком-то элементе HTML, который вы добавили привязку хоста. Для меня это выглядит так:

Первоначально опубликовано в https://patrickmoore.dev/angular-build-versioning.

Оригинал: «https://dev.to/binarypatrick/build-versions-for-angular-build-pipeline-5ef7»