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

}

现在我运行应用程序后出现以下错误

获取http://localhost:4200/api/listOfProducts/products.json 404（不是实测值）

我知道问题是路径目录输入错误但我尝试了几个路径仍然无法解决我的问题。问题是我还不知道Angular2如何读取文件。从根目录和下方，或从您和以上的文件？

Answer 1

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

就个人而言，我认为更好的解决方案是将模拟数据保存在src目录中。与其他资产一样，这样：

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

Answer 2

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

获取http：// localhost：4200 / api / listOfProducts / products.json 404（未找到）

2 个答案: