Cannot make a simple http GET call in Angular2

Question

I am trying to make a simple http GET request from my Angular2 app:

    this.http.get("https://mybaseurl.com/hello")
  .map(res => res.json())
  .subscribe(
    function(response) { console.log("Success Response" + response)},
    function(error) { console.log("Error happened" + error)},
    function() { console.log("the subscription is completed")}
  );

The Node.js server is configured this way:

app.get('/hello', function(req, res) {
  res.send("hellow world");
});

When I make the call I keep getting this error:

    caused by: unable to parse url 'https://mybaseurl.com/hello'; original error: Cannot read property 'split' of undefined
   at InMemoryBackendService.parseUrl (in-memory-backend.service.ts:518)
    at InMemoryBackendService.handleRequest (in-memory-backend.service.ts:279)
    at InMemoryBackendService.createConnection (in-memory-backend.service.ts:240)

Any idea what am I doing wrong?

edit: pasting the entire class code:

    import {Component} from '@angular/core';
import {Auth} from './auth.service';
import {AuthHttp} from 'angular2-jwt';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'ping',
  templateUrl: 'app/ping.template.html'
})
export class ApiService {

  API_URL: string = 'https://myapp.herokuapp.com';
  message: string;

  constructor(private auth: Auth, private http: Http, private authHttp: AuthHttp) {}

  public ping() {

    this.http.get(`${this.API_URL}/hello`)
      .map(res => res.json())
      .subscribe((response) => { 
        console.log("Success Response" + response)
        },
        (error) => { console.log("Error happened" + error)},
        () => { console.log("the subscription is completed")}
    ); 
  }    
}

=====> This looks like a HUGE bug in Angular2 - all http requests return null, or an error message describing it is not in the required pattern. I someone has a working demo of HTTP GET I would love to see

Doesn't seem to be an issue with the code above. A suggestion - use `() =>` instead of `function()` because `function()` will cause `this.` not pointing to the current class instance anymore. Perhaps you have this already outside the code you posted which causes errors here. — Günter Zöchbauer, Nov 08 '16 at 09:57
I am calling from localhost to heroku app (https://myherokuapp.com). Is this related? — Yuvals, Nov 08 '16 at 10:01
@GünterZöchbauer this didn't help. The very weird thing is what I try to call a working service that returns a JSON, I get: `Error with status: 404 Not Found for URL: null` — Yuvals, Nov 08 '16 at 10:13
Hard to tell without seeing more code. I wouldn't expect to help in above code because there you don't use `this` (except with `this.http(...)`. — Günter Zöchbauer, Nov 08 '16 at 10:14
Do you have `````` in your index.html? Does it work if you use ```"mybaseurl.com/hello"``` without the ```https://```? — Matty, Nov 08 '16 at 10:15
i think here you find your answer http://stackoverflow.com/questions/36628496/anglarjs2-http-get-request-error-unable-to-parse-url-original-error-cann — Satendra, Nov 08 '16 at 10:55
This is not the case - I am not using `InMemoryBackendService`.. — Yuvals, Nov 08 '16 at 11:10
@GünterZöchbauer I have tried everything. Event the simplest http call is not working. regardless of what is the service. Is this related to the fact that I am calling from `localhost` to a remote server ? — Yuvals, Nov 08 '16 at 11:24
Have you tried using a literal string of the URL instead of `${this.API_URL}/hello`? — Günter Zöchbauer, Nov 08 '16 at 11:28
It's the second argument to the get call. Right after the url. — Silvermind, Nov 08 '16 at 12:05
@Silvermind This is done. But at this point I keep getting error `404 Not Found for URL: null` — Yuvals, Nov 08 '16 at 12:18
Can you try to reproduce in a Plunker? Plunker provides a ready to use Angular2 TS template under the `[ New | V ]` button — Günter Zöchbauer, Nov 08 '16 at 12:45
@GünterZöchbauer while working on the reproduction I found the issue - caused by using `InMemoryWebApiModule` (which has a very poor documentation in this case) — Yuvals, Nov 09 '16 at 22:22

Yuvals · Accepted Answer · 2016-11-09T22:28:33.367

2

It looks like using InMemoryWebApiModule.forRoot(InMemoryDataService) in @NgModule simultaneously with Http.get causes uncovered urls to return null and error.

Setting it this way worked for me: InMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true})

edited Nov 09 '16 at 22:28

answered Nov 09 '16 at 22:04

Yuvals

3,094
5
32
60

score 1 · Answer 2 · answered Nov 08 '16 at 10:02

1

Maybe it is beacause of your answer from server - you send string to client, but in map function you try to call res.json(). Can you comment map function call?

answered Nov 08 '16 at 10:02

Zasypin N.V.

224
2
7

score 0 · Answer 3 · answered Nov 08 '16 at 09:57

Check by using arrow function for success and error as below :

this.http.get("https://mybaseurl.com/hello")
  .map(res => res.json())
  .subscribe((response) => { console.log("Success Response" + response)},
    (error) => { console.log("Error happened" + error)},
    () => { console.log("the subscription is completed")}
);

Cannot make a simple http GET call in Angular2

3 Answers3