Угловой 6: HttpClient Получить JSON файл 404 Ошибка - angular


1

Используя HTTP-клиент, я должен получить файл JSON, который находится в каталоге assets в моем приложении Angular 6, которое было сгенерировано с использованием CLI. Хотя я знаю, что есть пара связанных вопросов (и ответов), связанных с этой темой, но никто не работал в моем случае.

Ниже представлена моя файловая структура:

enter image description here

В частности, я пытаюсь получить 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);
  }
}

Я вызываю функцию retrieve в моем компоненте

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;
      })

К сожалению, когда приложение загружается, я вижу следующее: Console Error Output

Поэтому на данный момент я не уверен, какой url я должен использовать для извлечения JSON.

РЕДАКТИРОВАТЬ

Ссылка на проект GitHub: ng-ngrx-highcharts-example

Должен ли я пытаться восстановить JSON из каталога Dist?

enter image description here

Я вижу, что файлы JSON, расположенные в папке src/assets, хранятся в dist/assets при создании приложения.

Редактировать

Как указано пользователем184994, проблема заключалась в использовании HttpClientInMemoryWebApiModule который перехватывает любые HTTP-вызовы. В результате я не смог получить файлы JSON. После того, как я прокомментировал HttpClientInMemoryWebApiModule мои HttpClientInMemoryWebApiModule работали нормально, хотя это ломает мое приложение, которое использует inMemoryApi

Источник
  •  68
  •  3
  • 13 мар 2020 2020-03-13 23:29:01

3 ответа

1

Несколько заметок...

После запуска сервера просто выполните простую вещь: скопируйте/вставьте URL-адрес своего ресурса в браузер, например:

enter image description here

Если вы видите 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

Это потому, что вы не правильно определяете свой путь, так как находитесь в папке с сервисом, поэтому вам нужно изменить свой путь {../, что означает один шаг назад)

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

Причина в том, что ваш app.module импортирует HttpClientInMemoryWebApiModule, который перехватывает любые HTTP-вызовы. Вместо того, чтобы пытаться получить JSON из вашего проекта, вместо этого он пытается получить его из InMemoryDataService.

Если вы удалите этот импорт, он должен решить эту проблему, хотя любые вызовы, которые у вас есть, полагаются на этот модуль, будут терпеть неудачу (например, school и national запросы).