Angular 6：HttpClient获取JSON文件404错误

Question

使用HTTP客户端，我要检索一个JSON文件，该文件位于使用CLI生成的Angular 6 App中的assets目录中。虽然我知道有几个与此主题相关的questions (and answers)，但在我的案例中没有一个起作用。

下面是我的文件结构：

具体地说，我正在尝试检索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');
  }
}

我在组件中调用检索函数

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

不幸的是，当应用加载时，我看到以下内容：

因此，在这一点上，我不确定应该使用哪个URL来检索JSON。

编辑

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

我应该尝试从Dist目录中检索JSON吗？

我看到在构建应用程序时，位于src/assets文件夹中的JSON文件存储在dist/assets中。

最终编辑

如 user184994 所述，问题是我使用HttpClientInMemoryWebApiModule来拦截所有HTTP调用。结果，我无法检索我的JSON文件。在我注释掉HttpClientInMemoryWebApiModule后，我的工作正常，尽管它破坏了使用inMemoryApi的应用程序

Answer 1

原因是因为您的app.module正在导入HttpClientInMemoryWebApiModule，这会拦截所有HTTP调用。

与其尝试从项目中获取JSON，不如尝试从InMemoryDataService中获取JSON。

如果删除此导入，它将解决错误，尽管依赖该模块的所有调用都将失败（例如school和national请求）。

Answer 2

那是因为由于您位于service文件夹中，所以没有正确定义路径，因此您需要更改路径{../，这意味着落后一步}

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

}

Answer 3

几个注意事项...

运行服务器后，只需执行以下简单操作：将资源 URL 复制/粘贴到浏览器中，如下所示：

如果看到 JSON ，那么一切都很好，这意味着问题出在Angular应用程序的请求方式上。 要了解该问题，请在浏览器中打开“网络”部分（或控制台），最可能的问题是您如何请求文件。

例如，此：[cfati@cfati-ubtu16x64-0:~/Work/Dev/StackOverflow/q050964033]> python3 code.py Python 3.5.2 (default, Nov 23 2017, 16:37:01) [GCC 5.4.0 20160609] on linux From C - arg0: 42, alter_factor: 2 84 In another terminal, modify the C code (e.g. change `alter_factor`), recompile (gcc -fPIC -shared -o dll.so dll.c), and when done press ENTER here... From C - arg0: 42, alter_factor: 3 126
将很可能会转换为：
 this.http.get('http://localhost:4200/assets/us-all-all.geo.json');。

明白我的意思吗？

解决方案只是不调用资源  http://localhost:4200/http://localhost:4200/assets/us-all-all.geo.json'，
像：
http://localshost:4200