Error: Cannot match any routes when using router outlet name in Angular

Question

I'm using angular 6 and I want to create modal with route, to do this i use router outlet named but when i try to go on the route of the modal an error message is coming :

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'profile' Error: Cannot match any routes. URL Segment: 'profile'

My 2 router outlet are in the same location


export const routes: Routes = [
  {
    path: '', component: LayoutComponent,
    canActivate: [AuthenticationGuard, AuthorizationGuard],
    canActivateChild: [AuthenticationGuard, AuthorizationGuard],
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'deals',
      },
      {
        path: 'deals',
        component: DealsComponent,
      },
      {
        outlet: 'modal',
        path: 'profile',
        component: ProfileComponent,
        data: {
          title: 'My Profile',
          sidebar: {
            category: 'profile',
            text: 'My Profile',
            icon: 'person',
          },
        }
      },

I'm using [routerLink]="['', {outlets: { modal: 'profile' } } ]" to go on the link.

I made a working exemple of the issue : https://stackblitz.com/edit/angular-asicvf

Do someone can help me pls? Thanks

ahbon ahbon · Accepted Answer · 2019-04-15T13:19:51

I would have used an array for the modal object

<a [routerLink]="['', {outlets: { modal: ['profile'] }} ]">LINK</a>

You should also change the order of your children routes and put the redirectTo at the end of the array because it will match all your routes before Angular can read the others.

Actually, your route is not well formatted. You should have all your routes at the same level and not use the childrenproperty of your main route. Something like:

export const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'deals', component: HelloComponent },
  {
    outlet: 'modal',
    path: 'profile',
    component: Hello2Component,
    data: {
      title: 'My Profile',
      sidebar: {
        category: 'profile',
        text: 'My Profile',
        icon: 'person',
      },
    }
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'deals',
  },
];

I updated your stackblitz with the correct solution here

Error: Cannot match any routes when using router outlet name in Angular

1 Answers