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

Question

使用HTTP客户端，我将检索一个JSON文件，该文件位于assets使用CLI生成的Angular 6 App中的目录中。虽然我知道有几个与此主题相关的问题（和答案），但是在我的情况下没有一个有效。

下面是我的文件结构：

具体来说，我正在尝试检索 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。

编辑

链接到GitHub的项目：ng-ngrx-highcharts-example

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

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

最终编辑

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

Answer 1

原因是因为您app.module正在导入HttpClientInMemoryWebApiModule，它会拦截所有HTTP调用。与其尝试从您的项目中获取JSON，不如尝试从中获取JSON InMemoryDataService。

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