Something like the react-habitat bootstrapper?
A big problem is that Angular typically takes over one element in the DOM. Once angular takes that over - where can the page editor place its Area editing interface?
So, Is it possible to bootstrap multiple dom elements (ie one per component) so that they can run inside a Magnolia "area" node?
About Angular bootstrapping: https://angular-2-training-book.rangle.io/handout/bootstrapping/file_structure.html
bootstrap multiple angular applications
A simple example (I wonder if there are performance implications?)
boot multiple app root component into my index.html - (This looks really good.)
More flushed out example:
Search on "bootstrap" - " guess the best approach is to create a 2nd component outside Angulars root component is to call
bootstrap() on each and use a shared service to communicate:"
Notes on the angular Github:
longform bootstrap (a la Brad Green)
"we are able to instantiate an app and then bootstrap each individual component inside that app. This allows components to occupy isolated regions of the DOM and still communicate with each other since they are a part of the same app. We then use a globally shared service provider injected by the root app to allow them to communicate.
(Apparently broken - in latest Angular. See comments)
For working code he recommends: "Decoupled Blocks " Drupal Module
Decoupled Blocks - Drupal Module
This is a very interesting project that is very much inline with our goals. It allows Drupal projects to have some blocks which are provided by an FF. It has the philosophy that you can use a normal component from the FF framework, and add a YAML file to configure how it works in Drupal.
https://github.com/mrjmd/pdb/tree/8.x-1.x/modules/pdb_ng2 (Too much there - but its probably in there.)
How does it perform the real magic in Angular? Here:
Example of a component - here: https://github.com/mrjmd/pdb/tree/8.x-1.x/modules/pdb_ng2/components/ng2_example_1
Areas in Angular
See Dynamic Component Loading
for a way to have an Area in Angular where components could be dynamically added at runtime.
This may not be necessary since Magnolia would typically reload the page - but it could be interesting.
"ViewContainerRef" seems to be key.
(Look at the AdDirective.)
"It may be more economical to create the forms dynamically, based on metadata that describes the business object model."