3

I am trying to navigate to a nested auxiliary route, and I keep getting the error:

ERROR Error: Uncaught (in promise):
Error: Cannot match any routes. URL Segment: 'sign-in'

The URL I am trying to navigate to:

http://localhost:4200/(modalcontainer:modals//modalview:sign-in)

My router config for the route looks like this:

{
  path: 'modals',
  component: ModalsComponent,
  outlet: 'modalcontainer',
  children: [
      {
          path: 'register',
          outlet: 'modalview',
          component: ModalRegisterComponent
      },
      {
          path: 'sign-in',
          outlet: 'modalview',
          component: ModalSigninComponent
      }
  ]
}

So there are 2 router-outlets which are modalcontainer and modalview. The latter is inside the template of ModalsComponent.

AppComponent

<router-outlet></router-outlet>
<router-outlet name="modalcontainer"></router-outlet>

ModalsComponent

<div class="overlay" (click)="close($event)">
  <router-outlet name="modalview"></router-outlet>
</div>

The modalcontainer populates ok, but as soon as I try to populate the modalview outlet, it errors.

Ways of navigating I have tried are:

  • [routerLink]="[{outlets: {'modalcontainer': ['modals'], 'modalview': ['register']}}]"
  • [routerLink]="[{outlets: {'modalcontainer': ['modals'], 'modalview': ['modals', 'register']}}]"
  • [routerLink]="['modals', {outlets: {'modalview': ['register']}}]"
  • Directly typing into the address bar http://localhost:4200/(modals:modals//modal:sign-in)
  • this.router.navigate([{outlets: {'modalcontainer': ['modals'], 'modalview': ['register']}}]);
  • this.router.navigateByUrl('/(modals:modals//modal:sign-in)');

Is it something in my configuration or the way I am accessing the URLs? Or is this a bug?

thorn0
  • 9,362
  • 3
  • 68
  • 96
DoubleA
  • 1,636
  • 14
  • 28

1 Answers1

1

I never found an answer to this - it seems like a bug in angular. For anyone who is having the same issue, my solution was to remove the nesting.

I removed the outlet of modalcontainer.

I added modalview directly into my main component instead.

I made the view that was previously injected into modalcontainer a component that accepted content and use it as the base commponent for each of my modalviews.

AppComponent

<router-outlet></router-outlet>
<router-outlet name="modalview"></router-outlet>

ModalsComponent

<div class="overlay" (click)="close($event)">
  <ng-content></ng-content>
</div>

ModalRegisterComponent

<modal-container>
  <h3>Register</h3>
  ...
</modal-container>

Router Config

{
    path: 'modals/register',
    outlet: 'modalview',
    component: ModalRegisterComponent
},
{
    path: 'modals/sign-in',
    outlet: 'modalview',
    component: ModalSigninComponent
}
DoubleA
  • 1,636
  • 14
  • 28