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
– Günter Zöchbauer, Commented Nov 8, 2016 at 9:57
I am calling from localhost to heroku app (myherokuapp.com). Is this related? — Yuvals
– Yuvals, Commented Nov 8, 2016 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
– Yuvals, Commented Nov 8, 2016 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
– Günter Zöchbauer, Commented Nov 8, 2016 at 10:14
Do you have <base href="/"> in your index.html? Does it work if you use "mybaseurl.com/hello" without the https://? — Matty
– Matty, Commented Nov 8, 2016 at 10:15

Yuvals · Accepted Answer · 2016-11-09 22:28:33Z

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 9, 2016 at 22:28

answered Nov 9, 2016 at 22:04

Yuvals

3,2866 gold badges36 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zasypin N.V. · Accepted Answer · 2016-11-08 10:02:57Z

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 8, 2016 at 10:02

Zasypin N.V.

2342 silver badges7 bronze badges

Comments

ranakrunal9 · Accepted Answer · 2016-11-08 09:57:05Z

0

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

answered Nov 8, 2016 at 9:57

ranakrunal9

13.6k3 gold badges44 silver badges43 bronze badges

Collectives™ on Stack Overflow

Cannot make a simple http GET call in Angular2

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related