angular cannot match routes

Question

I want to create a menu in a angular application with rounterlinks. My routerlinks looks so:

          <li>
            <a routerLink="/overview" [queryParams]="{categorie:'Shopping',subcategorie:'topcategorie'}">
              Shopping</a>
          </li>

If I click on the button I get the following error.

core.js:6241 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'overview'
Error: Cannot match any routes. URL Segment: 'overview'
    at ApplyRedirects.noMatchError (router.js:4389)
    at CatchSubscriber.selector (router.js:4353)
    at CatchSubscriber.error (catchError.js:29)
    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 MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at ThrowIfEmptySubscriber._error (Subscriber.js:75)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41634)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

My router definitions are these:

const routes: Routes = [

  { path: 'overview/:categorie/:subcategorie', component: OverviewComponent },
  { path: 'overview/:brand', component: OverviewComponent },
  { path: 'overview/:product', component: OverviewComponent },
  { path: 'coupons', component: CouponComponent },
  { path: 'impressum', component: ImpressumComponent },
  { path: 'datenschutz', component: DatenschutzComponent },
  { path: 'details/:id', component: ProductDetailsComponent },
  { path: 'home', component: LandingpageComponent },
  { path: '', component: LandingpageComponent }
];

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

Has anyone an idea why I get this error ?

score 0 · Answer 1 · answered Oct 26 '20 at 22:16

It's because you're setting queryParams instead of using the routes you have set up. Link to routerLink="/overview/shopping/topcategorie" (if you want /overview to work { path: 'overview', component: StackOverflowComponent } (or do a redirect to a default category/brand/product route

(the a tag now links to overview?categorie=Shopping&subcategorie=topcategorie)

score 0 · Answer 2 · answered Oct 27 '20 at 00:25

0

Try this way:

<a [routerLink]="['/overview', 'Shopping', 'topcategorie']">Shopping</a>

answered Oct 27 '20 at 00:25

Useme Alehosaini

2,998
6
18
26

score 0 · Answer 3 · answered Oct 27 '20 at 00:26

0

Use this instead:

<a [routerLink]="['overview', 'Shopping', 'topcategorie']">
   Shopping
</a>

or

<a routerLink="overview/Shopping/topcategorie">
   Shopping
</a>

answered Oct 27 '20 at 00:26

KShewengger

7,853
3
24
36

score 0 · Answer 4 · answered Oct 27 '20 at 05:20

In the App routing module you haven't declared a route that is matching to your requirement. You have declared path variable in your routing module

  { path: 'overview/:categorie/:subcategorie', component: OverviewComponent },
  { path: 'overview/:brand', component: OverviewComponent },
  { path: 'overview/:product', component: OverviewComponent },

But you are trying for query params in the HTML.

<a routerLink="/overview" [queryParams]="{categorie:'Shopping',subcategorie:'topcategorie'}">
              Shopping</a>

Try using the below implementation.

in .ts

{ path: 'overview', component: OverviewComponent },

in .HTML

 <a [routerLink]="/overview" [queryParams]="{categorie:'Shopping',subcategorie:'topcategorie'}">
                  Shopping</a>

The resultant URL will be

overview?categorie=Shopping&subcategorie=topcategorie

The above is a query params.

angular cannot match routes

4 Answers4