ERROR Error: Uncaught (in promise): Error: Cannot match any routes. Any ideas how i could solve this-CodePudding

Im creating an angular recipe app. I want to be able to click on Full Recipe button in my saved recipe page and see my full recipe information. its working fine in the recipe item component but when i click on the same button in saved recipe page i get this error in my console and nothing is happening.

Error

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'saved-recipes/recipe/637876'
Error: Cannot match any routes. URL Segment: 'saved-recipes/recipe/637876'
    at ApplyRedirects.noMatchError (router.js:2623)
    at CatchSubscriber.selector (router.js:2605)
    at CatchSubscriber.error (catchError.js:27)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at ThrowIfEmptySubscriber._error (Subscriber.js:75)
    at ThrowIfEmptySubscriber.error (Subscriber.js:55)
    at TakeLastSubscriber._error (Subscriber.js:75)
    at resolvePromise (zone-evergreen.js:1213)
    at resolvePromise (zone-evergreen.js:1167)
    at zone-evergreen.js:1279
    at ZoneDelegate.invokeTask (zone-evergreen.js:406)
    at Object.onInvokeTask (core.js:28561)
    at ZoneDelegate.invokeTask (zone-evergreen.js:405)
    at Zone.runTask (zone-evergreen.js:178)
    at drainMicroTaskQueue (zone-evergreen.js:582)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:491)
    at invokeTask (zone-evergreen.js:1600)
defaultErrorLogger @ core.js:6210
handleError @ core.js:6258
next @ core.js:29181
schedulerFn @ core.js:25912
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25902
(anonymous) @ core.js:28600
invoke @ zone-evergreen.js:372
run @ zone-evergreen.js:134
runOutsideAngular @ core.js:28503
onHandleError @ core.js:28600
handleError @ zone-evergreen.js:376
runGuarded @ zone-evergreen.js:147
api.microtaskDrainDone @ zone-evergreen.js:1074
drainMicroTaskQueue @ zone-evergreen.js:589
invokeTask @ zone-evergreen.js:491
invokeTask @ zone-evergreen.js:1600
globalZoneAwareCallback @ zone-evergreen.js:1626

App Routing

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { RecipeDetailsComponent } from './recipe-details/recipe-details.component';
import { SavedRecipesComponent } from './saved-recipes/saved-recipes.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'recipe/:id', component: RecipeDetailsComponent },
  { path: 'saved-recipes', component: SavedRecipesComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Recipe item button

  <button  [routerLink]="['recipe', recipe.id]" style="text-decoration: none;">Show Full
    Recipe</button>

CodePudding user response：

You should try to start from the root when navigating to the recipe details:

[routerLink]="['/recipe', recipe.id]"