Angular 6:HttpClient获取JSON文件404错误 [英] Angular 6: HttpClient Get JSON File 404 Error

问题描述

使用HTTP客户端，我将检索一个JSON文件，该文件位于使用CLI生成的Angular 6 App中的assets目录中.虽然我知道有几个相关的问题(和答案)与该主题相关，但在我的案例中没有一个奏效.

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.

下面是我的文件结构:

具体地说，我正在尝试检索us-all-all.geo.json

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:

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

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

编辑

链接到GitHub项目:ng-ngrx-highcharts -示例

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

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

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

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

最终编辑

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

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

推荐答案

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

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.

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

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).

这篇关于Angular 6:HttpClient获取JSON文件404错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！