Angular 12 Error: Cannot match any routes. Navigate to named outlet NgRx Effect

Question

I am working with named router outlets with params and I need to navigate to it from an effect, but i am facing an error.

Does NgRx Router Store solve this problem? Or may I need a flag inside the store, then select it and do the navigation in a pipe?

My code:

In my routing module, the route to the named outlet is declared as a child.

...
path: '',
    component: SomeComponent,
    children: [
      {
        ...
      },
      {
        path: 'right/:elementId',
        component: RightContainerComponent,
        outlet: 'right-outlet',
      },
...

And I call to router navigate as: this.router.navigate([{outlets: {'right-outlet': ['right', itemId]}}], {relativeTo: this.route});

Also, I do the navigation from within a NgRx Effect, and I think it is there where I loose the context for the relativeTo.

Complete error log:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'right/some_id'
Error: Cannot match any routes. URL Segment: 'right/some_id'
    at ApplyRedirects.noMatchError (router.js:2658:1)
    at router.js:2640:1
    at catchError.js:10:38
    at OperatorSubscriber._error (OperatorSubscriber.js:19:1)
    at OperatorSubscriber.error (Subscriber.js:40:1)
    at OperatorSubscriber._error (Subscriber.js:64:1)
    at OperatorSubscriber.error (Subscriber.js:40:1)
    at OperatorSubscriber._error (Subscriber.js:64:1)
    at OperatorSubscriber.error (Subscriber.js:40:1)
    at OperatorSubscriber._error (Subscriber.js:64:1)
    at resolvePromise (zone.js:1213:1)
    at resolvePromise (zone.js:1167:1)
    at zone.js:1279:1
    at ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.js:28667:1)
    at ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at drainMicroTaskQueue (zone.js:582:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:491:1)
    at invokeTask (zone.js:1600:1)

Your named outlet must be inside the `SomeComponent` html, is this the case? — Chris Hamilton, Feb 10 '22 at 15:17
@ChrisHamilton yes, but I added more context to the question because I think the problem comes from where I am doing the navigation, and it is related with NgRx Effects Thank you — Camilaebf, Feb 10 '22 at 15:54
Perhaps you should show your html as well your your route calls, making sure to tell us where each call is performed. Or better yet, create a stackblitz that reproduces the problem. — Chris Hamilton, Feb 10 '22 at 15:58
The parent path is empty (the root), so you shouldn't need `relativeTo` at all. It defaults to the root. — Chris Hamilton, Feb 10 '22 at 16:01
thanks, I will try to reproduce it on stackblitz and update the question — Camilaebf, Feb 10 '22 at 16:16
I created a working example here: https://stackblitz.com/edit/angular-ivy-fhw8cq?file=src/app/app.component.html You can fork it to show your implementation. — Chris Hamilton, Feb 10 '22 at 17:55

score 1 · Accepted Answer · answered Mar 28 '22 at 18:24

There where many problems, although the main one was that I was trying to route to the named outlet from a service, and you cannot access to the current section of the route from there since the active route is just the root.

void this.router.navigate([{ outlets: { right: ['111'] } }], {
                relativeTo: this.route.parent, //this is important to set the context
              });

This code goes in the component from the module where I created the child routes.

Angular 12 Error: Cannot match any routes. Navigate to named outlet NgRx Effect

1 Answers1