CODEWITHSUNDEEP
angularsingle-spa-angular
divya kamble
divya kamble

Reputation: 11

Single-spa application issue with child app routing

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.

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, but it doesn't work.

Upvotes: 1

Views: 370

Answers (1)

zcb
zcb

Reputation: 136

Apparently the Angular application isn't able to detect the route change when staying on the same application (app1).

A workaround is to register the same app multiple times for each route. For example in your root-config you'd have:

registerApplication({
  name: "app1/search",
  app: () => System.import("app1"),
  activeWhen: ["/app1/search"]
});

registerApplication({
  name: "app1/details",
  app: () => System.import("app1"),
  activeWhen: ["/app1/details"]
});

When navigating from /app1/search to /app1/details, the application is re-registered directly on the new route.

Upvotes: 0

Related Questions