Angular4 gives 404 for json data that exists and is publicly available

Question

I have a test data service written in Angular4. Currently, it 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();
}

}

Thanks to "Net Ninja" for this code, since this section of the application is basically exactly the same as the tutorial code (I prefer to have something that should be a well-known working example for testing when creating new applications) ...

The problem is that although there is certain test data on https://dinstruct-d4b62.firebaseio.com/.json which is not hidden or by the firewall in any way as long as I can tell (directly accessible via browser ), when an application enters a function fetchData(), it writes:

    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

. ?

Update:

, :

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

this.dataService.fetchData().subscribe((data) => console.log(data)); , , localhost:3000/dashboard , URL-. , , localhost:3000/dashboard . , , , console.logged 404.

, , 404.

Update:

, :

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

- 404.

:

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

In-memory-web-api "" . NgModule, Angular in-memory-web-api , , , .

InMemoryWebApiModule.forRoot(InMemoryDataService)

ngModule, !:)

Answer 2

import 'rxjs/add/operator/toPromise'; toPromise http get fetchData().

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

:

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