选择在哪里呈现根HTML应用具有单SPA

如何解决选择在哪里呈现根HTML应用具有单SPA

我计划使用带有 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>

解决方法

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

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

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

问题是是否可以将带有单 SPA 的应用程序呈现到我的 HTML 上的特定位置

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

或者，如果 using single-spa-layout in the root config，您可以从配置中实现相同的功能。

在特定的 div 元素中

这是我觉得有必要进一步深入研究的地方。虽然您可以将应用程序挂载在 DOM 中的任意位置，但您不应期望尝试挂载单个 -单个 spa 应用程序中的 spa 应用程序。相反，如果组件之间使用相同的框架，则可以通过 cross microfrontend imports 共享，或者通过 single-spa Parcels 进行跨框架互操作。