# Angular Micro-frontends (Angular)

> Module federation, архітектура micro-frontend, спільні залежності, стратегії розгортання, патерни комунікації

- 20 питань зі співбесід
- Senior
- [Питання зі співбесід: Angular](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy.md)

## 1. Що таке архітектура 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 дозволяє ділитися кодом між Angular-застосунками під час runtime без rebuild. Кожен micro-frontend експонує модулі (remote), які можуть споживатися іншими застосунками (host). Це уникає дублювання коду, зменшує розмір bundle і дозволяє незалежні розгортання. Module Federation автоматично обробляє асинхронне завантаження, розв'язання залежностей та спільне використання загальних бібліотек, таких як Angular core.

## 3. Яка різниця між host-застосунком і remote-застосунком у Module Federation?

**Відповідь**

Host-застосунок споживає модулі, експоновані remote'ами. Він конфігурує remote у своєму webpack.config і динамічно завантажує їхні модулі. Remote-застосунок експонує модулі (component, service) для споживання іншими застосунками. Один і той самий застосунок може бути одночасно host і remote. Host керує shell-ом застосунку (header, navigation, layout), тоді як remote надають бізнес-функціональність.

## Ще 17 доступних питань

- Як налаштувати Module Federation в Angular-проєкті з @angular-architects/module-federation?
- Чому важливо налаштовувати shared scope у Module Federation?

Зареєструйся безкоштовно: https://sharpskill.dev/uk/login

## Інші теми співбесід Angular

- [Основи TypeScript](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/typescript-basics.md): 25 запитань, Junior
- [TypeScript просунутий](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/typescript-advanced.md): 20 запитань, Junior
- [Основи Angular](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/angular-fundamentals.md): 20 запитань, Junior
- [Компоненти та життєвий цикл](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/components-lifecycle.md): 20 запитань, Junior
- [Services & Dependency Injection](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/services-dependency-injection.md): 20 запитань, Junior
- [Організація модулів Angular](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/modules-organization.md): 22 запитань, Mid-Level
- [Angular CLI](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/angular-cli.md): 18 запитань, Junior
- [Директиви та Pipe](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/directives-pipes.md): 22 запитань, Mid-Level
- [Маршрутизація та навігація](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/routing-navigation.md): 24 запитань, Mid-Level
- [Реактивні форми](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/forms-reactive.md): 26 запитань, Mid-Level
- [Template-driven форми](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/forms-template-driven.md): 16 запитань, Mid-Level
- [Основи RxJS](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/rxjs-fundamentals.md): 22 запитань, Mid-Level
- [Оператори RxJS](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/rxjs-operators.md): 24 запитань, Mid-Level
- [HttpClient і виклики API](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/http-client.md): 22 запитань, Mid-Level
- [Базове керування станом](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/state-management-basics.md): 20 запитань, Mid-Level
- [Change Detection](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/change-detection.md): 20 запитань, Mid-Level
- [Angular Signals](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/angular-signals.md): 20 запитань, Mid-Level
- [Standalone Components](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/standalone-components.md): 18 запитань, Mid-Level
- [Модульні тести в Angular](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/testing-unit.md): 22 запитань, Mid-Level
- [End-to-End тестування](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/testing-e2e.md): 18 запитань, Mid-Level
- [Build і оптимізація](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/build-optimization.md): 20 запитань, Mid-Level
- [Основи NgRx](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/ngrx-fundamentals.md): 24 запитань, Senior
- [Просунутий NgRx](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/ngrx-advanced.md): 24 запитань, Senior
- [Архітектура Angular](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/angular-architecture.md): 22 запитань, Senior
- [Оптимізація продуктивності](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/performance-optimization.md): 22 запитань, Senior
- [Безпека та найкращі практики](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/security-best-practices.md): 20 запитань, Senior
- [Просунуті патерни RxJS](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/advanced-rxjs-patterns.md): 22 запитань, Senior
- [Angular Universal та SSR](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/angular-universal-ssr.md): 20 запитань, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/micro-frontends-angular