Http get using HttpParams in angular2 returns a 404 error

Question

This might be an easy one and I just miss something. I have a GET endpoint and I am trying call it from an Angular UI. I want to send an timestamp to an endpoint as a parameter. I did the basic way:

    return this.http.get(this.Uri + academyId + "?dateWhenToCalculate=" + (dateWhenToCompute.getTime() / 1000).toString()).pipe(   
        map((res: Response) => res.json() as Model),
        catchError(this.handleError));

Using this I get this URL: http://host/api/route/1?dateWhenToCalculate=1572991200. My endpoint is like:

    [HttpGet]
    [GenericAuthorizeFilter]
    [Route("route/{academyId}")]
    public IHttpActionResult ComputePlayerScores(int academyId, string dateWhenToCalculate){....}

Using that way of creating the url all is working fine. But when I am trying to do it with HttpParams I keep getting a strange URL and of course an 404 error.

    let httpParams = new HttpParams()
        .set('dateWhenToCalculate', (dateWhenToCompute.getTime() / 1000).toString());

    return this.http.get(this.Uri+ academyId, { params: httpParams}).pipe(
        map((res: Response) => res.json() as Model),
        catchError(this.handleError));

Using HttpParams I got this

URL:http://host/api/route/1?updates=%7B%22param%22:%22dateWhenToCalculate%22,%22value%22:%221573423200%22,%22op%22:%22s%22%7D&cloneFrom=%7B%22updates%22:null,%22cloneFrom%22:null,%22encoder%22:%7B%7D,%22map%22:null%7D&encoder=%7B%7D&map=null

Did I miss something?

Answer 1

This is the minimum amount of code needs to be used for HttpParams. Here I am using a test api but change that part with your url

In AppModule of app.module.ts file

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [ HttpClientModule ],
  ......
})
export class AppModule { }

Need following imports first on the component or service:

import { HttpClient } from '@angular/common/http';
import { HttpParams } from "@angular/common/http";

Then use HttpParams like bellow code:

const options =  { params: new HttpParams().set('postId', '1') };
this.http.get('https://jsonplaceholder.typicode.com/comments' , options)
    .subscribe((data)=> {console.log(data)});

Also you could try with following way instead of new HttpParams().set('postId', '1')

const options =  { params: new HttpParams({fromString: 'postId=1'}) };

Working example is here

---

Following part is not tested by me. I found it from this link. It is kind of a solutions for query parameter was not encoded as expected.

1. Create a class which implements HttpParameterCodec. Alternatively, you could also extend HttpUrlEncodingCodec.
2. The encodeKey and encodeValue functions need to encode the value. Vanilla JavaScript allows you to use encodeURIComponent.
3. Use the custom encoder class when creating new HttpParams: new HttpParams({ encoder: new CustomHttpParamEncoder() }). The important part is the usage of encodeURIComponent, which is a vanilla JavaScript function to encode a string.

---

Custom decoder could looks like:

import { HttpParameterCodec } from '@angular/common/http';
export class CustomHttpParamEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }
  encodeValue(value: string): string {
    return encodeURIComponent(value);
  }
  decodeKey(key: string): string {
    return decodeURIComponent(key);
  }
  decodeValue(value: string): string {
    return decodeURIComponent(value);
  }
}

Hope this will help you!

Answer 2

Your endpoint is route/{academyId} but you are calling http:/host/api/route/endpoint/1 which has the endpoint token between route and your id. Please remove this endpoint token within your http request.

You only have / after http uri. Please double it.