Angular 6: HttpClient Get JSON File 404 Error

Question

Using the HTTP Client, I'm to retrieve a JSON file which resides the assets directory within my Angular 6 App which was generated using the CLI. While I know there are a couple related questions (and answers) related to this topic, but none have worked in my case.

Below is my file structure:

Specifically I'm trying to retrieve us-all-all.geo.json

angular.json

 "projects": {
    "ng-ngrx-highcharts-example": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng-ngrx-highcharts-example",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src",
              "src/assets",
              "src/favicon.ico",
              "src/assets/us-all-all.geo.json"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },

map-data.service.ts

import { Injectable } from '@angular/core';
import { Observable, of, from } from 'rxjs';
import * as $ from 'jquery';
import { $q } from '@uirouter/angular';

import { catchError, map, tap } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class MapDataService {

  mapData: any;

  mapDataObservable: Observable<any>;

  constructor(private http: HttpClient) {
  }

  retrieveNationalMapData(): Observable<any> {
    return this.http.get('./assets/us-all-all.geo.json');

  }
  retrieveNationalCountyMapDataAssets(): Observable<any> {
    return this.http.get('assets/us-all-all.geo.json');
  }

  retrieveNationalCountyMapDataLocalHost(): Observable<any> {
    return this.http.get('http://localhost:4200/assets/us-all-all.geo.json');
  }
}

I call the retrieve function in my component

highchart-map.component.ts

$q.all([
      this.mapDataService.retrieveNationalMapData().subscribe((nationalMapData) => {
        console.log(nationalMapData);
        mapData.national = nationalMapData;
      }),
      this.mapDataService.retrieveNationalCountyMapDataAssets().subscribe((nationalCountyMapData) => {
        console.log(nationalCountyMapData);
        mapData.national = nationalCountyMapData;
      }),
       this.mapDataService.retrieveNationalCountyMapDataLocalHost().subscribe((nationalCountyMapData) => {
        console.log(nationalCountyMapData);
        mapData.national = nationalCountyMapData;
      })

Unfortunately when the app loads I see the following:

So at this point I'm not sure what url I should be using to retrieve the JSON.

EDIT

Link to project of GitHub:ng-ngrx-highcharts-example

Should I be trying retrieve the JSON from the Dist directory?

I see that the JSON files located in src/assets folder are stored in the dist/assets when the app is built.

Final Edit

As stated by user184994, the issue was my use of the HttpClientInMemoryWebApiModule which is intercepting any and all HTTP calls. As a result, I was unable to retrieve my JSON files. After I commented out HttpClientInMemoryWebApiModule my gets were working fine, although it breaks my app which utilizes the inMemoryApi

Have you restarted the server (i.e. stop and call ng-serve again) since adding the JSON file? — user184994
– user184994, Commented Jun 21, 2018 at 17:21
I restarted the server each time I updated the angular.json file w/ ng serve -o. Also I would delete this dist folder and rebuild using ng build — TYMG
– TYMG, Commented Jun 21, 2018 at 18:00
Strange, I can't reproduce the issue... Is this hosted in GitHub or anything where we can take a closer look and run the code? — user184994
– user184994, Commented Jun 21, 2018 at 18:03
return this.http.get('assets/us-all-all.geo.json') should have worked fine. It's strange that it's not working that way. I guess it has to do something with the @uirouter. Put this function in ngOnint and check if you're able to get a response. That way it can be confirmed if @uirouter is involved or not — cRAN
– cRAN, Commented Jun 21, 2018 at 18:13
@TYMG If you open localhost:4200/assets/us-all-all.geo.json in your browser, can you see the JSON? — user184994
– user184994, Commented Jun 21, 2018 at 18:39

user184994 · Accepted Answer · 2018-06-21 19:07:37Z

5

The reason is because your app.module is importing HttpClientInMemoryWebApiModule, which intercepts any HTTP calls. Instead of trying to get the JSON from your project, it is instead trying to get it from the InMemoryDataService.

If you remove this import, it should solve the error, although any calls you have that rely on that module will then fail (such as the school, and national requests).

answered Jun 21, 2018 at 19:07

user184994

18.3k2 gold badges51 silver badges54 bronze badges

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

2 Comments

TYMG Over a year ago

This was the issue! I commented out HttpClientInMemoryWebApiModule and the JSON get requests were working. I'll take another crack at retrieving the JSON from InMemoryDataService but it's currently 24k + lines... Thanks and Accepted Answer!!

Packet Tracer Over a year ago

@TYMG you can configure it to pass through unknown requests, like this: InMemoryDataService, {dataEncapsulation: false, passThruUnknownUrl: true} , taken from this issue github.com/ngx-translate/core/issues/853

Chellappan வ · Accepted Answer · 2018-06-21 17:31:47Z

1

That's because you have not defining your path properly since you are in the service folder so you need to change your path {../ which means one step behind}

export class MapDataService {

  mapData: any;

  mapDataObservable: Observable<any>;

  constructor(private http: HttpClient) {
  }

  retrieveNationalMapData(): Observable<any> {
    return this.http.get('../../assets/us-all-all.geo.json');

  }
  retrieveNationalCountyMapDataAssets(): Observable<any> {
    return this.http.get('../../assets/us-all-all.geo.json');
  }

}

answered Jun 21, 2018 at 17:31

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

7 Comments

user184994 Over a year ago

In the 3rd example (retrieveNationalCountyMapDataLocalHost) it's using the absolute url though...

Chellappan வ Over a year ago

no while web pack bundling the code it will check different path

user184994 Over a year ago

You can see in the screenshot that it's clearly calling localhost:4200/assets/us-all-all.geo.json

Chellappan வ Over a year ago

404 means folder or source not found

TYMG Over a year ago

@ChellappanV I tried your solution, changing the Url in the Http.Get to this.http.get('../../assets/us-all-all.geo.json');, still 404

|

Arsen Khachaturyan · Accepted Answer · 2018-09-10 09:37:48Z

1

Several notes...

After running the server, just do a simple thing: copy/paste your resource URL into the browser, like this:

If you see the JSON then everything is fine, it means the problem is with how it is requesting from the Angular app. To understand the issue open Network section (or console) in your browser, most probably the issue is that how you are requesting the file.

For example, this: this.http.get('http://localhost:4200/assets/us-all-all.geo.json');
will most probably be converted to:
http://localhost:4200/http://localhost:4200/assets/us-all-all.geo.json'.

See my point?

Solution is simply to call the resource without http://localshost:4200,
like:
this.http.get('assets/us-all-all.geo.json');

edited Sep 10, 2018 at 9:37

answered Jun 22, 2018 at 11:19

Arsen Khachaturyan

8,4304 gold badges46 silver badges47 bronze badges

Collectives™ on Stack Overflow

Angular 6: HttpClient Get JSON File 404 Error

3 Answers 3

2 Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related