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

我在我的组件中调用了retrieve函数

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获取它。

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

Answer 2

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

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应用程序请求的。要了解问题，请在浏览器中打开网络部分（或控制台），最有可能的问题是您如何请求文件。

例如，这：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的情况下调用资源， 喜欢： this.http.get('assets/us-all-all.geo.json');