エラー404は

Question

は、私はすでに同様の質問で回答を探してみましたが、私は4角に新しいですし、仮想的な本屋のための単純な角度フロントエンドをしようとして問題に

を解決することができませんでした。 books.jsonとして、アプリケーションにハードコードされたデータセットが存在します。

そしてここでは、プロジェクトディレクトリとコードのスクリーンショットです：しかし、問題は、私は次のエラーを取得することを実行しようとするたびにです。

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

が rootフォルダの下に、あなたの apiフォルダを移動

：

は、ここに私のbook.service.tsコードです。この場合、book-store。

問題はコードにありませんでした。そのJSONファイルへのパスを見つけることについては

それともが

あなたはangular-cli.json

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

Answer 2

一つのオプションでassetsにapiをsrcフォルダの下のファイルを維持して追加することができます無効に移動することですjsonファイルはsrc/assetsフォルダにあります。よりよい解決策はangular-cli.jsonを編集し、apps.assetsにフォルダ（ルート）を追加することです：

今

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

JSONファイルにアクセスする必要があり、あなたが任意のコードを変更する必要はありません。アプリケーションの提供をやめて、ng serveを再度実行してください。

Answer 3

あなたのフォルダ構造は大丈夫です。問題はあなたのサーバがapiフォルダについて何も知らないということです。あなたの.angular-cli.jsonでは、これは角とは何の関係もありません

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