Angular Academy · Урок

Совместное использование зависимостей

Используйте Angular и библиотеки в удалённых приложениях

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

Зачем делиться зависимостями

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

Раздел shared

В federation.config.js объект shared объявляет зависимости, общие для хоста и удалённых модулей. Native Federation устраняет их дублирование во время выполнения.

module.exports = withNativeFederation({
  shared: {
    ...shareAll({ singleton: true, strictVersion: true }),
  },
});

Вспомогательная функция shareAll

shareAll() делится всеми зависимостями из вашего package.json с помощью одной настройки — это распространённая отправная точка. Затем вы можете переопределить параметры отдельных пакетов.

shared: {
  ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}

singleton: зачем это нужно Angular

singleton: true принудительно оставляет ровно один экземпляр пакета во всём приложении. Ядро Angular, RxJS и маршрутизатор MUST быть одиночными экземплярами; две копии @angular/core означают два дерева инжекторов и ошибки во время выполнения.

Согласование версий

Если удалённые модули запрашивают разные версии, федерация выбирает совместимую. Параметр strictVersion: true выдаёт ошибку при несовместимости вместо незаметной загрузки неподходящей версии, помогая обнаружить проблемы на раннем этапе.

shared: {
  '@angular/core': { singleton: true, strictVersion: true, requiredVersion: '^18.0.0' },
}

Совместное использование собственных библиотек

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

shared: {
  '@myorg/design-system': { singleton: true, requiredVersion: 'auto' },
  '@myorg/auth': { singleton: true },
}

requiredVersion: auto

requiredVersion: 'auto' считывает версию из вашего package.json, поэтому вам не нужно указывать её вручную. Так конфигурация остаётся синхронизированной с обновлениями зависимостей.

Что происходит во время выполнения

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

Цена отказа от общего использования

Забыть предоставить Angular для общего использования — классическая ошибка: приложение сначала выглядит работоспособным, а затем выдаёт непонятные ошибки вроде "NG0203: inject() must be called from an injection context", поскольку существуют две копии Angular. Совместное использование в режиме одиночного экземпляра предотвращает эту проблему.

Согласование версий

Независимые развёртывания могут привести к расхождению версий. Командам следует согласовать общий диапазон версий пакетов фреймворка и обновлять их скоординированно, поскольку хост на Angular 18 не может безопасно использовать общий пакет с удалённым модулем, которому нужен Angular 17.

Исключение общего пакета

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

shared: {
  ...shareAll({ singleton: true }),
}
// skip a package by removing it from the shared map / excluding it

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

Какие пакеты должны быть одиночными экземплярами?

Итоги

Объявляйте зависимости в shared (часто с помощью shareAll), чтобы хост и удалённые модули загружали одну копию. Для фреймворка и библиотек с состоянием (@angular/core, маршрутизатор, RxJS, ваша библиотека аутентификации) устанавливайте singleton: true; используйте strictVersion и requiredVersion: 'auto', чтобы обнаруживать расхождение версий. Если забыть предоставить Angular для общего использования, возникнут ошибки DI.

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

Урок «Совместное использование зависимостей» бесплатный?

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

Чему я научусь в уроке «Совместное использование зависимостей»?

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

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

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

Сколько времени занимает урок «Совместное использование зависимостей»?

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

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

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

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

← Назад к Angular Academy