Angular4 giving 404 for json data that exists and is publicly serving

Question

I have a test data service written in Angular4. It currently looks like this:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/toPromise'


@Injectable()
export class DataService {

  constructor(private http: Http) { }

fetchData(){
  return this.http.get('https://dinstruct-d4b62.firebaseio.com/.json').map(
    (res) => res.json()).toPromise();
}

}

With thanks to "The Net Ninja" for this code, as this section of the app is basically exactly the same as the tutorial code (I prefer to have something that should be a known working example for testing purposes when building new apps)...

The problem is that though there is definitely test data at https://dinstruct-d4b62.firebaseio.com/.json, which is not hidden or firewalled in any way as far as I can tell (directly accessible via browser), when the app enters the fetchData() function, it logs:

    ERROR Error: Uncaught (in promise): Error: Response with status: 404 Not Found for URL: https://dinstruct-d4b62.firebaseio.com/.json
Error: Response with status: 404 Not Found for URL: https://dinstruct-d4b62.firebaseio.com/.json

at the start of the stack trace. What could be going on here?

Update:

I also noticed that in the calling function:

ngOnInit(): void {
  this.customerService.getCustomers()
      .then(customers => this.customers = customers);
  this.dataService.fetchData().subscribe(
    (data) => console.log(data));
}

When I have this.dataService.fetchData().subscribe((data) => console.log(data)); in the code, clicking a link to the dashboard it momentarily shows localhost:3000/dashboard in the browser address bar but then immediate flicks back to showing the previous URL. However, when I remove this line, the app correctly shows localhost:3000/dashboard the whole time. I assume this is probably related to the console.logged 404 error.

Also perplexing is that when I check the network traffic, no 404 is shown.

Update:

When the observable is change to a promise I get this output in the console:

Response {_body: Object, status: 404, ok: false, statusText: "Not Found", headers: Headers…}
headers
:
Headers
ok
:
false
status
:
404
statusText
:
"Not Found"
type
:
null
url
:
"https://dinstruct-d4b62.firebaseio.com/.json"
_body
:
Object
error
:
"Collection 'undefined' not found"
__proto__
:
Object
constructor
:
function Object()
hasOwnProperty
:
function hasOwnProperty()
isPrototypeOf
:
function isPrototypeOf()
propertyIsEnumerable
:
function propertyIsEnumerable()
toLocaleString
:
function toLocaleString()
toString
:
function ()
valueOf
:
function valueOf()
__defineGetter__
:
function __defineGetter__()
__defineSetter__
:
function __defineSetter__()
__lookupGetter__
:
function __lookupGetter__()
__lookupSetter__
:
function __lookupSetter__()
get __proto__
:
function __proto__()
set __proto__
:
function __proto__()
__proto__
:
Body
constructor
:
function Response(responseOptions)
toString
:
function ()
__proto__
:
Object

There is still no 404 in the network traffic.

I have now updated the calling function to this:

ngOnInit(): void {
  this.customerService.getCustomers()
      .then(customers => this.customers = customers);
  this.dataService.fetchData().then((data) => {
       console.log(data);
  })
       .catch((error) => console.error(error));
}

Answer 1

The in-memory-web-api will interfere with your "outside" requests. You need to remove that from your NgModule, since otherwise Angular is always trying to look in in-memory-web-api for your requests, which obviously doesn't exist in that place. So removing the equivalent of

InMemoryWebApiModule.forRoot(InMemoryDataService)

from your ngModule and that should clear it out! :)

Answer 2

Try importing import 'rxjs/add/operator/toPromise'; and add toPromise to the end of the http get in the the fetchData() function.

fetchData(){
    return this.http.get('https://dinstruct-d4b62.firebaseio.com/.json').map(
    (res) => res.json()).toPromise();
}

Your calling function should then look like this:

this.dataService.fetchData()
    .then((data) => {
        console.log(data);
    })
    .catch((error) => console.error(error)); 

Answer 3

In AppModule.ts where you have imports[], you would have imported the HttpClientInMemoryWebApiModule like =>

---

HttpClientInMemoryWebApiModule
    .forRoot(
      InMemoryService, { dataEncapsulation: false }
    ), 

---

Now What is happening here is that your application is searching for the public API in the in-memory web API only to solve this just tell In memory module not to behave like that by setting the passing though unknown Url true like =>

---

HttpClientInMemoryWebApiModule
    .forRoot(
      InMemoryService, { dataEncapsulation: false, passThruUnknownUrl: true }
    )