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

Answer 1

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})

Answer 2

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?

Answer 3

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")}
);