Невозможно получить локальный файл JSON в Angular 5 - постоянная ошибка 404

Question

Я прочитал любую другую статью или пост об этом, который я могу найти.Я не могу на всю жизнь понять, где я ошибаюсь с этой простой задачей.(В частности, следуя этому примеру .) Я, должно быть, делал что-то явно глупое, но я смотрел на это так долго, что не вижу его.

У меня есть файл json с именем isRecognized.json в активах / mockData.Я добавил каталог mockData в свой файл конфигурации webpack, чтобы он был включен в каталог / dist.Если я зайду на http: localhost: 4200 / assets / mockData / isRecognized.json, я смогу увидеть файл, поэтому я знаю, что он доступен.

Однако, когда я пытаюсь получить файл с помощью HTTP-клиента, он выдает 404 независимо от того, что я пытаюсь.

РЕДАКТИРОВАТЬ: я использую Webpack, а не Angular CLI.

app.component.ts

import { MyService } from './services/my.service';
import { Component, OnInit, Renderer2 } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

/*
* Main app component that houses all views.
*/
@Component({
    selector: 'app-comp',
    templateUrl: './app.component.html'
})

export class AppComponent implements OnInit {

    constructor(
        private route: ActivatedRoute, private service: MyService
    ) {}

    ngOnInit() {
      this.service.isRecognized();
    }

}

my.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class MyService {

  constructor(private http: HttpClient) { }

  isRecognized() {
    this.getJSON('isRecognized').subscribe(data => {
      console.log(data);
    });
  }

  getJSON(fileName): Observable<any> {
    return this.http.get('http://localhost:4200/assets/mockData/' + fileName + '.json');
  }
}

Ошибка, которую я получаю в консоли браузера:

AppComponent_Host.ngfactory.js? [sm]:1 ERROR Error: [object Object]
    at viewWrappedDebugError (core.js:9795)
    at callWithDebugContext (core.js:15101)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14628)
    at ViewRef_.webpackJsonp../node_modules/@angular/core/esm5/core.js.ViewRef_.detectChanges (core.js:11605)
    at core.js:5913
    at Array.forEach (<anonymous>)
    at ApplicationRef.webpackJsonp../node_modules/@angular/core/esm5/core.js.ApplicationRef.tick (core.js:5913)
    at core.js:5746
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:4756)

Если я отлаживаю ошибку, я вижу тело ошибки:

Answer 1

Наконец-то разобрался с ответом!У меня было это в моем файле app.module.ts как импорт:

InMemoryWebApiModule.forRoot(InMemoryDataService, { dataEncapsulation: false })

Удаление этого сразу решило проблему.

Answer 2

Я бы предложил подписаться на компонент и вернуть Observable из сервиса:

Сервис:

@Injectable()
export class MyService {

  constructor(private http: HttpClient) { }

  isRecognized(fileName): Observable<any> {
    return this.http.get('http://localhost:4200/assets/mockData/' + fileName + '.json');
  }

}

Компонент:

export class AppComponent implements OnInit {

    constructor(
        private route: ActivatedRoute, private service: MyService
    ) {}

    ngOnInit() {
      this.service.isRecognized(fileName)
         .subscribe(data => {
              console.log(data);
         });
    }
}

Answer 3

Хотя это не может быть прямым решением вашей конкретной проблемы, вам следует взглянуть на пакет npm json-server.Я использую его для проверки API при разработке и тестировании клиента.

json-server npm

Он будет запускать веб-сервер узла на порту 3000 и действительнопрост в использовании прямо из коробки.

Посмотрите этот пример руководства по его использованию: Макет API с json-сервером

Возможно, есть лучшие примеры и настройкипрокси не нужен, но должен быть достаточно хорош.

Answer 4

У меня это успешно работает в моем приложении, просто используя URL-адрес, подобный следующему:

private productUrl = 'api/products/products.json';

Обратите внимание, что в нем нет localhost части пути.

Так что попробуйтечто-то похожее на это:

'assets/mockData/' + fileName + '.json'

Также убедитесь, что ваш angular.json имеет путь, указанный в списке ресурсов:

        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/api"
        ],

ПРИМЕЧАНИЕ: Я также ничего не делал для изменения конфигурации моего веб-пакета.(Но я использую CLI.)

Если вы хотите посмотреть на некоторый рабочий код, который обращается к файлу json, у меня есть пример здесь:

https://stackblitz.com/edit/github-gettingstarted-deborahk