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

问题描述

使用 HTTP 客户端，我将检索驻留在使用 CLI 生成的 Angular 6 应用程序中 assets 目录的 JSON 文件.虽然我知道有几个相关的

特别是我试图检索 us-all-all.geo.json

angular.json

项目":{ng-ngrx-highcharts-example":{根": ""，"sourceRoot": "src","projectType": "应用程序",前缀":应用程序"，原理图":{}，建筑师":{建造": {"builder": "@angular-devkit/build-angular:browser",选项": {"outputPath": "dist/ng-ngrx-highcharts-example","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "src/tsconfig.app.json",资产":["源","来源/资产","src/favicon.ico",src/assets/us-all-all.geo.json"],风格":[源代码/样式.css"],脚本":[]},

map-data.service.ts

import { Injectable } from '@angular/core';import { Observable, of, from } from 'rxjs';import * as $ from 'jquery';从'@uirouter/angular'导入{$q}；import { catchError, map, tap } from 'rxjs/operators';从@angular/common/http"导入 { HttpClient, HttpHeaders };const httpOptions = {标头:新 HttpHeaders({ 'Content-Type': 'application/json' })};@Injectable({提供在:'根'})导出类 MapDataService {地图数据:任何；mapDataObservable: Observable
所以此时我不确定应该使用什么网址来检索 JSON.
编辑
我看到在构建应用程序时位于 src/assets 文件夹中的 JSON 文件存储在 dist/assets 中.
最终编辑
正如 user184994 所述，问题在于我使用了 HttpClientInMemoryWebApiModule，它拦截了所有 HTTP 调用.结果，我无法检索我的 JSON 文件.在我注释掉 HttpClientInMemoryWebApiModule 之后，我的 get 工作正常，尽管它破坏了我使用 inMemoryApi 的应用程序
解决方案
原因是你的 app.module 正在导入 HttpClientInMemoryWebApiModule，它会拦截任何 HTTP 调用.它不是尝试从您的项目中获取 JSON，而是尝试从 InMemoryDataService 中获取它.
如果删除此导入，它应该可以解决错误，尽管依赖该模块的任何调用都会失败(例如 school 和 national请求).
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. 

Below is my file structure:



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:


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

EDIT

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

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



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

Final Edit

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
解决方案
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.

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屋！