Single-spa angular app child routing doesn't work

user_5960957 0
Viewed 1591

I have set up a single-spa root-config app and other 2 child apps implemented in angular (using parcels). And I'm trying to navigate to child app routes from root app, it works for the first route /app1, but from that if I want to navigate to /app1/search or /app1/details it doesn't load the associated component, although url is changed.

If I initially hit /app1/search it loads search component, but after that if I try to navigate to other routes like /app1/<any-route> it changes the url, but doesn't load the components.

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 route module:

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 { }
single-spa-angular single-spa micro-frontend angular-routing angular
2 Answers

This will work

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

if you want to create a children then add

home.component.html

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

Then use the router like below.

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

i dont know if you were able your issue, but this will could help you. As this link mentioned Configure routes, its important set the APP_BASE_HREF

so in your case this will work

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

if you set your APP_BASE_URL with / you'll have to add /app1 prefix in all links and routes.

user_124489990
Related