CODEWITHSUNDEEP
javascriptangularjsangular
geoctrl
geoctrl

Reputation: 685

Angular nested route with param "Cannot match any routes"

Here are the 3 routes I'm working on:

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 {}

Upvotes: 4

Views: 1980

Answers (1)

geoctrl
geoctrl

Reputation: 685

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?)

Upvotes: 3

Related Questions