CODEWITHSUNDEEP
angularangular2-routingangular-routing
JakeTheBraek
JakeTheBraek

Reputation: 261

Angular 4.3.x Routing Query Params failing

I have been trying to get query params working for the better part of two days and have had no luck. I have a very simple route def:

{ path: 'search', component: SearchComponent, canActivate: [ AuthGuard ] }

and I am trying to be able to come directly at the search page with query params that get looked at in the search controller and if they are there sets up the search properly from the query params:

http://localhost:5001/search?q=something&tt=234234234234

I have subscribed to the Activated route properly, I am even seeing the query params being parsed in console properly:

Object {q: "something", tt: "234234234234"}

but immediately after I am getting an error about not matching any route:

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'search%3Fq%3Dsomething%26tt%3D234234234234'
Error: Cannot match any routes. URL Segment: 'search%3Fq%3Dsomething%26tt%3D234234234234'

Which I do get, there certainly isn't a route like that, why aren't the query params being extracted from the main route segment? I am using a main app module that loads up other modules. In my search module I am including the router module like:

RouterModule.forChild(searchRoutes)

My main router module has an empty route and is router module looks like:

{ path: '', component: AppComponent, pathMatch: 'full' }

RouterModule.forRoot(appRoutes)

Both RouterModules are loaded at the end of imports. Thanks for any insight!

Upvotes: 0

Views: 1801

Answers (2)

DeborahK
DeborahK

Reputation: 60518

Query parameters should be set as part of the routerLink or .navigate methods as shown here:

enter image description here

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Which I do get, there certainly isn't a route like that, why aren't the query params being extracted from the main route segment?

This is because you're using pathMatch: 'full'. Just remove it and see it working.

Upvotes: 0

Related Questions