Инструкция по деплою Angular приложения на Github Pages

В данной инструкции мы разберём, как можно задеплоить Angular приложение на Github Pages на примере нового приложения.

Деплой Angular приложения, шаг за шагом

1. Установка Angular CLI, если его у вас ещё нет:

  
npm install @angular/cli --g

2. Создание нового приложения:

 
ng new test-app

3. Создание нового репозитория на Github и добавление кода в репозиторий.

4. Установка библиотеки angular-gh-pages:

  
npm install angular-cli-ghpages --g

5. Сбор билда с указанием url:

 
ng build --prod --base-href "https://{имя_пользователя_github}.github.io/{имя_репозитория}/"

6. Деплой для приложений Angular 6+:

 
ngh --dir dist/test-app

6.1. Деплой для приложений ниже версии Angular 6:

ngh

Теперь Ваше приложение доступно по url: https://{имя_пользователя_github}.github.io/{имя_репозитория}/

3.07
1
2
3
4
5

Голосов: 441

Лучшая практика проектирования больших Angular-приложений Интеграция Keycloak - Angular: Практическое руководство по подключению приложения к системе управления идентификацией и доступом (IAM) Расширенные операторы RxJs, которые вы знаете, но недостаточно хорошо Angular Signals — использование функции untracked() для предотвращения отслеживания зависимостей Установка Playwright в сочетании с TypeScript для приложений Angular Angular Routing в Angular 17 Обнаружение локальных изменений в Angular 17 Появление нового функционала в Angular 16 и Angular 17 15 Angular директив на каждый день Улучшение читаемости кода в проектах Angular: мастерство работы с Enum и лучшие практики Изменяют ли автономные компоненты способ написания кода в Angular? Angular Signals От хорошего к великому: параметры входных данных, inputs в Angular Angular Interceptor - перехватчик ошибок http 10 лучших UI библиотек для Angular Инструкция по деплою Angular приложения на Github Pages Что ждет нас в Angular 15? Angular Swiper Image Touch Slider Angular Interceptors - рабочий пример Динамическое добавление элемента script в Angular Создание custom form field control (ControlValueAccessor) Angular тестирование component с помощью Jest Route Resolving Шпаргалка по Angular Директивы ng-template, ngTemplateOutlet и ng-container Маршрутизация Angular подробное руководство Angular & Rxjs: Отписываться или не отписываться? Кастомные элементы форм в Angular Формы. Реактивный подход. Формы. Шаблонный подход. Формы в Angular Subject Observable. Subscribe и Unsubscribe Route. Обновление шаблона Route Resolving Route передача статичных данных Route. Контроль навигации с помощью сервиса Route. Защита роутера Route. Вынос настроек роутера Route. Переключения и параметры JavaScript операторы Сервисы Структурные директивы Binding свойств директив HostListener и HostBinding Директива атрибута Навигация. Передача данных событиями События и жизненный цикл ng-content Инкапсуляция стилей и ссылки Связывание свойств и событий Компонент и модель Директива ngFor Angular CSS и Style Динамические шаблоны в Angular События Компонент и данные Шаблон и стили компонента Создание компонентов в Angular TypeScript, Bootstrap, Main.ts Установка и первый запуск Angular Руководство по Angular

Возможно, вам будет интересно

Создание custom form field control (ControlValueAccessor)

ControlValueAccessor - связующее звено между Angular forms API и нативным DOM элементом. Чтобы Angular знал об новом field control необходимо зарегистрировать NG_VALUE_ACCESSOR провайдер.

Читать подробнее

Изменяют ли автономные компоненты способ написания кода в Angular?

С постепенным ростом приложения, бойлерплейт-код, введенный Angular, становится громоздким и трудным для поддержки. Команда Angular стремится сделать архитектуру приложения легче, поэтому одной из новых возможностей, которую они представили, являются автономные компоненты.

Читать подробнее