Angular 收到http://localhost:4200/api/listOfProducts/products.json 404（未找到）

在我的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");
  }

}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
导入'rxjs/add/operator/do'；
导入“rxjs/add/operator/catch”；
从“./product”导入{IPProduct}；
@可注射（）
出口类产品服务{
private _productUrl='api/listOfProducts/products.json'；
//这里是404错误
构造函数（私有http:http）{}
getProducts（）：可观察{
返回此。\ http.get（此。\产品URL）
.map（（response:response）=>response.json（））
.do（data=>console.log（“All:+JSON.stringify（data）））
.接住（这个.把手错误）；
}
私有句柄错误（错误：响应）{
控制台错误（error）；
返回Observable.throw（error.json（）.error | |“服务器错误”）；
}
}

现在，在我运行我的应用程序之后，我得到了以下错误

得到404（不是 发现）

我知道问题是路径目录键入错误，但我尝试了几个路径，仍然无法解决问题。问题是我还不知道Angular2如何读取文件。

---

从根目录和下面，或者从您所在的文件和上面？

组织您的项目与此无关，因为应该可以从服务器访问文件。dist文件夹的结构外观很重要。确保dist文件夹（位于live服务器上）包含json文件。如果没有，则需要配置webpack

就个人而言，我认为更好的解决方案是将模拟数据与其他资产一起保存在src catalog f.e.中，方法如下：

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

---

组织您的项目与此无关，因为文件应该可以从服务器访问。dist文件夹的结构外观很重要。确保dist文件夹（位于live服务器上）包含json文件。如果没有，则需要配置webpack

就个人而言，我认为更好的解决方案是将模拟数据与其他资产一起保存在src catalog f.e.中，方法如下：

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

---

如果使用Angular CLI和ng serve运行Angular应用程序，则所有json文件都应位于assets文件夹下。

如果使用Angular CLI和ng serve运行Angular应用程序，所有json文件都应位于assets文件夹下。

该文件在上不可访问server@RomanC如何在服务器上访问此文件？在服务器上无法访问此文件server@RomanC我怎样才能在服务器上访问这个文件？K：你的答案很好。为了在服务器上访问文件，json文件必须放在src/assetin中。事实上，这取决于网页的配置：）没问题，broK：你的答案很好。为了在服务器上访问文件，json文件必须放在src/assetin中。事实上，这取决于webpack的配置：）没问题，兄弟