Angular 2 404 - 无法使用http get读取json文件

Question

我是角色新手并经历了复杂的教程，我陷入困境并且无法继续前进，我的问题就像我有一个json文件products.json而我正在尝试从Http get方法中读取，应用程序在控制台上抛出异常，如下所述。

GET http://localhost:4200/api/products.json 404 (Not Found)

下面是我的应用结构

这是我的密码。

import { Injectable } from "@angular/core";
import { IProduct } from "./product";
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";


@Injectable()
export class ProductService {

    private _productUrl: string = "../data/products/products.json";


    constructor(private _http: Http){}

    getProducts():Observable< IProduct[]> {
        return this._http.get("/api/products.json")
                    .map((response: Response) => <IProduct[]>response.json())
                    .do(data => console.log('All: ' + JSON.stringify(data)))
                    .catch(this.handleError);
    }

    handleError(error: Response) {
        console.log(error);
        return Observable.throw(error.json().error || 'system error');
    }
}

如果我做错了，请告诉我。 提前谢谢！

Answer 1

使用CLI构建的Angular项目的开箱即用功能允许通过位于/src/assets的资产文件夹公开访问文件。您可以通过编辑文件angular-cli.json来配置项目以允许其他位置可公开访问。找到行assets并以允许访问相关文件的方式对其进行修改：

"assets": ["assets", "products.json","api/products.json"],

希望有所帮助！

Answer 2

似乎没有在/api/products.json上公开的API，因此您无法在此网址上访问此文件。

您可以尝试直接访问该文件：

this._http.get(_productUrl)

Answer 3

如果您使用CLI，则需要将api文件夹添加到angular-cli.json文件中的资产

"assets": [
    "assets",
    "favicon.ico",
    "api"
  ],

Answer 4

将您的 products.json 文件移动到 .\src\assets\api\products，因为项目 angular CLI 只允许使用直接 url 从资产下载内容。

private productUrl = 'assets/api/products/products.json';