Можно ли несколько приложений Angular отрендерить на полученной с бэка странице?

Question

[Al]

Загружается html-страница отрендеренная на бэкенде, после загрузки мне нужно отрендерить несколько angular-компонентов, один в хедере, один в футере и пару штук внутри страницы, в определенных блоках.
Все это должно собираться с помощью AngularCLI, все эти приложения/компоненты будут в одном и том же бандле.
В итоге, на страницах будет подключен один и тот-же бандл, каждый раз после загрузки страницы будет анализироваться DOM на предмет блоков чтоб отрендерить в них angular-компоненты. К примеру, страница загрузилась, если есть блок рендерим туда конкретный angular-компонент, если есть блок рендерим туда соответствующий компонент. Т.е. нужно еще и такие соответствия как-то описать.
Таким образом, для разных angular-приложений на странице, будут переиспользоваться каке-то общие модули и проч (таким образом не надо внутри каждого отдельного приложения их дублировать). Так же все приложения будут в одном файле, благодаря чему не надо будет делать кучу запросов к серверу для получения этой статики, соответственно все должно довольно быстро работать.
Есть примеры или идеи как реализовать подобное?

Answer 1

[denismaster]

Начиная с Angular 6 это более возможно, но нужно решать такой вопрос достаточно аккуратно

все эти приложения/компоненты будут в одном и том же бандле.

Я бы каждому приложению дал бы свой bundle, и использовал ленивую загрузку

рендерим туда конкретный angular-компонент, если есть блок рендерим туда соответствующий компонент. Т.е. нужно еще и такие соответствия как-то описать.

boot.browser.ts ищет несколько элементов, можно создать несколько таких штук и внедрить свою логику(какие элементы и т.д.)
При этом в Angular 6 ivy можно упростить этот код и обойтись исключительно компонентами, без модулей

будут переиспользоваться каке-то общие модули и проч (таким образом не надо внутри каждого отдельного приложения их дублировать

Это единственная проблема, если делать несколько бандлов, тут либо переходить на ES6 и его модули, либо делать 1 бандл для всего. Либо будет дублирование кода.

Comments

[Al]

Столкнулся с некоторыми проблемами, возможно у вас есть решение Почему при использовании нескольких angular-приложений на одной странице падает ошибка «Zone already loaded»?