GET HTTP：//本地主機：4200/API/listOfProducts/products.json 404（未找到）

Question

以我Angular2應用文件夾的組織是如下

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（未 Foun d）

我知道的問題是，路徑目錄鍵入錯誤的，但我嘗試了好幾種路徑和可能仍然沒有解決我的問題。問題是我還不知道Angular2如何讀取文件。 從根和下面或從你是和上面的文件？

Answer 1

組織您的項目與它無關，因爲應該可以從服務器訪問文件。這很重要，你的文件夾結構如何。確保dist文件夾（位於您的實時服務器上）包含您的json文件。如果沒有，你需要配置webpack。

就我個人而言，我認爲更好的解決方案是保持src目錄f.e.中的模擬數據。與其他資產，以這樣的方式

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

Answer 2

如果您正在使用角CLI和NG用來運行應用程序的角度，所有的JSON文件應該是資產文件夾下。