CODEWITHSUNDEEP
javascriptangularangular-ui-router
Marty B
Marty B

Reputation: 121

Angular 2.4.0 Router: Named route. Error: Cannot match any routes

I am trying to understand how named routes work. I am trying to establish 2 router outlets. Here is the actual error that I am getting...

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'song/edit/58ab2f3907dc8edf2c4e6971'

Here are code snippets that show what I am trying to do...

app.routing.ts

const appRoutes: Routes = [
  { path: 'songs', component: SongsComponent},
  { path: 'song/edit/:id', component: SongsComponent, outlet: "details" }
];

app.component.ts

@Component({
    template: `
        <button (click)="showDetail($event,song)">Show Detail</button>
        <router-outlet>Songs Here</router-outlet>
        <router-outlet name="details">Song Detail Here</router-outlet>
        `
    export class AppComponent {
        showDetail(event: any,song: Song) {
          event.stopPropagation();
          let link = ['/song/edit', song._id];
          this.router.navigate(link);
        }
    }
});

As a side note, what I ultimately want to do is keep the SongsComponent in the DOM when I navigate to the SongComponent. With 2 router-outlets the SongsComponent will remain in the DOM where I can hide and show it without having to regenerate the DOM for the SongsComponent if it used the same router-outlet as the SongComponent.

Upvotes: 1

Views: 404

Answers (1)

Madhu Ranjan
Madhu Ranjan

Reputation: 17894

Since you are trying to route to Named route, you need to mention same in the router command,

try below,

    showDetail(event: any,song: Song) {
      event.stopPropagation();
      let link = [{
        outlets: {
          details: ['song','edit',song._id]
        }
      }];
      this.router.navigate(link);
    }

Here is the Plunker!!

Hope this helps!!

Upvotes: 2

Related Questions