Error 404 in Angular 4 HTTP Request

Question

I tried searching for answers in the already asked similar questions but failed to resolve the problem

I am new to Angular 4 and trying to make a simple Angular frontend for a hypothetical book store. There is a hard-coded dataset present in the app as books.json. But the problem is every time to try to run it I get the following error:

And here's the screenshot of the project directory and the code.

Here is my book.service.ts code :

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

@Injectable()
export class BookService {

  constructor(private _http: Http){}

  getBooks(): Observable<IBook[]> {
    return this._http
    .get("api/books/books.json")
    .map((response : Response) => {
      return response.json() as IBook[];
    });
  }
}

Answer 1

One option is to move the json files to the src/assets folder. A better solution would be to edit angular-cli.json and add your folder (route) to apps.assets:

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

Now the json files should be accessible, you don't need to change any code. Don't forget to stop serving the application and run ng serve again.

Answer 2

move your api folder under root folder. In this case under book-store.

The issue was not in the code. its about finding the path to the json file is invalid

Or

you can keep the files under src folder and add the api into assets in angular-cli.json

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

Answer 3

Your folder structure seems ok. The problem is that your server does not know anything about api folder. In your .angular-cli.json, put "api" to your assets array like following

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