首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular 6: HttpClient获取JSON文件404错误

Angular 6: HttpClient获取JSON文件404错误
EN

Stack Overflow用户
提问于 2018-06-22 01:05:18
回答 3查看 8.3K关注 0票数 3

使用HTTP Client,我将检索一个JSON文件,该文件驻留在我的Angular 6应用程序中的assets目录中,该应用程序是使用CLI生成的。虽然我知道有几个与这个主题相关的questions (and answers),但没有一个在我的例子中工作过。

下面是我的文件结构:

具体地说,我尝试检索us-all-all.geo.json

angular.json

代码语言:javascript
复制
 "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

代码语言:javascript
复制
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

代码语言:javascript
复制
$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的应用程序

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-06-22 03:07:38

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

如果您删除此导入,它应该会解决错误,尽管您拥有的任何依赖于该模块的调用都将失败(例如schoolnational请求)。

票数 5
EN

Stack Overflow用户

发布于 2018-06-22 01:31:47

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

代码语言:javascript
复制
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');
  }

}
票数 1
EN

Stack Overflow用户

发布于 2018-06-22 19:19:24

几个注释..。

在运行服务器之后,只需做一件简单的事情:将您的资源复制/粘贴到浏览器中,如下所示:

如果你看到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');

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50974020

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档