Native Federation shell (Angular + multi-framework remotes)

Репозиторий подготовлен как стартовый шаблон Native Federation на Angular, который умеет:

• грузить Angular remote через @angular-architects/native-federation;
• встраивать React remote через Web Components;

Что внутри

• projects/shell — Angular shell (host).
• projects/angular-mfe — Angular remote (Native Federation remote).
• projects/react-mfe — полноценный React remote (Vite + TSX), который экспортирует custom element.

Архитектура

1. Shell инициализирует Native Federation через initFederation(...), после чего динамически вызывает loadRemoteModule для Angular remote.
2. Shell подгружает модуль React remote (/src/remote-entry.tsx) и рендерит <react-mfe-widget>.
3. Благодаря Web Components можно подключать любые UI-микрофронтенды независимо от фреймворка.

Локальный запуск

Запуская локально соблюдайте порядок: сначала shell, потом angular, остальное не играет роли.

npm install
npm run start:shell
npm run start:angular-mfe

Для React remote поднимите статические серверы в отдельных терминалах:

cd projects/react-mfe
npm install
cd ../
npm run start:react-mfe

После этого shell будет доступен на http://localhost:4205.

Как это работает в UI

1. Нажмите «Загрузить Angular remote» — shell подгрузит Angular remote по Native Federation.
2. Нажмите «Загрузить React remote» — shell загрузит http://localhost:4300/src/remote-entry.tsx и отрисует <react-mfe-widget>.

Как добавлять новые фреймворки

1. Соберите remote в формат ES module.
2. Экспортируйте custom element (например, <vue-mfe-widget>).
3. Подключите script в shell по аналогии с load-react-web-component.ts.
4. Используйте тег custom element в Angular шаблоне.

Таким образом shell остается Angular+Native Federation, а remotes можно писать на любом стеке.

Скрипт для деплоя

1. Переименуйте и заполните нужными данными deploy.example.sh

mv deploy.example.sh

2. Выдайте права на исполнение скрипта

chmod +x deploy.sh

3. Авторизируйтесь в aws cli sdk.
4. Запустите скрипт.

./deploy.sh

Пример задеплоеного приложения

ссылка на залитое приложение