Angular6：HttpClient获取JSON文件404错误

Question

使用 HTTP 客户端，我将检索一个 JSON 文件，该文件位于我的 Angular 6 应用程序中的 assets 目录中，该应用程序是使用 CLI 生成的。虽然我知道有几个与此主题相关，但 none 在我的案例中起作用。

下面是我的文件结构：

具体来说，我正在尝试检索 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 之后，我的 gets 工作正常，尽管它破坏了我使用 inMemoryApi

的应用程序

Answer 1

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

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 2

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

中获取它

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

Answer 3

几个注意事项...

在运行服务器之后，做一件简单的事情：copy/paste你的资源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');

Angular6：HttpClient获取JSON文件404错误

Angular 6: HttpClient Get JSON File 404 Error

angular

angular-httpclient

angular6