Angular routerLink with named outlet (angular 5.0.2)

Question

I've read all the posts regarding this issue, but none of them work for me.

I have one app module, one routing module, and no other "modules". What I'm finding is that...

standard routes can be linked to from any component
routes with named outlets can only be linked to from the default app component only, but not other components
using routerLink to link to a named outlet from anything other than the app component results in "Error: Cannot match any routes. URL Segment:"

My route is this...

{path: 'hellocontent', component: ContentHelloWorldComponentComponent,
pathMatch: 'full', outlet: 'helloc'},

The routerLink is...

<a [routerLink]="[{ outlets: { helloc: ['hellocontent'] } }]">action</a>.

My router outlets are...

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

That router link works perfectly in a standard angular app.component.html, but NOT any other component. It always results in the "Error: Cannot match any routes. URL Segment:".

As soon as I remove the named outlet, and change the routerLink to... <a routerLink="hellocontent">action</a> in app component, or <a routerLink="/hellocontent">action</a> in another component, it works perfectly, but only in the primary outlet.

As it may be important, the components I'm linking from are of course defined in their own routes as well, for example...

{path: 'hello-world', component: HelloWorldComponentComponent}

Is this expected behaviour, that named outlets are only accessible from within the components that they are defined in? It's just weird that most of my html wrapper is within app.component.html, but anything other than the primary outlet will not work from another component.

Rahul Singh Rahul Singh · Accepted Answer · 2017-11-19T07:29:11

I think you are confused with Named Router Outlet. Router Outlet sits on Top of any component and is used to load Child Components.

The Problem is when you place it on top of a Component and then try and load the Route the Path defined has to be changed accordindly , It has to be a Route param rather than a Route as the route path becomes Nested if you want to load it for the component sub routes make use of children.

Working Example

For Child Routes

const routes: Routes = [
  { path: 'stuff', component: AComponent, children:[
    { path: ':index', component: BComponent},
    { path: ':index/edit', component: EditComponent, outlet:'editsection'}
  ]}
];

<p>
  Detail section works! {{ index }}
 <button type="button"
   [routerLink]="['/stuff',{outlets:{editsection:':index/edit'}}]">Edit</button>
</p>

Angular routerLink with named outlet (angular 5.0.2)

1 Answers