Угловой подход к микро интерфейсу

Question

Насколько я могу судить, есть два популярных случая использования микро-интерфейсов -

1) Одна страница с компонентами (каждый на своем сервисе) 2) Несколько страниц, доступных с панели инструментов / панели навигации (каждая часть имеет свой собственный сервис)

Я копаю уже некоторое время, и, насколько я могу судить, случай 1 довольно прост при использовании пользовательских элементов Angular.

Проблема в том, что мне нужно решить кейс 2. По своему дизайну я получил панель управления (панель навигации в боковой части страницы) со списком маршрутов для различных точек входа компонентов (отчеты, пользователи и т. Д.)).

Я хочу, чтобы эта часть была контейнером, и каждый маршрут на навигационной панели контейнера должен вести к отдельному микро-переднему концу, который может существовать сам по себе и как часть контейнера. Поэтому у меня будет, например, reportService, userService и т. Д. ... и служба main / container для создания полного сайта.

У меня возникают проблемы с выяснением того, что является лучшим подходом для достижения этой цели. Я видел все виды статей, но я до сих пор не вижу четкого пути (готовый продукт и т. Д.)

Существуют ли какие-либо популярные и готовые подходы для этого? Например, чтобы две команды работали над отдельной частью сайта (в отдельном контексте), не влияя друг на друга. Оба получили отдельную часть сайта, и при развертывании изменения могут быть добавлены в основной содержащий сайт. Существует минимальная (если есть) связь между этими двумя подузлами, их можно запускать отдельно или внутри контейнера.

Я добавил ссылку на статью, которая объясняет мою проблему и многое другое, и делает это намного лучше, чем ямог когда-либо сделать https://martinfowler.com/articles/micro-frontends.html

Answer 1

Сейчас я занимаюсь разработкой проекта, который похож на то, что вы просите. Мой текущий подход заключается в использовании библиотеки single-spa для организации и импорта различных микро-интерфейсов. В настоящее время у меня есть панель навигации, которая представляет собой угловое приложение, которое всегда отображается и использует угловую маршрутизацию для переключения между другими приложениями, которые загружаются под навигацией. Вы можете начать здесь .

Answer 2

Я следовал этому подходу для своих проектов, надеюсь, он вам поможет

Несколько страниц доступны с панели инструментов / панели навигации (каждая часть имеет свой собственный сервис)

Мысоздано несколько модулей на основе таких функций, как - UserModule, ReportsModule, InitialModule и т. д., чтобы мы могли лениво загружать различные модули в зависимости от маршрута.

Каждый модуль будет иметь свои собственные службы, компоненты, классы и ресурсыкоторые необходимы для модуля. Например, у InitialModule будут компоненты, относящиеся только к Login и Dashboard, и мы установим его как bootstrap module в main.ts, чтобы страница загружалась быстро, загружая js, CSS и HTML, необходимые для этих двухтолько компоненты вместо всех активов