URL路由哈希在单Spa微前端角度应用中的应用 [英] URL Route hashing in single-spa micro front-end angular application

问题描述

我正在尝试使用单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行为如下

1. 首页：http://localhost:4200/#/
2. 导航至仪表板：http://localhost:4200/#/dashboard/my-dashboard
3. 在上面的URL上重新加载时，它工作正常。

当部署在apache服务器中时，行为如下

1. 主页：https://microfrontendapp.com/home
2. 导航到仪表板：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屋！