How to use Required and Query parameters together - Query parameters are null

Question

So I am trying to navigate to a timesheet route.

The route takes a name for an employee as a router parameter, and a start and end date as query parameters.

this.router.navigate(['/timesheet', this.name], { queryParams: { start_date: startString, end_date: endString }});

My route.js looks like this:

{
  path: 'timesheet/:artistName',
  component: TimesheetComponent,
  canActivate: [RoleGuardService],
  data: {roles: ['consume:admin', 'consume:exec', 'consume:producer' ]},
  resolve: {
    timesheet: TimesheetResolve
  },
}

The URL that is formed when I try and hit the REST backend has null values in for start_date and end_date.

GET http://localhost:4200/api/v1/timesheet/artist/Jimmy?start_date=null&end_date=null 500 (Internal Server Error)

I have checked that both the values i am passing for start and end date are non null.

Any ideas what I am doing wrong here? Thanks in advance...

check first `start_date` value is available on the time of you can use it. — Abhishek, Sep 03 '19 at 14:16
it seems that both the variables startString and endString are not properly formed. Can you check their values? — Gabriele Magno, Sep 03 '19 at 14:23
How do you call your rest service? I think you need read from url your query parameters — Miguel Pinto, Sep 03 '19 at 14:24
@Abhishek but start_date and end_date values I use are non-null — Tom O'Brien, Sep 03 '19 at 14:51
@GabrieleMagno both are properly formed, and their values have been checked — Tom O'Brien, Sep 03 '19 at 14:51
@sabithpockerno - it is timesheet/jimmy?start_date="12-Aug-2019"&end_date="12-Sep-2019" — Tom O'Brien, Sep 03 '19 at 15:12

score 1 · Answer 1 · answered Sep 04 '19 at 07:42

Can you try with hardcoded values? if it works, then there's a problem between where you assign the values to the variables and where you call this.router.

this.router.navigate(['/timesheet', this.name], { queryParams: { start_date:'12-Aug-2019', end_date:'12-Sep-2019' }});

check how the navbar displays the http request, it should be:

http://localhost:4200/api/v1/timesheet/artist/Jimmy?start_date=12-Aug-2019&end_date=12-Sep-2019

if that isn't working either you could replicate the code on stackblitz so we can have a look at it.

It shouldn't be a problem of the router because the rest of the url is properly formed.

score 0 · Answer 2 · answered Sep 04 '19 at 15:58

This was caused by the resolver I was using was trying get the query parameters using

return this.artistService.getTimesheet(route.paramMap.get('artistName'),
  route.paramMap.get('start_date'), route.paramMap.get('end_date'));

Instead of trying this:

return this.artistService.getTimesheet(route.paramMap.get('artistName'),
  route.queryParamMap.get('start_date'), route.queryParamMap.get('end_date'));

How to use Required and Query parameters together - Query parameters are null

2 Answers2