To create a microfrontend architecture for a website, I intend to combine Angular with the single-SPA framework. We intend to strangle the website's existing old monolithic design and replace it with a microfrontend architecture that will allow independent teams to work and perform autonomous deploys.
My strategy is to coexist with the actual monolith while using it as the root for single-SPA and strangling the microfrontends one at a time. The coexistence is conceivable, according to my experiments, but single-SPA always renders the applications at the bottom of my page.
The query is whether it is possible to render the application using single-SPA into a certain spot on my HTML, such as inside a particular div element, for example. I've been performing a fairly straightforward test, and this is how I register Angular applications on single-SPA. By doing this, the application is always rendered at the conclusion of my body element.
<script>
System.import('single-spa').then(function (singleSpa) {
singleSpa.registerApplication(
'dashboard',
function () {
return System.import('dashboard');
},
function (location) {
return location.pathname.startsWith('/dashboard');
}
);
singleSpa.start();
})
</script>