GETのhttp：// localhostを：私のAngular2アプリケーションで4200/API/listOfProducts/products.json 404（見つかりません）

Question

フォルダの組織が

Project 
| 
+-- file 1 
|  
+-- api //folder 
| | 
| | +-- listOfProducts //folder 
|   | 
      +-- products.json //file 
+-- src //folder 
| | 
+ | +-- app //folder 
      | +-- product //folder 
       +-- product.service.ts 
       +-- product-list.component.ts 
       +-- //other files 

product.service.ts以下の通りとなっています以下の下：今、私は自分のアプリケーションを実行した後に

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 'rxjs/add/operator/catch'; 

import {IProduct} from './product'; 


@Injectable() 

export class ProductService{ 

private _productUrl = 'api/listOfProducts/products.json'; 
    // here 404 error 

constructor(private _http: Http) {} 

getProducts(): Observable<IProduct[]> { 

    return this._http.get(this._productUrl) 
       .map((response: Response) => <IProduct[]> response.json()) 
       .do(data=>console.log("All: " + JSON.stringify(data))) 
       .catch(this.handleError); 

} 

private handleError(error: Response) { 
    console.error(error); 
    return Observable.throw(error.json().error || "Server error"); 
    } 

} 

私は、次のエラー

GETだhttp://localhost:4200/api/listOfProducts/products.json 404（未 フンd）

私は、パスのディレクトリが間違って入力されていることを認識していますが、いくつかのパスを試しても問題を解決できませんでした。問題は、Angular2がファイルをどのように読み込んでいるかをまだ知りませんでした。 あなたが上にいるファイルのルートとその下またはファイルからですか？

Answer 1

ファイルはサーバーからアクセスできる必要があるため、プロジェクトはそれとは関係ありません。構造がどのようにdistフォルダのように見えるかは重要です。 distフォルダ（ライブサーバーにあります）にjsonファイルが含まれていることを確認してください。そうでない場合は、webpackを設定する必要があります。

個人的には、モックデータをsrcカタログ内に保存する方がよいと思います。このように他の資産と：あなたは、角度アプリケーションを実行するのに役立つ角度CLIとNGを使用している場合

src 
| 
+- app 
| 
+- assets 
    | 
    +- css 
    | 
    +- img 
    | 
    +- mock-data 
    | 
    your.json 

Answer 2

、すべてのJSONファイルは、資産フォルダの下でなければなりません。