Как собрать/развернуть часть вашего приложения Angular

RedDeveloper
20.03.2023 08:46
Как собрать/развернуть часть вашего приложения Angular

Вам когда-нибудь требовалось собрать/развернуть только часть вашего приложения Angular или, возможно, скрыть некоторые маршруты в определенных средах?

Эта статья поможет вам уменьшить размер пакета/время сборки, поставляя только то, что необходимо.

Некоторые из концепций, которые мы рассмотрим, следующие:

  • Маршруты ленивой загрузки (с использованием отдельных компонентов)
  • Опции конфигурации CLI - замена файлов
  • Новые возможности Angular, такие как: bootstrapApplication, provideRouter(), RouterOutlet, RouterLinkWithHref

Начало работы

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

Мы создадим 2 компонента, которые также будут представлять 2 маршрута приложения. Мы назовем наши компоненты и маршруты First & Second.

Затем, мы перейдем к нашему AppComponent, чтобы разместить наши маршруты и, кстати, мы превратим его в отдельный компонент. Это означает, что нам нужно будет импортировать необходимые нам директивы, такие как RouterOutlet.

AppComponent как самостоятельный
AppComponent как самостоятельный
Шаблон AppComponent
Шаблон AppComponent

Поскольку AppComponent является автономным, наш main.ts будет немного отличаться от стандартного. Обратите внимание, что здесь мы загружаем наши маршруты с помощью метода provideRouter().

main.ts
main.ts

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

ng build

И вот что получается:

ng build output
ng build output

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

Сборка части приложения

Итак, давайте перейдем к нашему сценарию, который гласит, что у нас есть разные инсталляции, и одна из наших сред использует только первый маршрут.

Наш подход будет заключаться в предоставлении различных конфигураций сборки для каждого случая путем добавления некоторых дополнительных опций в наш angular.json.

Давайте начнем с добавления двух альтернативных файлов маршрутов. routes.first.ts и routes.second.ts в той же папке, что и routes.ts . В routes.first.ts будет содержаться только первый маршрут, а у второго будет свой собственный маршрут. Это означает, что все будет выглядеть следующим образом:

альтернативный файл route.ts
альтернативный файл route.ts

Теперь нам нужно как-то сообщить Angular, что мы хотим получить результат сборки, который будет содержать только этот маршрут.

Это произойдет внутри файла angular.json:

angular.json
angular.json

Мы ввели две новые конфигурации, первая & вторая, и каждая конфигурация использует опцию fileReplacements для того, чтобы менять местами файл маршрутов при каждом выборе конфигурации.

Теперь нам остается только запустить:

ng build --configurations:first

Вывод сборки содержит только выбранный маршрут/чанк, который в нашем случае является первым:

Вывод сборки содержит только выбранный маршрут/чанк который в нашем случае является

Частичный ng serve также

Добавив еще пару строк в наш angular.json, мы можем использовать эту конфигурацию при обслуживании:

angular.json
angular.json

Команда serve будет:

ng serve --configuration=first

Динамическое меню маршрутов

Последнее, что мы можем сделать, это сгенерировать наше меню в соответствии с выбранной конфигурацией.

Быстрое решение для этого может быть следующим:

Быстрое решение для этого может быть следующим

Мы импортируем все необходимые директивы отдельно, без необходимости использования всего модуля Common. Это также поможет нам уменьшить конечный размер пакета. Затем мы импортируем файл routes (который будет заменен на нужный) и сопоставляем с путем маршрута.

Наконец, мы выполняем итерации по маршрутам в нашем шаблоне:

Наконец мы выполняем итерации по маршрутам в нашем шаблоне

Заключение

Вы можете найти репо с вышеуказанным случаем здесь.

Будьте здоровы!

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.