角2 404 - httpを使用してjsonファイルを読み取ることができません

Question

私は角に新しいと複数のチュートリアルを通過して、私は一点に立ち往生し、さらに行くことができない、私の問題は私はjsonファイル製品を持っているようです。 jsonと私はHttpからメソッドを取得しようとしていますが、アプリケーションは以下に述べるコンソール上で例外をスローします。以下

GET http://localhost:4200/api/products.json 404 (Not Found) 

ここに私のTSコードがある

私のアプリの構造です。

import { Injectable } from "@angular/core"; 
import { IProduct } from "./product"; 
import { Http, Response } from "@angular/Http"; 
import { Observable } from "rxjs/Observable"; 

import "rxjs/add/operator/map"; 
import "rxjs/add/operator/do"; 
import "rxjs/add/operator/catch"; 


@Injectable() 
export class ProductService { 

    private _productUrl: string = "../data/products/products.json"; 


    constructor(private _http: Http){} 

    getProducts():Observable< IProduct[]> { 
     return this._http.get("/api/products.json") 
        .map((response: Response) => <IProduct[]>response.json()) 
        .do(data => console.log('All: ' + JSON.stringify(data))) 
        .catch(this.handleError); 
    } 

    handleError(error: Response) { 
     console.log(error); 
     return Observable.throw(error.json().error || 'system error'); 
    } 
} 

私が何か間違っていると教えてください。ありがとうございます。

Answer 1

で資産へのAPIフォルダを追加する必要がOUT- CLIを使用して構築されたAngularプロジェクトのすぐれた機能により、/src/assetsにあるassetsフォルダを介してファイルに一般公開することができます。ファイルangular-cli.jsonを編集することによって、他の場所に一般公開できるようにプロジェクトを設定することができます。ラインassetsを見つけ、問題のファイル（複数可）へのアクセスを可能にする方法でそれを変更します。助け

"assets": ["assets", "products.json","api/products.json"], 

希望を！

Answer 2

/api/products.jsonに公開されているAPIがないため、このURLでこのファイルにアクセスすることはできません。

あなたはと、直接ファイルにアクセスしようとすることができます：

this._http.get(_productUrl) 

Answer 3

CLIを使用する場合は、angular-cli.jsonファイル

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