选择使用 Single-SPA 在根 HTML 上呈现应用程序的位置

Question

我打算使用带有 angular 的单 SPA 框架来构建网站的微前端架构。该网站已经以传统的整体方式存在，我们计划将其扼杀为微前端架构，让独立的团队工作并进行独立部署。

我的计划是使用实际的单体作为单 SPA 的根，一个一个地扼杀微前端，与实际的单体共存。我做了一些测试，共存是可能的，但单 SPA 总是在我的页面末尾呈现应用程序。

问题是是否可以将具有单 SPA 的应用程序渲染到我的 HTML 上的特定位置，例如在特定的 div 元素中。这是我现在一直在做的一个非常简单的测试，这就是我在单 SPA 上注册 angular 应用程序的方式。通过这样做，它总是在我的 body 元素的末尾呈现应用程序。

         <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>

Answer 1

这个问题的答案不是那么简单，所以我会把它分解。

My plan is to use the actual monolith as the root for single-SPA and strangle the microfrontends one by one, coexisting with the actual monolith.

single-spa 团队建议不要尝试将根配置放入应用程序以更好地分离关注点。另见 "Should I have a parent/root app and children apps" and "Architectural overview"。相反，您应该有一个独立的根配置，并且您的第一个单 spa 应用程序应该是单体。

The question is if it's possible to render the application with single-SPA into a specific location on my HTML

通过将 domElementGetter option 传递给 singleSpaAngular，这可以在单 spa 应用程序级别实现。

或者，如果 using single-spa-layout in the root config。

，您可以从配置中实现相同的目的

as inside a specific div element

这是我觉得需要进一步深入研究的地方。虽然您可以将 应用程序 安装在 DOM 中的任意位置，但您应该不要期望尝试在单个 spa 应用程序中安装单个 spa 应用程序。相反，可以通过 cross microfrontend imports if using the same framework between them, or single-spa Parcels 共享组件以实现跨框架互操作。

选择使用 Single-SPA 在根 HTML 上呈现应用程序的位置

Choose where to render application on root HTML with Single-SPA

angular

single-spa