URL路由哈希在单Spa微前端角度应用中的应用 [英] URL Route hashing in single-spa micro front-end angular application
本文介绍了URL路由哈希在单Spa微前端角度应用中的应用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用单SPA库将我的应用程序实现为微前端。 应用程序的文件夹结构如下:
- 微前端
- 根应用
- 导航栏应用程序(角度应用程序)
- 仪表板应用程序(角度应用程序)
- 服务APP(角度应用)
我已经在服务器中部署了相同的服务器,网站工作正常。 服务器(/var/www/html/)中的文件夹结构如下
- 主页(根)[url:https://microfrontendapp.com/home]
- 仪表板[url:https://microfrontendapp.com/dashboard/my-dashboard]
- 服务[url:https://microfrontendapp.com/service]
- 导航栏
我面临的问题是我从主页开始使用网站,然后移动到仪表板或服务应用程序,如果我尝试从此URL路径重新加载,则收到404找不到网页错误。
我正在尝试使用路由哈希来解决该问题。代码如下:
主(根)应用程序
index.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
}
仪表板应用程序
router.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找不到页面问题
请帮帮我。提前谢谢。
推荐答案
您的路由不正常。
早些时候您使用PathLocationStrategy
时,您的URL如下所示:
https://microfrontendapp.com/dashboard/my-dashboard
和
HashLocationStrategy
之后,您的URL如下: https://microfrontend.com/home/#/dashboard/my-dashboard
这是什么/家/这里?如果这是上下文路径,您可能必须考虑在应用程序中添加baseHref
。
检查我的答案here
这篇关于URL路由哈希在单Spa微前端角度应用中的应用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文