single spa не будет отображать два приложения одновременно

Я установил среду с использованием одного спа, и я испытываю странное поведение. У меня настроено три приложения angular: приложение для панели навигации с двумя собственными страницами, app1 и app2, с несколькими страницами, которые будут отображаться под панелью навигации. Я использовал этот репозиторий в качестве модели: https://github.com/joeldenning/coexisting-angular-microfrontends. Насколько я понимаю, репозиторий был изменен три дня назад, я использую предыдущие коммиты в качестве модели.

поведение: localhost:port/ - показывает панель навигации - правильно

localhost:port/navbarPage - показывает панель навигации и страницу панели навигации - правильно

localhost:port/app1Page - отображает только панель навигации в течение нескольких секунд, а затем переключается на отображение только app1Page или наоборот - неправильно

Что действительно странно, так это то, что отображаются оба отдельных div-шаблона шаблона спа, и app1Page находится внутри div навигационной панели, а div app1 содержит пустой корневой элемент приложения. (увидеть ниже)

пример ошибки...

Я заметил, что вы обновили index html, чтобы использовать одиночный спа-макет, но я все еще использую старую версию FYI. Вот мой 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>

Любая помощь будет оценена по достоинству! Благодарность!

Источник

1 ответ

Моя проблема заключалась в том, что корневые селекторы моих приложений были одинаковыми для всех трех приложений. Я изменил их на уникальные селекторы, и это сработало!

Источник
Другие вопросы по тегам