Инструкция по деплою 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.03
1
2
3
4
5

Голосов: 503

Лучшая практика проектирования больших 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

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

Появление нового функционала в Angular 16 и Angular 17

Angular предоставляет новые возможности для замены директив ngFor и ngIf. Все, что вам нужно сделать, это заиспользовать @for и @if, как вы используете директивы ngFor и ngIf, но с немного другим синтаксисом.

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

Формы. Шаблонный подход.

Работа с формами. Шаблонный подход (Template-driven)

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

Angular Signals

Версия Angular 16 была выпущена в начале мая, и эта версия полна новых функций. Но одной из особенностей, о которой все говорят, является новая возможность - Сигналы. Это настоящий поворотный момент, который находится в стадии предварительного просмотра разработчиками и будет выпущен позже в этом году, в версии 17.

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