我已经使用单个水疗中心建立了一个环境，但遇到了奇怪的现象。我设置了三个角度应用程序：一个导航栏应用程序，它有两个页面，分别是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元素。 （见下文）
我注意到您已将索引html更新为使用单spa布局，但是我仍在使用旧版本的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/[email protected]/minified.js"></script>
<script src="https://unpkg.com/zone.js"></script>
<script src="https://unpkg.com/[email protected]/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>
任何帮助将不胜感激！谢谢！
我的问题是我的应用程序根目录选择器在所有三个应用程序中都相同。我将它们更改为唯一的选择器，并且有效！