Angular 5'te yerel json dosyası alınamıyor - sürekli 404 hatası

Bunu bulabildiğim diğer tüm makaleleri veya gönderileri okudum. Bu basit görevde nerede yanlış yaptığımı aklım almıyor. (Özellikle bu örneği takip ederken.) Kesinlikle açıkça aptalca bir şey yapıyor olmalıyım ama bunu o kadar uzun süre inceledim ki göremiyorum.

assets/mockData içinde isRecognized.json adında bir json dosyam var. mockData dizinini webpack yapılandırma dosyama ekledim, böylece /dist dizinine dahil edildi. Eğer http://localhost:4200/assets/mockData/isRecognized.json adresine gidersem dosyayı görebiliyorum, bu yüzden dosyanın mevcut olduğunu biliyorum.

Ancak, HTTP İstemcisi kullanarak dosyayı almaya çalıştığımda, ne denersem deneyeyim 404 hatası veriyor.

DÜZENLEME: Angular CLI değil, Webpack kullanıyorum.

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

}

benim.servis.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');
  }
}

Tarayıcı konsolunda aldığım hata şudur:

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)

Hatanın ayıklamasını yaparsam, hatanın gövdesini görebilirim:

Cevap #1

Bu URL'yi kullanarak bunu uygulamamda başarıyla çalıştırıyorum:

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

Yolun localhost kısmına sahip olmadığını fark edin.

O zaman bunun gibi bir şey deneyin:

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

Ayrıca angular.json dosyanızda yolun assets altında listelendiğinden emin olun:

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

NOT: Ayrıca webpack yapılandırmamı değiştirmek için hiçbir şey yapmadım. (Ama CLI kullanıyorum.)

Bir json dosyasına erişen çalışan bir koda bakmak istiyorsanız, burada bir örneğim var:

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

Cevap #2

Bileşen içinde abone olmayı ve servisten bir Observable döndürmeyi öneririm:

Hizmet :

@Injectable()
export class MyService {

  constructor(private http: HttpClient) { }

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

}

Bileşen :

export class AppComponent implements OnInit {

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

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