Search code examples
angularnavigationngrxrouter

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

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)
Solution

  • 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.