CODEWITHSUNDEEP
javascriptangularwebangular6
Konstantinos Kosyfarinis
Konstantinos Kosyfarinis

Reputation: 385

Cannot match any routes Error on Angular 6

I started learning how to make web apps with Angular 6, and at the moment I am trying to make something that's similar to Discord, just to see if I can actually make it.

At the moment I have these Routes:

const routes: Routes = [{
  path: '',
  component: MeComponent,
},{
  path: 'guild',
  component: MeComponent,
}, {
  path: 'guild/:guild_id',
  component: GuildComponent,
}, {
  path: 'guild/:guild_id/channel/:channel_id',
  component: ChannelComponent
}];

but, I can't seem to be able to get to the ChannelComponent, as every time I try to access a Channel, it just redirects me to the home page with this error: 

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'guild/5ba393943b445b2e942f31e4/channels/123'
Error: Cannot match any routes. URL Segment: 'guild/5ba393943b445b2e942f31e4/channels/123'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1382)
    at CatchSubscriber.selector (router.js:1363)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1382)
    at CatchSubscriber.selector (router.js:1363)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

I am not sure how to fix this problem, and even though I've tried using the children tag inside of each object so that it would be

'' -> Me
'guilds' -> Me (since no guild id was provided)
  - ':guild_id' -> GuildComp (shows the guild info)
        - 'channels' -> GuildComp (no channel id was provided)
        - 'channels/:channel_id' -> ChannelComp (shows the channel info)

But this did not work either.

Any suggestions?

I am still rather new with Angular, and web development in general, so please don't hate.

Upvotes: 0

Views: 394

Answers (1)

Anku Singh
Anku Singh

Reputation: 954

As i can see through error you are inputting

guild/5ba393943b445b2e942f31e4/channels/123 this url in your browser

but you have defined

guild/:guild_id/channel/:channel_id in your routes

so just remove 's' from channel in url then it will work

Upvotes: 3

Related Questions