Angular Micro-frontends
Module federation, архітектура micro-frontend, спільні залежності, стратегії розгортання, патерни комунікації
1Що таке архітектура micro-frontend у контексті Angular?
Що таке архітектура micro-frontend у контексті Angular?
Відповідь
Архітектура micro-frontend розділяє монолітну Angular-застосунок на менші, незалежні застосунки, кожен з яких розробляється та розгортається окремо. Кожен micro-frontend може мати власний repository, CI/CD pipeline та виділену команду. Module Federation з Webpack 5 — це рекомендована технологія для реалізації цієї архітектури в Angular, що дозволяє динамічно завантажувати код з інших застосунків під час runtime.
2Яка роль Module Federation в архітектурі micro-frontend Angular?
Яка роль Module Federation в архітектурі micro-frontend Angular?
Відповідь
Module Federation дозволяє ділитися кодом між Angular-застосунками під час runtime без rebuild. Кожен micro-frontend експонує модулі (remote), які можуть споживатися іншими застосунками (host). Це уникає дублювання коду, зменшує розмір bundle і дозволяє незалежні розгортання. Module Federation автоматично обробляє асинхронне завантаження, розв'язання залежностей та спільне використання загальних бібліотек, таких як Angular core.
3Яка різниця між host-застосунком і remote-застосунком у Module Federation?
Яка різниця між host-застосунком і remote-застосунком у Module Federation?
Відповідь
Host-застосунок споживає модулі, експоновані remote'ами. Він конфігурує remote у своєму webpack.config і динамічно завантажує їхні модулі. Remote-застосунок експонує модулі (component, service) для споживання іншими застосунками. Один і той самий застосунок може бути одночасно host і remote. Host керує shell-ом застосунку (header, navigation, layout), тоді як remote надають бізнес-функціональність.
Як налаштувати Module Federation в Angular-проєкті з @angular-architects/module-federation?
Чому важливо налаштовувати shared scope у Module Federation?
+17 питань зі співбесід
Інші теми співбесід Angular
Основи TypeScript
TypeScript просунутий
Основи Angular
Компоненти та життєвий цикл
Services & Dependency Injection
Організація модулів Angular
Angular CLI
Директиви та Pipe
Маршрутизація та навігація
Реактивні форми
Template-driven форми
Основи RxJS
Оператори RxJS
HttpClient і виклики API
Базове керування станом
Change Detection
Angular Signals
Standalone Components
Модульні тести в Angular
End-to-End тестування
Build і оптимізація
Основи NgRx
Просунутий NgRx
Архітектура Angular
Оптимізація продуктивності
Безпека та найкращі практики
Просунуті патерни RxJS
Angular Universal та SSR
Опануй Angular для наступної співбесіди
Отримай доступ до всіх питань, flashcards, технічних тестів, вправ code review та симуляторів співбесід.
Почни безкоштовно