Что такое MicroFrontends?

MicroFrontends — это архитектурный стиль для создания веб-приложений путем их разбиения на более мелкие, независимые и слабо связанные модули. Каждый модуль, или MicroFrontend, разрабатывается и развертывается независимо, со своим собственным набором зависимостей, технологий и команд.

Реализация MicroFrontend в Angular 15 предполагает разбиение приложения на более мелкие части, которые можно разрабатывать и развертывать независимо. Каждый MicroFrontend должен иметь собственное приложение Angular со своим набором компонентов, сервисов и модулей.

Ключевые шаги по внедрению MicroFrontend в Angular 15:

1. Разбейте приложение на более мелкие независимые части в зависимости от предметной области или функциональности.
2. Создайте приложение Angular для каждого MicroFrontend с собственным набором компонентов, сервисов и модулей.
3. Определите контракт API для связи между MicroFrontends. Это могут быть RESTful API, WebSockets или пользовательские события.
4. Используйте подключаемый модуль объединения модулей для динамической загрузки MicroFrontends в основное приложение во время выполнения. Объединение модулей — это функция Webpack, которая позволяет нескольким приложениям совместно использовать код во время выполнения.
5. Реализуйте общий модуль, содержащий общий код и компоненты, которые могут использоваться несколькими MicroFrontend.
6. Используйте централизованную систему управления состоянием, например Redux или NgRx, для управления состоянием приложений в MicroFrontends.
7. Внедрите единую систему дизайна пользовательского интерфейса в MicroFrontends, чтобы обеспечить единый пользовательский интерфейс.

MicroFrontends в Angular с использованием федерации модулей

Конфигурация хост-приложения

1. Создание хост-приложения

ng new angular-mfe-example --create-application="false"

2. Создайте хост-приложение (основное приложение)

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

ng g application host

4. Обновите Route, чтобы добавить путь к admin и изменить AppComponent.

Добавьте маршрут в app-routing.module.ts

Очистите app.component.html и добавьте код ниже

5. Запустите приложение

ng serve host

Создание удаленных приложений и конфигураций

1. Создайте удаленное приложение 1 и удаленное приложение 2.

ng new remoteapp1
ng new remoteapp2

ng g m home
ng g c home

      
                

                    
                    
                
            

      
                

                    
                    
                
            

5. Теперь добавляем пакет Module Federation Package к трем приложениям.

ng add @angular-architects/module-federation --project host --port 4200

ng add @angular-architects/module-federation --project remoteapp1 --port 5001

ng add @angular-architects/module-federation --project remoteapp2 --port 5002

6. Теперь выставьте модули из удаленных приложений для этого открытого webpack.config.js в remoteapp1 и remoteapp2.

7. Перехватите открытые модули в хост-приложении webpack.config.js.

8. Теперь настройте маршрутизацию в хост-приложении app.module.ts.

9. После настройки маршрутов вы получаете сообщение об ошибке, например, модуль не найден. вам нужно создать decl.d.ts в папке хост-приложения.

10. Затем, если вы получите следующую ошибку в remoteapp1 и remoteapp2. затем добавьте home.module.ts в tsconfig (файлы).

11. Теперь зарезервируйте пульты и измените хост app.component.ts, как показано ниже.

12. Теперь откройте хост-приложение в браузере и протестируйте его.

Работающий……

Ссылка на репо:https://github.com/GuruNadh552/Micro-Frontends-in-Angular

Спасибо, если у вас есть сомнения. скинь сообщение в комментарии