-1

我已经使用单个水疗中心设置了一个环境，但我遇到了奇怪的行为。我设置了三个有角度的应用程序：一个导航​​栏应用程序，它有两个页面，app1 和 app2，在导航栏下显示几个页面。我使用这个存储库作为模型：https ://github.com/joeldenning/coexisting-angular-microfrontends 。我了解存储库三天前已更改，我使用以前的提交作为模型。

行为：localhost:port/ - 显示导航栏 - 正确

localhost:port/navbarPage - 显示导航栏和导航栏页面 - 正确

localhost:port/app1Page - 仅显示导航栏几秒钟，然后切换到仅显示 app1Page 或反之亦然 - 错误

真正奇怪的是，两个单独的 spa 模板 div 都显示了，并且 app1Page 位于导航栏 div 内，而 app1 div 包含一个空的 app-root 元素。（见下文）

错误示例...

我注意到您更新了 index html 以使用 single-spa-layout，但我仍在使用旧版本仅供参考。这是我的 index.html：

<!DOCTYPE html>

<html>
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src *  data: blob: 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * data: blob: 'unsafe-inline'; font-src * data: blob: 'unsafe-inline';"
    />

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>Your application</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta name="importmap-type" content="systemjs-importmap" />

    <!-- "Landing-App": "http://localhost:4203/landing", -->

    <script type="systemjs-importmap">
      {
        "imports": {
          "App1-App": "http://localhost:4201/main.js",

          "App2-App": "http://localhost:4202/main.js",

          "Navbar-App": "http://localhost:4300/main.js",

          "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/5.5.0/system/single-spa.min.js"
        }
      }
    </script>

    <link
      rel="preload"
      href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/5.5.0/system/single-spa.min.js"
      as="script"
      crossorigin="anonymous"
    />

    <script src="https://unpkg.com/core-js-bundle@3.1.4/minified.js"></script>

    <script src="https://unpkg.com/zone.js"></script>

    <script src="https://unpkg.com/import-map-overrides@1.15.1/dist/import-map-overrides.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/system.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/amd.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-exports.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-register.min.js</script>
  </head>
  <body>
    <script>

      System.import("single-spa").then(function (singleSpa) {
        singleSpa.registerApplication(

          "Navbar-App",
          function () {
            return System.import("Navbar-App");
          },

          function (location) {
            return true;
          }
        );

        singleSpa.registerApplication(
          "App1-App",

          function () {
            return System.import("App1-App");
          },

          function (location) {
            return location.pathname.startsWith("/app1");
          }
        );

        singleSpa.registerApplication(
          "App2-App",

          function () {
            return System.import("App2-App");
          },

          function (location) {
            return location.pathname.startsWith("/app2");
          }
        );

        singleSpa.start();
      });
    </script>
    <import-map-overrides-full></import-map-overrides-full>
  </body>
</html>

任何帮助将不胜感激！谢谢！

4

1 回答 1

1

我的问题是我的应用程序根选择器/html 标签在所有三个应用程序中都是相同的，并且在将它们全部放在一起时会混淆单个 spa。我将它们更改为独特的选择器，它起作用了！（即<app-root></app-root>到<app-name-root></app-name-root>）

于 2020-06-16T12:49:33.633 回答