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>