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

这个问题的答案不是那么直截了当，所以我会分解它。

我的计划是使用实际的单体作为单 SPA 的根，并将微前端一一扼杀，与实际的单体共存。

single-spa 团队建议不要尝试将根配置放入应用程序以更好地分离关注点。 另请参阅“我应该有父/根应用程序和子应用程序”和“架构概述” 。 相反，您应该有一个独立的根配置，并且您的第一个单水疗应用程序应该是单体应用程序。

问题是是否可以将具有单 SPA 的应用程序渲染到我的 HTML 上的特定位置

通过将domElementGetter选项传递给 singleSpaAngular，这在单水疗应用程序级别是可能的。

或者，如果在根配置中使用 single-spa-layout ，您可以从配置中实现相同的目的。

在特定的 div 元素中

这就是我觉得有必要进一步深入研究的地方。虽然您可以将应用程序安装在 DOM 中的任意位置，但您不应该期望尝试在单spa 应用程序中安装单spa 应用程序。 相反，如果在它们之间使用相同的框架，则可以通过跨微前端导入来共享组件，或者使用单 spa Parcels进行跨框架互操作。