Что такое 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 данные могут передаваться между разными маршрутами в виде строк запроса, необязательных параметров и динамических состояний. Поскольку мы используем концепции маршрутизации для загрузки модулей оболочки, мы можем использовать здесь те же концепции строк запроса, необязательных параметров и динамических состояний для передачи данных от хоста к оболочкам и наоборот.