tonylefler tonylefler -4 years ago 170
Javascript Question

Angular nested route with param "Cannot match any routes"

Here are the 3 routes I'm working on:


  • game/:id

  • game/:id/pricing

  • game/:id/history



I'd like the
game/:id
to be the parent view, and house a
<router-outlet>
for the children to render inside of it. However, I keep getting this error: Cannot match any routes. URL Segment: 'game/1/history'.

Any help is appreciated.

Router Module:



import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { CommonModule } from "@angular/common";
import { GameComponent } from "./game.component";
import { GamePricingComponent } from './game-pricing.component';
import { GameHistoryComponent } from './game-history.component';

const routes: Routes = [
{ path: 'game/:id', component: GameComponent, children: [
{ path: 'pricing', component: GamePricingComponent, outlet: 'game' },
{ path: 'history', component: GameHistoryComponent, outlet: 'game' }
]},
];

@NgModule({
imports: [
RouterModule.forRoot(routes),
CommonModule
],
declarations: [
GameComponent,
GamePricingComponent,
GameHistoryComponent
],
exports: [
RouterModule
]
})
export class RoutingModule {}


GameComponent:



The
game/:id
route is the parent view, which has a
<router-outlet name="game">
inside of it for the children (pricing & history) to render into.

import { Component } from "@angular/core";

@Component({
template: `
<div>Game stuff</div>
<router-outlet name="game"></router-outlet>
`
})
export class GameComponent {}


RootModule



import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RoutingModule } from "./routing.module";

@NgModule({
imports: [
BrowserModule,
RoutingModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export default class AppModule { }


AppComponent



import { Component } from '@angular/core';

@Component({
selector: 'app',
template: `
<div class="base">
<router-outlet></router-outlet>
</div>
`,
})
export class AppComponent {}

Answer Source

After a (long) while, I was able to solve this by removing the naming for the <router-outlet>. Turns out, single child router outlets 'just work' - so naming isn't required...

However, as of writing this, I'm still unaware of how to use router outlet naming within child routes. If anyone wants to elaborate here, I'd be more than appreciative. (maybe naming only works if there's more than 1 outlet at the same level?)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download