单水疗角应用程序子路由不起作用答案

【问题标题】：Single-spa angular app child routing doesn't work单水疗角应用程序子路由不起作用
【发布时间】：2021-10-21 23:03:35
【问题描述】：

我已经设置了一个单水疗根配置应用程序和其他 2 个以角度实现的子应用程序（使用 parcels）。我正在尝试从根应用程序导航到子应用程序路由，它适用于第一条路由/app1，但是如果我想导航到/app1/search 或/app1/details，它不会加载关联的组件，虽然 url 改变了。

如果我最初点击/app1/search，它会加载搜索组件，但之后如果我尝试导航到其他路线，例如/app1/<any-route>，它会更改 url，但不会加载组件。

root-config app.component.html

<a routerLink="/app1" routerLinkActive="active">App1 Home</a>
<a routerLink="/app1/search" routerLinkActive="active">App1 Search</a>
<a routerLink="/app1/details" routerLinkActive="active">App1 Details</a>
<a routerLink="/app2" routerLinkActive="active">App2 Home</a>


<router-outlet></router-outlet>

App1 路由模块：

const routes: Routes = [
  {
    path: 'app1',
    children: [
      {
        path: '',
        component: HomeComponent
      },
      {
        path: 'search',
        component: SearchComponent
      }, {
        path: 'details',
        component: DetailsComponent
      }]
  }, {
    path: '**',
    component: EmptyRouteComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

【问题讨论】：

标签： angular angular-routing micro-frontend single-spa single-spa-angular

【解决方案1】：

这会起作用

const routes: Routes = [
  {
    path: 'app1',
    component: HomeComponent
  },
  {
    path: 'app1/search',
    component: SearchComponent
  },
  {
    path: 'app1/details',
    component: DetailsComponent
  },
  {
    path: '**',
    component: EmptyRouteComponent
  }
];

如果你想创建一个孩子然后添加

home.component.html

<a routerLink="/search" routerLinkActive="active">App1 Search</a>
<a routerLink="/details" routerLinkActive="active">App1 Details</a>
<router-outlet></router-outlet>

然后像下面这样使用路由器。

const routes: Routes = [
  {
    path: 'app1',
    component: HomeComponent
    children: [
      {
        path: 'search',
        component: SearchComponent
      }, {
        path: 'details',
        component: DetailsComponent
      }]
  }, {
    path: '**',
    component: EmptyRouteComponent
  }
];```

【讨论】：

感谢您的回复。我试过这个，但没有运气。另外，我希望能够从 single-spa 的根配置应用程序导航到 app1/search 和 app2/search。我已经尝试在子应用程序中添加路由器插座，以便像您在上面指出的 /details 那样进行路由，但这不是我想要的行为。如果您有任何意见，请分享。
您能告诉我您的应用程序是如何构成的吗？查看路由器配置，我认为您有 2 个应用程序，并且您想为应用程序创建单独的路由。 App1 和 App2 有单独的子路由和单独的主页。是吗？
有 2 个应用程序 - app1 和 app2，它们都配置了我的问题中提到的路由。还有一个 root-config 应用程序，它也是用 Angular 实现的，这个应用程序充当其他 2 个应用程序的容器，并显示从 app1 和 app2 加载页面的链接。我希望这会有所帮助
如果你想访问最顶层路由器出口的所有组件，那么最好不要使用children，直接在path属性中使用/app1/details。如果你想让它成为孩子，那么在 Home 组件中你可以使用<router-outlet>，在应用程序组件中你可以调用/app1/details。希望这有效
我知道它应该与普通的角度应用程序一起工作。由于我使用的是单水疗框架并且应用程序作为包裹加载，因此不适用于此解决方案。

【解决方案2】：

我不知道你是否能解决你的问题，但这可以帮助你。正如这个链接提到的Configure routes，它的重要设置APP_BASE_HREF

所以在你的情况下这会起作用

providers: [{ provide: APP_BASE_HREF, useValue: '/app1' }] in app-routing.module.ts

如果您将APP_BASE_URL 设置为/，则必须在所有链接和路由中添加/app1 前缀。

【讨论】：