angular: Routing: Named outlets do not work properly as child routes

This is a major issue and should not be in the Backlog…

for 2 years -are you kidding me?

I believe I am running into the same issue. I have a named outlet that is a child of a path-less component. I have a Plunkr for it. The primary outlet seems to work (Layout A / B); but, the sibling named-outlet is breaking with an unexpected error message, Error: Cannot match any routes. URL Segment: 'layout-a'.

Plunkr: https://plnkr.co/edit/3HLVIYDdxycups61L8TA

+1

Same issue with Angular 8.2.8

same problem, child empty-path named route cant override parent’s. For example:

{ path: ‘’, component: HeaderComponent, outlet: ‘header’, }, { path: ‘about’, children: [ { path: ‘’, component: AboutComponent }, { path: ‘’, component: EmptyHeaderComponent, outlet: ‘header’, }, ] },

which causes error: Cannot activate an already activated outlet.

Seams still not being fixed with angular 9. Just posting to ensure that this is not closed like https://github.com/angular/angular/issues/10726

Hi there, still have that problem.

Child named outlet throws error Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘suboutlet’ Error: Cannot match any routes. URL Segment: ‘suboutlet’

Stackblitz example here https://stackblitz.com/edit/angular-6eip3n

The problem is tied to the fact that the RouterModule’s ‘routes’ is configured with an empty path:

const routes: Routes = [{
  path: '', // <-- This is empty. This is the problem.
  component: PageComponent,
  children: [{
    path: 'subpage',
    component: SubpageComponent
  }, {
    path: 'suboutlet',
    component: SuboutletComponent,
    outlet: 'sub'
  }]
}]

Give the root path a name:

const routes: Routes = [{
  path: 'main', // <-- Given a name 
  component: PageComponent,
  children: [{
    path: 'subpage',
    component: SubpageComponent
  }, {
    path: 'suboutlet',
    component: SuboutletComponent,
    outlet: 'sub'
  }]
}]

Then adjust your links in AppComponent’s template by adding ‘main’ to the links:

 <a [routerLink]="['main/subpage']">Go to page</a> // <-- "main" has been added (originally was: ['subpage'])
  <a [routerLink]="['main', {outlets: {sub: ['suboutlet']}}]">Go to page with outlet</a> // <-- "main" has been added (originally was: '')

After making those changes, your StackBlitz example works properly:

Same problem. All my routes are child routes. I can navigate them to the default page, but not to the named outlet.

Encountering same issue. Migrating to UI Router as this bug has been for almost a year now, and no workaround available.

Anyone figure out this issue? I am running into the same thing.

I managed to bypass this by placing the auxiliary outlet right inside the child component then creating an empty child route and it works. Here’s my code

const routes: Routes = [
  {
    path:'admin',
    component:AdminIndexComponent,
    children: [
      {
        path:'',
        redirectTo:'home',
        pathMatch:'full',
      },
      {
        path:'home',
        component:HomeComponent,
        children: [
          {
            path:'',
            component:NavbarHomeComponent,
            outlet:'menu'
          }
        ]
      },
      {
        path:'login',
        component:LoginComponent,
        children: [
          {
            path:'',
            component:NavbarOffComponent,
            outlet:'menu'
          }
        ]
      },
    ]
  },
];

for instance my path: 'home', component:HomeComponent is as follows:

<router-outlet name="menu"></router-outlet>
<div>
  <!-- Some content -->
</div>

hope my approach helps 😉

I struggled with this for a good while. I’m still not sure this is the best way, but here’s what I have:

When redirecting to child route that uses an outlet one always has to use /path/to/($outlet:$route) to correctly redirect to that route. I’m not entirely sure what the name for this concept is but here’s something about this in the docs: https://angular.io/guide/router#secondary-route-navigation-merging-routes-during-navigation

Props to the Tab-starter project for Ionic which got me on this trail: https://github.com/ionic-team/starters/blob/master/angular/official/tabs/src/app/tabs/tabs.router.module.ts

Also props to this Angular University tutorial which also effortlessly makes use of nested- and what it calls auxilliary-routes: https://blog.angular-university.io/angular-2-router-nested-routes-and-nested-auxiliary-routes-build-a-menu-navigation-system/

I’m still having some trouble setting up the router in the way I believe it would be correct, e.g. the child routes should not have to have to link to absolute routes all the time. This breaks encapsulation. E.g.:

parent-router.ts:

const routes: Routes = [
  {
    path: '',
    loadChildren: 'child-router.ts#ChildRouterModule',
    canActivate: [AuthGuardService],
    canLoad: [AuthGuardService],
  },
  { 
    path: 'auth/login',
    component: PageLoginComponent,
    canActivate: [AuthGuardReverseService],
  }
];

child-router.ts:

const routes: Routes = [
  {
    path: '',
    redirectTo: '/main/(expert-overview:expert)',
    pathMatch: 'full'
  },
  {
    path: 'main',
    component: TabsMainComponent,
    children: [
      {
        path: '',
        redirectTo: '/main/(expert-overview:expert)',
        pathMatch: 'full',
      },
      {
        path: 'expert',
        outlet: 'expert-overview',
        pathMatch: 'full',
        component: PageExpertOverviewComponent,
      },
    ]
  }
];

If I change redirectTo: '/main/(expert-overview:expert)', of the child-route to redirectTo: '(expert-overview:expert)', I get the error:

ERROR Error: Uncaught (in promise): Error: Only absolute redirects can have named outlets. redirectTo: ‘(expert-overview:expert)’ Error: Only absolute redirects can have named outlets. redirectTo: ‘(expert-overview:expert)’

I believe a child route should not have to know where it is ultimately located since, again, this breaks encapsulation and makes moving around routes unnecessarily hard.

For now I’m just happy that this works. Hope to see some of these things addressed at some point, though.

Some working code:

//this works
    this.router.navigate([{ outlets: { fullscreen: ['add'] } }], {
      relativeTo: this.route
    });

//this works too 
    this.router.navigate([
      '/account/my-properties',
      {
        outlets: { fullscreen: ['add'] }
      }
    ]);

Hi there, still have that problem.

Child named outlet throws error Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘suboutlet’ Error: Cannot match any routes. URL Segment: ‘suboutlet’

Stackblitz example here https://stackblitz.com/edit/angular-6eip3n

For anyone reading this using Angular 7, my answer here might be helpful: https://github.com/angular/angular/issues/10981#issuecomment-479482811

Work around the problem:

const routes: Routes = [
  { path: '', redirectTo: '../main' },
  { path: '../main', component: MainComponent, children: [
    { path: 'left', component: LeftComponent, outlet: 'left' },
    { path: 'right', component: RightComponent, outlet: 'right' },
  ]},
];

Another discover that I made is that the named router outlet should be inside the parent component of the child, cannot be in the parent of the parent (cannot be in the grandparent)