GET http://localhost:4200/api/listOfProducts/products.json 404(未找到) [英] GET http://localhost:4200/api/listOfProducts/products.json 404 (Not Found)

问题描述

在我的Angular2应用程序中，文件夹的组织如下

In my Angular2 application the organization of the folders is as below

 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如下:

product.service.ts is as below:

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

}

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

Now after I run my application I got the following error

获取 http://localhost:4200/api/listOfProducts/products.json 404(不是找到)

我知道问题是路径目录键入错误，但是我尝试了多个路径，但仍然无法解决我的问题.问题是我仍然不知道Angular2如何读取文件.是从根目录开始还是从下面开始，还是从文件所在的位置开始?

I am aware the problem is that the path directory is typed wrong but I have tried several paths and still could not resolved my problem. The problem is that I have not still the knowledge how the Angular2 read the files. From the root and below or from the file you are and above?

推荐答案

组织与您的项目无关，因为应该可以从服务器访问文件.重要的是您的 dist 文件夹的外观.确保 dist 文件夹(位于实时服务器上)包含您的json文件.如果不是，则需要配置webpack.

Organisation your project has nothing to do with it, because files should be accessible from the server. It is important how the structure your dist folder looks like. Make sure that dist folder (which is located on your live-server) contains your json files. If not, you need to configure webpack.

我个人认为，更好的解决方案是将模拟数据保留在src目录中.与其他资产，以这种方式:

Personally, I think that better solution is to keep mock-data inside src catalog f.e. with other assets, in this way:

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

这篇关于GET http://localhost:4200/api/listOfProducts/products.json 404(未找到)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！