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

Posted 2023-03-15

【中文标题】单水疗微前端角度应用程序中的 URL 路由散列

【英文标题】：URL Route hashing in single-spa micro front-end angular application

【发布时间】：2021-12-11 00:49:05

【问题描述】：

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

微前端 根应用 导航栏应用（Angular 应用） 仪表板应用（Angular 应用） 服务应用（Angular 应用）

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

home（根）[URL：https://microfrontendapp.com/home] 仪表板 [网址：https://microfrontendapp.com/dashboard/my-dashboard] 服务 [网址：https://microfrontendapp.com/service] 导航栏

我面临的问题是 我从主页开始使用该网站，然后转到仪表板或服务应用程序，如果我尝试从该 URL 路径重新加载，我会收到 404 页面未找到网络 URL 错误。

我正在尝试使用路由散列来解决问题。代码如下：

主页（根）应用程序

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>

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

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

【问题讨论】：

当你转到link时，你在网络标签中看到了什么

当我转到仪表板时，网络选项卡中没有新的 HTTP 请求。

不要只检查 fetch/XHR 请求。检查一切，你有没有看到任何加载的文件，什么都没有。

是的，我检查了所有请求，而不仅仅是 XHR 请求。

我在本地 url 中没有看到 'home' 但在 apache 服务器中为什么会这样？

【参考方案1】：

这是您的部署服务器的问题，而不是单水疗中心或任何客户端的问题，真的。需要将 Apache 配置为使用相同的 index.html 来处理每个请求，这对于任何单页应用程序都必须这样做，即使不使用 single-spa 也是如此。

对此没有单一的解决方案，因为您可能需要以不同方式处理特定路由，但Angular 和Vue 为如何在各种服务器上进行配置提供了很好的起点。对于 Apache，它可能看起来像这样：

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %DOCUMENT_ROOT%REQUEST_URI -f [OR]
RewriteCond %DOCUMENT_ROOT%REQUEST_URI -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

【讨论】：

您好，感谢您的回复。我尝试过使用相同的配置。当我尝试重新加载仪表板页面时，我遇到了“404 页面未找到”问题。我不确定是什么问题。

嗨，我已经部署了没有构建/压缩的catalyst-root 应用程序，但其他两个应用程序使用single-spa 构建命令。正如上面评论中提到的，我已经尝试更改服务器配置，但这是重定向到催化剂根文件夹而不是活动路由（催化剂自助服务）。我只有一个 index.html 文件，它位于catalyst-root 文件夹中。其他两个微应用构建版本只有 main.js 文件。我有几个疑问，1.上面的实现对吗？ 2. 我不在 URL 中使用哈希。路由中是否必须使用散列？

【参考方案2】：

您的路线有些不规则。

您之前使用PathLocationStrategy 时，您的网址如下所示： https://microfrontendapp.com/dashboard/my-dashboard

在HashLocationStrategy 之后，您的网址如下： https://microfrontend.com/home/#/dashboard/my-dashboard

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

查看我的答案here

【讨论】：

嗨，/home 是注册所有其他微应用程序的根文件夹的路径。我不知道为什么哈希会出现在 /home 路径之后。这也是我的疑问之一（我有可点击的菜单，它只在点击时设置哈希路径）。因为当不使用散列时，/home 不作为 baseHref。