Что такое Micro Front Ends:
Архитектура Micro Frontend является аналогом Micro Service Architecture. Подобно архитектуре микросервисов, где мы разбиваем всю внутреннюю функциональность на микросервисы и развертываем их отдельно, в архитектуре микрофронтенда мы делаем то же самое.
Таким образом, Micro Front End — это архитектурный стиль, в котором мы разбиваем сложный внешний интерфейс приложения на небольшие отдельные, слабо связанные внешние приложения, которые работают индивидуально в отдельных доменах, чтобы пользователи могли получать к ним независимый доступ, поскольку они могут служить пользователям с разными целями. Таким образом, каждый Micro Front End функционально независим и может быть интегрирован для создания большого приложения.
Микроинтерфейсная архитектура с Angular:
здесь мы будем вызывать родительское приложение, в котором другое внешнее приложение загружается как хости внешнее приложение, которое мы загружаем на хост как Shell. Таким образом, в Angular мы можем использовать модуль Module Federation для достижения этого Micro Front Ends.
Приложения оболочки компилируют и предоставляют свои отдельные модули для использования на хосте. Чтобы выставить модули, нам нужно объявить их в файле webpack, как показано ниже.
new ModuleFederationPlugin({ name: "shell", /* File name which will be used as entry point */ filename: "remoteEntry.js", /* List of Modules to be exposed */ /* name with which the module to be exposed : path of the module that is going to be exposed*/ exposes: { "./AppModule": "./src/app/app.module.ts", }, })
Эти открытые модули объединяются в файл пакета JS с именем, которое мы дали. Таким образом, в приведенных выше строках мы указали remoteEntry.js в качестве имени файла для хранения пакета. Этот файл JS действует как точка входа для доступа к приложению оболочки.
Хост загружает необходимые открытые модули во время выполнения (отложенная загрузка) с помощью файла remoteEntry.js, созданного приложением оболочки. Хост-приложение считает эти открытые модули своими дочерними модулями.
Чтобы загрузить модули из оболочки в хост, нам нужно объявить их в маршрутах хоста, как показано ниже.
{ path: 'shell', /* url route at which the micro frontend to load */ loadChildren: () => loadRemoteModule({ remoteEntry: MICRO_FRONT_END_URL + '/remoteEntry.js', /* remote entry url to the shell*/ remoteName: 'shell', /* shell unique name */ exposedModule: './AppModule', /* Exposed Module Name */ }).then(m => { return m.AppModule; /* Module Name of Exposed Module */ }), }
Данные также могут передаваться между хостом и оболочкой. В Angular данные могут передаваться между разными маршрутами в виде строк запроса, необязательных параметров и динамических состояний. Поскольку мы используем концепции маршрутизации для загрузки модулей оболочки, мы можем использовать здесь те же концепции строк запроса, необязательных параметров и динамических состояний для передачи данных от хоста к оболочкам и наоборот.