No se puede obtener el archivo json local en Angular 5 - error 404 persistente

He leído todos los demás artículos o publicaciones sobre esto que puedo encontrar. No puedo, por nada del mundo, entender en qué estoy fallando con esta tarea tan simple. (Específicamente siguiendo este ejemplo.) Debo estar haciendo algo obviamente estúpido, pero lo he estado mirando tanto tiempo que no puedo verlo.

Tengo un archivo json llamado isRecognized.json en assets/mockData. He añadido el directorio mockData a mi archivo de configuración de webpack para que se incluya en el directorio /dist. Si voy a http:localhost:4200/assets/mockData/isRecognized.json puedo ver el archivo, así que sé que está disponible.

Sin embargo, cuando intento recuperar el archivo usando HTTP Client, devuelve un 404 sin importar lo que intente.

EDITAR: Estoy usando Webpack, no 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();
    }

}

mi.servicio.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');
  }
}

El error que obtengo en la consola del navegador es:

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)

Si depuro el error, puedo ver que el cuerpo del error es:

Respuesta #1

Tengo esto funcionando con éxito en mi aplicación usando simplemente una URL como esta:

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

Observe que no tiene la parte localhost de la ruta.

Así que prueba algo más como esto:

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

También asegúrate de que tu angular.json tenga la ruta listada bajo assets:

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

NOTA: Tampoco hice nada para modificar mi configuración de webpack. (Pero estoy usando la CLI.)

Si quieres ver algún código en funcionamiento que acceda a un archivo json, tengo un ejemplo aquí:

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

Respuesta #2

Sugeriría suscribirse en el componente y devolver un Observable desde el servicio:

Servicio :

@Injectable()
export class MyService {

  constructor(private http: HttpClient) { }

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

}

Componente :

export class AppComponent implements OnInit {

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

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