Angular 6: HttpClient获取JSON文件404错误
使用HTTP Client，我将检索一个JSON文件，该文件驻留在我的Angular 6应用程序中的assets目录中，该应用程序是使用CLI生成的。虽然我知道有几个与这个主题相关的questions (and answers)，但没有一个在我的例子中工作过。
下面是我的文件结构：
具体地说，我尝试检索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的应用程序
回答 3
Stack Overflow用户
发布于 2018-06-22 03:07:38
这是因为您的app.module正在导入HttpClientInMemoryWebApiModule，它会拦截任何HTTP调用。它不是尝试从您的项目中获取JSON，而是尝试从InMemoryDataService中获取它。
如果您删除此导入，它应该会解决错误，尽管您拥有的任何依赖于该模块的调用都将失败(例如school和national请求)。
Stack Overflow用户
发布于 2018-06-22 01:31:47
这是因为您没有正确定义路径，因为您在服务文件夹中，因此需要更改路径{../，这意味着落后一步}
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');
}
}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');
https://stackoverflow.com/questions/50974020
复制相似问题
腾讯云开发者
