My problem
I am trying to load an Angular applications with multiple root-components, e.g.:
<body>
<element-a></element-a>
<element-b></element-b>
<element-c></element-c>
</body>
I want to have multiple root-components instead of a single because I would like to use them in an old legacy asp.net Framework website.
Previously I was able to get this done by bootstrapping my angular application with the following configuration code:
platformBrowserDynamic().bootstrapModule(ElementAModule);
platformBrowserDynamic().bootstrapModule(ElementBModule);
platformBrowserDynamic().bootstrapModule(ElementCModule);
With the new guideline of the Angular-team that a component should be created as standalone, I was exited to try this out.
But the above bootstrap configuration only works for Modules and not for standalone components.
What I tried:
With bootstrapApplication I am able to load a standalone component as root.
It is even possible to load a second standalone component.
bootstrapApplication(ElementAComponent,{providers: [ ... ]})
.then(
appRef => appRef.bootstrap(ElementBComponent)
);
However, this seems to be very sensitive for errors:
- Sometimes it works (and renders the 2 components)
- Sometimes it only renders 1 components,
- Sometimes it renders 1 component and throws and error
Error: The selector "element-B" did not match any elements
When I try to add a third component, the third component is never rendered at all.
bootstrapApplication(ElementAComponent,{providers: [ ... ]})
.then(
appRef => {
appRef.bootstrap(ElementBComponent);
appRef.bootstrap(ElementCComponent);
}
);
I found the following github issue, but it is closed without a clear solution for me:
https://github.com/angular/angular/issues/51331
In summary
Can I work with angular standalone components if I want to have multiple root components?
And if yes, what is the approach to take then?
Or should I stay away from this at this moment and keep working with the classic modules?