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.