Angular subscribe to HTTPClient Observable, error req.url.toLowerCase is not a function

Question

I am using a service to retrieve data from a url, I am using that service in another component to display the data in Frontend...

My service:

getHttpData(baseurl, prefix?, suffix?, startTime?, endTime?, demo_id?)  {
    return this.http.get(baseurl+ prefix + suffix+ startTime + endTime + demo_id).map(
      (res: Response) => {return this.data = res;}
    )
  }

My component that uses the service:

ngOnInit() {
baseurl: 'http://localhost:6666/some/tra/la/la98321'; 

    this.data = this.genHttp.getHttpData(this.baseurl).subscribe(result => {
      this.data = result;
      console.log('Daten:',this.data);
    });

  }

But I get the following error in console:

core.js:1633 ERROR TypeError: req.url.toLowerCase is not a function at HttpXsrfInterceptor.push../node_modules/@angular/common/fesm5/http.js.HttpXsrfInterceptor.intercept (http.js:2027) at HttpInterceptorHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptorHandler.handle (http.js:1407) at HttpInterceptingHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptingHandler.handle (http.js:2080) at MergeMapSubscriber.project (http.js:1158) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:117) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:107) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93) at Observable._subscribe (scalar.js:5) at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:176) at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:161)

How would I have to do it to retrieve the data without an error?

Did you find solution? I faced the same error earlier. I wasn't adding api url properly and I think this happens when request string is not correct/properly written — Nodirabegimxonoyim

Rahul Cv Rahul Cv · Accepted Answer · 2018-08-03T13:28:15

Kindly try this and let me know

getHttpData(baseurl, prefix?, suffix?, startTime?, endTime?, demo_id?)  {
        const url= baseurl+ prefix + suffix+ startTime + endTime + demo_id+'';
        return this.http.get(url).map(
          (res: Response) => {return this.data = res;}
        )
      }

Angular subscribe to HTTPClient Observable, error req.url.toLowerCase is not a function

1 Answers