Angular Academy · Урок

Native Federation для Angular

Настраивайте федерацию модулей в Angular

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

Зачем нужна Native Federation

Классическая федерация модулей была связана с webpack. Система сборки Angular перешла на esbuild, поэтому сообщество создало Native Federation — реализацию той же идеи, не зависящую от инструмента сборки и основанную на веб-стандартах (картах импорта и модулях ES).

Пакет

Native Federation для Angular находится в пакете @angular-architects/native-federation. Добавьте его с помощью схемы Angular CLI: она настроит конфигурацию и процесс сборки.

ng add @angular-architects/native-federation

Инициализация хоста

Запустите схему для приложения-оболочки и выберите dynamic-host. Она создаст federation.config.js и обновит начальную загрузку, чтобы федерация инициализировалась до запуска Angular.

ng g @angular-architects/native-federation:init --project shell --type dynamic-host

Инициализация удалённого модуля

Для приложения функциональной области выполните ту же инициализацию с параметром remote. Будет создана конфигурация, открывающая части удалённого модуля для хостов.

ng g @angular-architects/native-federation:init --project catalog --type remote --port 4201

Файл federation.config.js

Эта конфигурация — основа федерации: она задаёт имя удалённого модуля, перечисляет предоставляемые им элементы в exposes и объявляет общие зависимости в shared.

// catalog/federation.config.js
module.exports = withNativeFederation({
  name: 'catalog',
  exposes: { './Routes': './src/app/catalog.routes.ts' },
  shared: { ...shareAll({ singleton: true }) },
});

Изменения начальной загрузки

Native Federation требует инициализации до начальной загрузки, чтобы карты импорта были готовы. Схема разделяет main.ts на шаг инициализации, который загружает bootstrap.ts.

// main.ts
import { initFederation } from '@angular-architects/native-federation';
initFederation()
  .then(() => import('./bootstrap'))
  .catch(err => console.error(err));

Перечисление удалённых модулей в хосте

Хост хранит манифест, сопоставляющий имена удалённых модулей с их URL в remoteEntry.json, поэтому знает, откуда получать каждый удалённый модуль во время выполнения.

// federation.manifest.json
{
  "catalog": "http://localhost:4201/remoteEntry.json"
}

Загрузка манифеста

Передайте путь к манифесту в initFederation. Хост считывает его один раз при запуске, после чего может загружать любой указанный удалённый модуль по требованию.

initFederation('/assets/federation.manifest.json')
  .then(() => import('./bootstrap'));

На основе стандартов, без привязки к webpack

Поскольку Native Federation использует нативные модули ES и карты импорта, он работает с esbuild, Vite и другими сборщиками. Именно такая независимость стала причиной того, что этот подход рекомендуют для современного Angular.

Сервер разработки для каждого удалённого модуля

Во время разработки каждый удалённый модуль работает на собственном порту (ng serve --port 4201). Хост обращается к этим URL через манифест, поэтому всю композицию можно запускать локально.

Что даёт Native Federation

Кратко: независимые сборки, общие одиночные экземпляры (один экземпляр Angular), динамическая загрузка удалённых модулей и отсутствие привязки к конкретному сборщику. В следующих уроках подробно рассматриваются совместное использование зависимостей и загрузка удалённых модулей.

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

Почему в Angular следует выбрать Native Federation, а не классическую федерацию модулей?

Итоги

Native Federation (@angular-architects/native-federation) переносит федерацию модулей в Angular на основе esbuild, используя карты импорта. Инициализируйте хосты и удалённые модули с помощью схемы, настройте exposes и shared в federation.config.js, вызовите initFederation до начальной загрузки и перечислите удалённые модули в манифесте.

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

Урок «Native Federation для Angular» бесплатный?

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

Чему я научусь в уроке «Native Federation для Angular»?

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

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

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

Сколько времени занимает урок «Native Federation для Angular»?

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

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

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

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

← Назад к Angular Academy