Angular 8 cannot match nested route

1
votes

I'm using Angular 8 and am having trouble trying to get a nested route to work. The error I get is:

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'product/colours'

I have the AppComponent HTML which loads my child component 'product' without issue.

app.component.html

<router-outlet></router-outlet>

Inside my 'product' component I want to include a nested component called 'colours'.

colours.component.html

<a routerLinkActive="is-active" routerLink="colours">Colours</a>
<router-outlet name="nested"></router-outlet>

I added a new nested route like this:

app-routing.module.ts

  {
    path: 'product',
    component: ProductComponent,
    children: [
      {
        path: 'colours',
        component: ColoursComponent,
        outlet: 'nested'
      }
    ]
  }

Any advice?

2
angular
do you need the named outlet for some reason? is there also a primary outlet in there forcing you to use a named outlet? - bryan60
I think you need something like /product/colours otherwise it will match just /colours. - Michelangelo
I have a primary outlet in the same view. If I have to define multiple routes without an outlet then I will have to duplicate template code for each `product/[nested]' view. - dom_ahdigital
unclear what you mean by "view"... it's fine for a parent to have a primary outlet and a child to have one as well, it's fairly common. You only NEED named outlets if you have multiple outlets in the same COMPONENT. you should probably post more of this code tbh and what you're actually trying to accomplish as it looks like you're taking a questionable approach. named outlets were a mistake in angular IMO and should be avoided - bryan60
@bryan60 totally agree, named outlets are confusing and to be honest I never used them. It just complicates stuff when a simple component loading will do just fine. - Michelangelo

2 Answers

2
votes

When using the RouterLink attribute, by default it routes to the primary router. You dont have a route product/colours on your primary router.

You have to let the RouterLink attribute know what outlet you want to use (if not the primary)

<a 
  routerLinkActive="is-active" 
  [routerLink]="[{ outlets: { nested: ['colours'] } }]"
>
  Colours
</a>

You can find more on secondary route navigation in the angular docs

-1
votes

i don't know what else you have going on that may be preventing you from doing this, but from the code presented here, you don't seem to have a need to use named outlets, so you could just do this in colours:

<a routerLinkActive="is-active" routerLink="colours">Colours</a>
<router-outlet></router-outlet>

and define the route without an outlet:

  {
    path: 'colours',
    component: ColoursComponent
  }