failed when directly call appX/:named

aflauberts commented 4 years ago

I think is not possible to render directly a named route such as "/app2/312321"

here´s my registration object:

registerApplication({ name: "@vue-mf/product", app: () => System.import("@vue-mf/product"), activeWhen: ["/product/:sku"], });

when comes from /app1/ to /product/312321 it works. but when typed in browser or just reload it on /product/312321 it doesn´t

can someone help?

joeldenning commented 4 years ago

Hi @aflauberts, good question. Could you run the following in the browser console to help diagnose?

System.import('single-spa').then(singleSpa => {
  // Should return MOUNTED
  console.log(singleSpa.getAppStatus('@vue-mf/product'))

  // Should return ['@vue-mf/product']
  console.log(singleSpa.checkActivityFunctions())
})

Additionally, you can check the browser devtools Inspector tab and search for <div id="single-spa-application:@vue-mf/product">. It should exist within the <body>

aflauberts commented 4 years ago

Hello @joeldenning , tnks for quick response.

here´s my complete registration object for knowledge:

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@vue-mf/navbar",
  app: () => System.import("@vue-mf/navbar"),
  activeWhen: () => true,
});

registerApplication({
  name: "@vue-mf/dogs-dashboard",
  app: () => System.import("@vue-mf/dogs-dashboard"),
  activeWhen: "/storefront",
});

registerApplication({
  name: "@vue-mf/product",
  app: () => System.import("@vue-mf/product"),
  activeWhen: ["/product/:sku"],
});

start();

Coming from http://localhost:9000/storefront to http://localhost:9000/product/104550265, it works as shown below: Capture

but, when force reload , the reference is lost and browser try to download "importmap" again from /product path:

Capture2

joeldenning commented 4 years ago

That error looks like your import map's src attribute is incorrect within your index.ejs file. Can you share the contents of the index.ejs file? It should be something like <script type="systemjs-importmap" src="/importmap.json">

aflauberts commented 4 years ago

sure,

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Loja Online Vivo</title>
  <meta name="importmap-type" content="systemjs-importmap" />
  <script type="systemjs-importmap" src="src/importmap.json"></script>
  <% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@vue-mf/root-config": "http://localhost:9000/vue-mf-root-config.js"
      }
    }
  </script>
  <% } %>
  <script src="https://cdn.jsdelivr.net/npm/import-map-overrides/dist/import-map-overrides.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/amd.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/named-exports.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
</head>
<body>
  <script>
    System.import('@vue-mf/styleguide');
    System.import('@vue-mf/root-config');
  </script>
  <import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
</body>
</html>

importmap.json

{
  "imports": {
    "@vue-mf/root-config": "https://vue.microfrontends.app/root-config/d0b3a0e07d664c29a33851d78692feb57bd57da8/vue-mf-root-config.js",
    "@vue-mf/styleguide": "https://localhost:9001/vue-mf-styleguide.js",
    "@vue-mf/navbar": "https://localhost:8501/js/app.js",
    "@vue-mf/dogs-dashboard": "https://localhost:8502/js/app.js",
    "@vue-mf/product": "https://localhost:8503/js/app.js",
    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.5.1/lib/system/single-spa.min.js",
    "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
    "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js"
  }
}

folder tree: Capture3

joeldenning commented 4 years ago

<script type="systemjs-importmap" src="src/importmap.json"></script>

^ Note how src/importmap.json is a relative URL. This means that it will download from a different location depending on the page URL. To fix, you likely need to make it an absolute URL:

<script type="systemjs-importmap" src="/src/importmap.json"></script>

aflauberts commented 4 years ago

yes!, tnks a lot! at this moment i can not use external link to provide this json, so I put it content in-line on index.ejs and it's working. tnks again!

joeldenning commented 4 years ago

👍 glad to hear you've got it working.

vue-microfrontends / root-config

failed when directly call appX/:named #8