Создание микрофронтенд-приложения с помощью Angular Module Federation


Этот пост был написан под впечатлением от статьи Briebug

В последнее время я часто слышу о концепции микрофронтенда. Многие компании принимают это решение как способ сделать приложения меньше и проще в развертывании.

Но что такое микрофронтенд?

Согласно сайту micro-frontends:

Идея Micro Frontends заключается в том, чтобы рассматривать веб-сайт или веб-приложение как композицию функций, которые принадлежат независимым командам. У каждой команды есть своя область бизнеса или миссия, о которой она заботится и на которой специализируется. Команда является кросс-функциональной и разрабатывает свои функции из конца в конец, от базы данных до пользовательского интерфейса.

Это круто! С помощью микрофронтенда мы можем разделить приложение на более мелкие части, которые направлены на решение конкретной проблемы. Это идеальный вариант для компаний, которым необходимо работать с отдельными командами над конкретными частями продукта, например, над корзиной или модулем оформления заказа.

Такой подход позволяет группам работать с отдельными деплоями и различными стеками, не беспокоясь о других проектах, из которых состоит все решение.

Что нам нужно для создания микро фронтенд приложения?

Для создания микрофронтенд-приложения нам понадобятся два вида приложений:

Host

Это приложение, которое будет загружать удаленные приложения. У нас может быть только одно приложение-хост. Это приложение можно также назвать оболочкой.

Удаленный

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

Отлично! И что же мы собираемся делать?

В этом посте мы сделаем микро фронтенд-приложение, используя удивительный модуль Angular Module Federation и Nx для создания и управления рабочим пространством проекта.

Если вы никогда не слышали о Module Federation, ознакомьтесь с этой статьей.

Итак, давайте создадим проект.

В терминале просто введите команду ниже и создайте приложение Angular.

npx create-nx-workspace@latest
Войти в полноэкранный режим Выйти из полноэкранного режима

В вопросе «имя приложения» задайте имя хоста. Это будет хост-приложение.

После этого у вас должно быть одно приложение с именем host в рабочем пространстве проекта.

Теперь давайте создадим новое приложение под названием remote.

nx generate @nrwl/angular:application remote --port=5001
Вход в полноэкранный режим Выйдите из полноэкранного режима

Если все прошло нормально, у вас появится новое приложение в рабочей области.

Все хорошо?

Отлично! В следующих шагах мы собираемся превратить эти два приложения в удивительное микрофронтенд-решение.

Установка федерации модулей Angular

Пришло время добавить Angular Module Federation в наш проект.

Давайте введем следующую команду в терминале:

nx generate @nrwl/angular:setup-mf host --mf-type=host --routing
Войти в полноэкранный режим Выйти из полноэкранного режима

Внутри хост-приложения были сделаны следующие изменения:

  • Создан файл module-federation. config
module.exports = {
  name: 'host',
  remotes: ['remote'],
};
Войти в полноэкранный режим Выход из полноэкранного режима
  • Файл bootstrap содержит файл содержимого main.
  • Основной файл загружает файл bootstrap с помощью асинхронного импорта.

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

Хорошо, давайте превратим удаленное приложение в микро фронтенд приложение.

Выполните следующую команду в терминале:

nx generate @nrwl/angular:setup-mf remote --mf-type=remote --host=host --routing
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь обратите внимание на удаленное приложение. Внутри папки app у нас теперь есть новая папка remote-entry, а внутри нее — модуль Angular под названием RemoteEntryModule. Этот модуль позволит нам загружать удаленное приложение внутри основного приложения.

Файл entry.module.ts должен содержать следующее содержимое:

@NgModule({
  declarations: [RemoteEntryComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      {
        path: '',
        component: RemoteEntryComponent,
      },
    ]),
  ],
  providers: [],
})
export class RemoteEntryModule {}
Вход в полноэкранный режим Выйти из полноэкранного режима

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

Добавьте немного стиля удаленному компоненту 🐉.

Я думаю, что было бы неплохо внести некоторые изменения в этот компонент, чтобы он выглядел красиво.

Не волнуйтесь! Мы просто добавим к нему простой стиль.

@Component({
  selector: 'app-entry',
  template: `
    <div class="container">
      <span>I'm a remote app :)</span>
    </div>
  `,
  styles: [
    `
      .container {
        border: 1px solid green;
        padding: 24px;
      }
    `
  ]
})
export class RemoteEntryComponent {}
Вход в полноэкранный режим Выход из полноэкранного режима

Круто!

Добавим маршрут для загрузки удаленного приложения

Теперь внутри главного приложения добавим маршрут для загрузки удаленного приложения.

Добавьте файл app-routing.module.ts в папку app со следующим содержанием:

const routes: Routes = [
    {
        path: 'remote-app',
        loadChildren: () => import('remote/Module').then(m => m.RemoteEntryModule)
    }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }   
Войти в полноэкранный режим Выйти из полноэкранного режима

Вы заметили? Маршрут remote-app будет загружать путь remote/Module. Это файл, который webpack создаст с помощью конфигурационного файла module-federation.config внутри remote app.

О! Мы не можем забыть импортировать модуль маршрутизации в AppModule.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, 
    AppRoutingModule // here
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
Вход в полноэкранный режим Выход из полноэкранного режима

Почти готово!

Чтобы закончить приложение, давайте изменим шаблон de AppComponent на что-то лучшее

<div class="container">
    <div>I'm the host app</div>

    <a [routerLink]="['/remote-app']">load the remote app</a>

    <router-outlet></router-outlet> // the remote app comes here
</div>
Вход в полноэкранный режим Выход из полноэкранного режима
.container {
    border: 1px solid red;
    padding: 24px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Время посмотреть результат

Ну, а теперь пришло время посмотреть на работу микро фронтенд приложения. 😎

Выполните в терминале команду ниже:

nx run-many --target=serve --all 
Вход в полноэкранный режим Выход из полноэкранного режима

Зайдя в главное приложение, мы увидим следующую страницу:

Когда мы нажмем на ссылку load the remote app, хост-приложение загрузит удаленное приложение, используя маршрут /remote-app.

Мы создали микро фронтенд приложение! Потрясающе, как просто это было, не правда ли?

Любопытно узнать код?

Вы можете найти исходный код этого приложения на моем Github.

Если вам интересно посмотреть, как работает приложение, я развернул его в production. Посмотрите на приложение здесь!

Вот и все

Я потратил некоторое время на написание этого поста, надеюсь, что он вам понравился!

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

Спасибо за прочтение. 😄

Пока! 👋🏼

Оцените статью
devanswers.ru
Добавить комментарий