Angular 2, http get 404 not found

17Rohit commented 6 years ago

Hi , I am new to angular JS and trying to make http request and want to get data from a json file, which I put in 'app' folder. I created one service 'products.service.ts' and the code for this file is as follows.

import { Injectable } from '@angular/core'; import { Http , Response} from '@angular/http'; import { Observable} from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/do'; import {IProduct} from './product';

@Injectable() export class ProductService{ private _producturl = 'app/products.json'; constructor(private _http:Http){}

getproducts():Observable<IProduct[]>{ return this._http.get(this._producturl) .map((response: Response) => <IProduct[]> response.json()) .do(data =>console.log(JSON.stringify(data))); } }

and when trying to fetch Json data using 'getproducts()' function then getting the following error in my browser console. GET http://localhost:4200/app/products.json 404 (Not Found) ERROR Response {_body: "<!DOCTYPE html>↵↵↵<meta char…not GET /app/products.json↵↵↵", status: 404, ok: false, statusText: "Not Found", headers: Headers, …}

and in network tab Json file showing with 404 status and type 'xhr'.

So can anyone suggest the solution ?

smrutis1984 commented 6 years ago

Hope this may help:- https://youtu.be/lMjN-NXjia4?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6

MansuriNiyamat commented 6 years ago

Thanks a lot @smrutis1984 above link help me a lot. in index.html file instead of <base href="/"> replace <base href="/src"> it works for me.``

asidelnik commented 6 years ago

Another possible solution - restart your server Stop it - Control + c Start - npm start

gauriscriptuit commented 5 years ago

Another possible solution - restart your server Stop it - Control + c Start - npm start

lol this actually worked. There must be some updation that happened in any of the .json files. So when any changes occur in those files the appliction should be restarted again.

prom00 commented 5 years ago

Thanks a lot @smrutis1984 above link help me a lot. in index.html file instead of <base href="/"> replace <base href="/src"> it works for me.``

This solved my issue! Thanks!

I've added --base-href=/src to my ng serve command:

My total command now: ng serve --aot --port 80 --host 0.0.0.0 --open --disable-host-check --base-href=/src

angular / quickstart

Angular 2, http get 404 not found #514