[Fixed] Angular Error: Uncaught (in promise): Error: Cannot match any routes

Issue

When I click the button in the car-detail.component.html file, I want to go to rental.component.html file. But I’m getting an error. How can I resolve this error?

My app-routing.module file

HTML file I added to the routerlink

The error I get when I click the button is this

Solution

Updating your html to routerLink="/rental/{{car.carId}}" should do the trick.

Here is a reference to the Angular docs for routerLink: https://angular.io/api/router/RouterLink#relative-link-paths

The first segment name can be prepended with /, ./, or ../.

• If the first segment begins with /, the router looks up the route from the root of the app.

• If the first segment begins with ./, or doesn’t begin with a slash, the router looks in the children of the current activated
  route.

• If the first segment begins with ../, the router goes up one level in the route tree.

So in your case, you are on the route cars/:carId, and since your routerLink doesn’t start with a /, ./ or ../ it is looking relative to the current route and looking at its children(which there aren’t any). You need to update it to look for a route at the root level. Adding the / at the beginning of the route will accomplish that.