我正在尝试使用单水疗库将我的应用程序实现为微前端。应用程序的文件夹结构如下，
- 微前端
- 根应用
- 导航栏应用程序（Angular 应用程序）
- 仪表板应用程序（Angular 应用程序）
- 服务应用程序（Angular 应用程序）
我已经在服务器中部署了相同的内容，并且网站按预期工作。服务器中的文件夹结构（/var/www/html/）如下，
- 家（根）[网址：https://microfrontendapp.com/home]
- 仪表板 [网址：https://microfrontendapp.com/dashboard/my-dashboard]
- 服务 [网址：https://microfrontendapp.com/service]
- 导航栏
我面临的问题是我从主页开始使用该网站，然后移至仪表板或服务应用程序，如果我尝试从此 URL 路径重新加载，我会收到404 Page not found error for the web URL。
我正在尝试使用路由散列来解决问题。代码如下：
主页（根）应用程序
索引.html
<template id="single-spa-layout">
<single-spa-router mode="hash" base="/">
<div style="display: flex">
<nav>
<application name="navbar"></application>
</nav>
<div style="width: 96%; margin: 5% 1%">
<route path="/dashboard">
<application name="dashboard"></application>
</route>
<route path="/service">
<application name="service"></application>
</route>
</div>
</div>
</single-spa-router>
</template>
根应用程序.js
System.import("single-spa").then(function(singleSpa) {
singleSpa.registerApplication(
"navbar",
function() {
return System.import("navbar");
},
function(location) {
return true;
}
);
singleSpa.registerApplication(
"dashboard",
() => System.import("dashboard"),
location => location.pathname.startsWith("/dashboard"),
{ some: "value" }
);
singleSpa.registerApplication(
"service",
() => System.import("service"),
location => location.pathname.startsWith("/service"),
{ some: "value" }
);
导航栏应用
onNavigation() {
window.location.pathname += "/";
// The above was used because on during navigation to dashboard or any other app, URL is changed as https://microfrontendapp.com/home#/dashboard/my-dashboard
window.location.hash = "/" + url; // To point to the selected navigation URL
}
仪表板应用程序
路由器.ts
const routes: Routes = [
{
path: 'dashboard',
component: DashboardComponent,
children: [
{
path: 'my-dashboard',
component: MyDashboardComponent,
data: { }
}
}
]
@NgModule({
imports: [RouterModule.forRoot(routes), { useHash: true, preloadingStrategy: NoPreloading }],
exports: [RouterModule],
providers: [
{ provide: APP_BASE_HREF, useValue: '/' },
],
})
export class AppRoutingModule { }
本地服务器 URL 行为如下，
- 主页：http://localhost:4200/#/
- 导航到仪表板：http://localhost:4200/#/dashboard/my-dashboard
- 在上面的 URL 上重新加载时，它工作得很好。
当部署在 apache 服务器中时，行为如下，
- 主页：https ://microfrontendapp.com/home
- 导航到仪表板：https ://microfrontend.com/home/#/dashboard/my-dashboard 。但是页面没有加载。没有 HTTP 调用来获取主脚本文件（仪表板应用程序编译的脚本文件）来加载页面。
有人可以帮助解释为什么脚本文件的 HTTP 调用没有启动吗？我不确定我是否做错了什么。或者有没有其他解决方案可以解决404 Page not found 问题
请在这里帮助我。提前致谢。