Closed aflauberts closed 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>
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:
but, when force reload , the reference is lost and browser try to download "importmap" again from /product path:
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">
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:
<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>
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!
👍 glad to hear you've got it working.
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?