时间戳

首页 > 解决方案 > 单水疗微前端角度应用程序中的 URL 路由散列

angular - 单水疗微前端角度应用程序中的 URL 路由散列

问题描述

我正在尝试使用单水疗库将我的应用程序实现为微前端。应用程序的文件夹结构如下，

我已经在服务器中部署了相同的内容，并且网站按预期工作。服务器中的文件夹结构（/var/www/html/）如下，

我面临的问题是我从主页开始使用该网站，然后移至仪表板或服务应用程序，如果我尝试从此 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 行为如下，

  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 Page not found 问题

请在这里帮助我。提前致谢。

标签： angularangular-ui-routerangular-routingmicro-frontendsingle-spa-angular

解决方案

你的路线有些不规则。

早些时候，当您使用 时PathLocationStrategy，您的 URL 看起来像： https ://microfrontendapp.com/dashboard/my-dashboard

之后HashLocationStrategy，您的 URL 就像： https ://microfrontend.com/home/#/dashboard/my-dashboard

这是什么 /home/ 这里？如果这是上下文路径，您可能必须考虑baseHref在您的应用程序中添加。

在这里查看我的答案

推荐阅读