Angular 2 http get to return json 404 file

Question

I am doing POC to prove that I have a connection between the back and front in Angular Universal. I have a JSON file in the back called heroes.json that I want to get from the ModelService frontend ModelService in model.service.ts .

I have this folder structure:

Inside model.service.ts (front end) I want to create an http request to get some data in the getStuff() method.

I have this in model.service.ts:

 // domain/feature service @Injectable() export class ModelService { private heroesUrl = "http://localhost:4000/src/backend/heroes.json"; // URL to JSON file // This is only one example of one Model depending on your domain constructor(public api: ApiService, public cacheService: CacheService, private http: Http) { } public getStuff(): Observable<any[]> { return this.http.get(this.heroesUrl) .map(this.extractData) .catch(this.handleError); } private extractData(res: Response) { let body = res.json(); return body.data || { }; } private handleError (error: Response | any) { // In a real world app, we might use a remote logging infrastructure let errMsg: string; if (error instanceof Response) { const body = error.json() || ""; const err = body.error || JSON.stringify(body); errMsg = `${error.status} - ${error.statusText || ""} ${err}`; } else { errMsg = error.message ? error.message : error.toString(); } console.error(errMsg); return Observable.throw(errMsg); } // domain/feature service @Injectable() export class ModelService { private heroesUrl = "http://localhost:4000/src/backend/heroes.json"; // URL to JSON file // This is only one example of one Model depending on your domain constructor(public api: ApiService, public cacheService: CacheService, private http: Http) { } public getStuff(): Observable<any[]> { return this.http.get(this.heroesUrl) .map(this.extractData) .catch(this.handleError); } private extractData(res: Response) { let body = res.json(); return body.data || { }; } private handleError (error: Response | any) { // In a real world app, we might use a remote logging infrastructure let errMsg: string; if (error instanceof Response) { const body = error.json() || ""; const err = body.error || JSON.stringify(body); errMsg = `${error.status} - ${error.statusText || ""} ${err}`; } else { errMsg = error.message ? error.message : error.toString(); } console.error(errMsg); return Observable.throw(errMsg); } 

From the front end component, I call ModelService.getHeroes:

 export class HomeComponent { public data: any = {}; constructor(public modelService: ModelService) { // we need the data synchronously for the client to set the server response // we create another method so we have more control for testing this.universalInit(); } public universalInit() { this.modelService.getStuff().subscribe((data) => { this.data = data; }); } 

I get this error:

 GET /src/backend/heroes.json 404 3.698 ms - 46 404 - {"status":404,"message":"No Content"} EXCEPTION: 404 - {"status":404,"message":"No Content"} /private/var/root/vepo/node_modules/rxjs/Subscriber.js:227 throw err; ^ 404 - {"status":404,"message":"No Content"} [nodemon] app crashed - waiting for file changes before starting... 

So my url is private heroesUrl = "http://localhost:4000/src/backend/heroes.json"; // URL to JSON file private heroesUrl = "http://localhost:4000/src/backend/heroes.json"; // URL to JSON file in the service is invalid. Given the folder structure, what will be the url? Because the actual current project, the output is in dist:

So I'm not sure what to put in ModelService.heroesUrl . What string value should ModelService.heroesUrl have?

Answer 1

you must put your json file in your dist folder client and you need to change your url to http://localhost:4000/dist/heroes.json<-- destination where you are putting your json file in dist directory

Answer 2

I put the same places.json folder in "assets" and after setting the url, for example:

 places = this.http.request("http://localhost:4200/assets/places.json") 

hope this information helps someone.