1. Anuncie Aqui ! Entre em contato fdantas@4each.com.br
Anuncie aqui Patrocinador Anuncios

single spa won't display two apps at the same time

Discussão em 'Angular' iniciado por Judah Morrison, Outubro 10, 2024 às 07:22.

  1. Judah Morrison

    Judah Morrison Guest

    I have set up an environment using single spa and I am experiencing strange behavior. I have three angular apps set up: a navbar app, with two pages of its own, app1 and app2, with several pages to be displayed under the navbar. I was using this repository as a model: https://github.com/joeldenning/coexisting-angular-microfrontends . I understand the repository was changed three days ago, I am using the previous commits as a model.

    behavior: localhost:port/ - shows navbar - correct

    localhost:port/navbarPage - shows navbar and navbar page - correct

    localhost:port/app1Page - displays only the navbar for several seconds and then switches to showing only the app1Page or vice versa - wrong

    What is really strange is that both single spa template divs are displayed and app1Page is inside the navbar div and the app1 div contains an empty app-root element. (see below)

    example of error...

    I Noticed you updated the index html to use single-spa-layout, but I am still using the old version FYI. Here is my 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>


    Any help will be appreciated! Thanks!

    Continue reading...
    Judah Morrison, Outubro 10, 2024 às 07:22
    #1

Compartilhe esta Página