Angular2 http.get(url) is returning 404 on a valid

Question

I have an Angular2 App running that is attempting to make a call to my Django server.

I have a function called getObjects That makes the external API call and should return a list of objects. As a bit of debugging I am currently making a XMLHttpRequest, which correctly grabs the data from my server.

However, whenever I attempt to make a request using Http.http.get(url) I see a 404 error. I've tried fiddling with a few of the HTTP headers, as well as playing around with some settings on my server, but I cannot figure out what is wrong.

I assume that the Http.http.get() method is doing something funky behind the scenes that I am unaware of. The odd thing is that my browser dev-network tab doesn't even show any attempt to reach my external browser.

Any help in the matter would be much appreciated, I can provide any additional debug information and could really use a point in the right direction.

ng --version
angular-cli: 1.0.0-beta.24
node: 6.9.1
os: win32 x64
@angular/common: 2.4.3
@angular/compiler: 2.4.3
@angular/core: 2.4.3
@angular/forms: 2.4.3
@angular/http: 2.4.3
@angular/platform-browser: 2.4.3
@angular/platform-browser-dynamic: 2.4.3
@angular/router: 3.4.3
@angular/compiler-cli: 2.4.3

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

...
  constructor(private http: Http) { }

  getObjects(): Promise<Object[]> {
    function httpGet(theUrl)
    {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
        xmlHttp.send( null );
        return xmlHttp.responseText;
    }

    var x = httpGet(this.myUrl);
    console.log(x); // This works perfectly and I see an entry on my server log

    this.http.get(this.myUrl)
    .subscribe(res => console.log(res));// This throws a 404 and I see no entry on my server logs nor  in my browser network tab

    var headers = new Headers({'content-type': 'application/json'});

    this.http.get(this.myUrl, {headers: headers})
    .subscribe(res => console.log(res));// This throws a 404 and I see no entry on my server logs nor  in my browser network tab

    return this.http.get(this.myUrl)
      .toPromise()
      .then(response => response.json().data as Object[])
      .catch(this.handleError); //The original code that worked on an internal in-memory-api
  }

Answer 1

This can be an issue with angular2-in-memory-web-api. I had the same issue, but when I removed the InMemoryWebApiModule from the AppModule, the API calls worked perfectly.

Answer 2

I was able to find a working fix in another stack overflow question:

Angular 2 HTTP GET returning URL null

The problem was with the InMemoryWebApiModule and the solution was to make the following config modification to my app.module.ts file:

- InMemoryWebApiModule.forRoot(InMemoryDataService),
+ InMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true}),

Making this small config change caused the application to work.

Answer 3

In fact there is no 404, because you are not executing your requests. You need to subscribe() to them, to execute them. Few examples:

this.http.get(this.myUrl).subscribe(res => console.log(res));
this.http.get(this.myUrl).subscribe();
let response: Observable<Response> = this.http.get(this.myUrl);
response.subscribe();
response.subscribe(v => console.log(v);

You can read about observables here: http://reactivex.io/rxjs/manual/index.html