Can multiple Angular applications be rendered on a backed page?

Question

Angular

An html page is loaded rendered on the backend, after loading I need to render several angular components, one in the header, one in the footer and a couple of things inside the page, in certain blocks.
All this should be assembled using AngularCLI, all these applications / components will be in the same bundle.
As a result, the same bundle will be connected on the pages, each time after the page is loaded, the DOM will be analyzed for blocks in order to render angular components in them. For example, the page has loaded, if there is a block, we render a specific angular component there, if there is a block, we render the corresponding component there. Those. It is also necessary to describe such correspondences somehow.
Thus, for different angular applications on the page, some common modules will be reused and so on (thus there is no need to duplicate them inside each individual application). Also, all applications will be in one file, so you won’t have to make a bunch of requests to the server to get this static, so everything should work pretty quickly.
Any examples or ideas on how to implement this?

Answer 1

Starting from Angular 6 this is more possible, but you need to deal with this issue quite carefully.
I would give each application its own bundle, and use lazy loading
boot.browser.tssearches for several elements, you can create several of these things and implement your own logic (which elements, etc.)
At the same time, in Angular 6 ivy, you can simplify this code and get by with components only, without modules
This is the only problem if you make several bundles, then either switch to ES6 and its modules, or make 1 bundle for everything. Or there will be code duplication.