Angular Academy · Урок

Загрузка удалённых модулей

Динамически загружайте удалённые микрофронтенды

«Загрузка удалённых модулей» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Подключение удалённого модуля во время выполнения

После того как удалённый модуль предоставил модуль, а хост узнал его URL, хост загружает его по требованию с помощью loadRemoteModule. Это динамический импорт по HTTP: удалённый модуль никак не включается в сборку хоста.

API loadRemoteModule

loadRemoteModule принимает имя удалённого модуля (из манифеста) и ключ предоставленного элемента (из exposes удалённого модуля). Он возвращает обещание с этим модулем.

import { loadRemoteModule } from '@angular-architects/native-federation';

const m = await loadRemoteModule('catalog', './Routes');

Ленивая загрузка маршрутов удалённого модуля

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

export const routes: Routes = [
  {
    path: 'catalog',
    loadChildren: () =>
      loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
  },
];

Загрузка отдельного компонента

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

{
  path: 'widget',
  loadComponent: () =>
    loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}

Предоставление на стороне удалённого модуля

Чтобы хост мог загрузить элемент, удалённый модуль должен указать экспорт в своей карте exposes. Этот ключ хост передаёт в loadRemoteModule.

// remote federation.config.js
exposes: {
  './Routes': './src/app/catalog.routes.ts',
  './Widget': './src/app/widget.component.ts',
}

Динамическое определение по манифесту

Поскольку хост считывает манифест при запуске, можно менять URL удалённых модулей для разных окружений (разработка, тестовый стенд, рабочая среда), не пересобирая хост, — достаточно предоставить другой файл манифеста.

Обработка сбоев загрузки

Удалённые модули загружаются по сети и могут быть недоступны (например, из-за отсутствия подключения или выполняющегося развёртывания). Оборачивайте загрузку в обработку ошибок, чтобы один неисправный удалённый модуль не обрушил всю оболочку.

loadRemoteModule('catalog', './Routes')
  .then(m => m.CATALOG_ROUTES)
  .catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));

Передача данных через границу

Связь между хостом и удалённым модулем осуществляется через общие сервисы-одиночки или маршрутизатор, а не через прямые импорты. Общий сервис аутентификации (одиночный экземпляр) позволяет удалённому модулю прочитать текущего пользователя, заданного хостом.

Версионирование и контракты

Предоставленный ключ (например, ./Routes) и его структура образуют контракт. Изменение структуры экспорта может нарушить работу хостов, которые его загружают, поэтому относитесь к предоставленным модулям как к общедоступному API и тщательно версионируйте их.

Стратегии предварительной загрузки

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

Сквозной процесс

Подведём итог пути выполнения: хост читает манифест, пользователь переходит по федеративному маршруту, loadRemoteModule загружает remoteEntry.json удалённого модуля, общие одиночные экземпляры используются повторно, а маршруты и компоненты удалённого модуля отображаются внутри оболочки хоста.

Быстрая проверка

Как хост лениво загружает удалённую функциональность?

Итоги

Хосты загружают удалённые модули во время выполнения с помощью loadRemoteModule(name, key), обычно внутри loadChildren/loadComponent для ленивых маршрутов. Удалённые модули должны предоставлять ключ через expose; манифест определяет URL для каждой среды. Корректно обрабатывайте ошибки загрузки, обеспечивайте взаимодействие через общие одиночные экземпляры и рассматривайте предоставляемые модули как контракты с версиями.

Часто задаваемые вопросы

Урок «Загрузка удалённых модулей» бесплатный?

Да — полный текст урока «Загрузка удалённых модулей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Загрузка удалённых модулей»?

Динамически загружайте удалённые микрофронтенды Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Загрузка удалённых модулей»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy