Question

我有一个本地json文件并尝试从Http get方法读取。应用程序在控制台上抛出异常（404）。我已阅读如果您使用webpack资源/数据不可用于angular-cli.json。我正在使用webpack。你知道把json文件放到哪里可以读取吗？

import {IProduct} from './product.model';

@Injectable()
export class ProductService {
    private productUrl = require('./product.json');

    constructor(private _http: HttpClient) { }

    getProducts(): Observable<IProduct[]> {
        return this._http.get<IProduct[]>(this.productUrl)
            .do((data) => console.log('products: ' + JSON.stringify(data)))
            .catch(this.handleError);
    }
}

其中product.json与ProductService的目录相同。

Answer 1

如果使用angular cli

AFAIK有一种方法可以做到这一点。

将文件（例如file.json）保存在assets文件夹中。
在angular-cli.json文件中，转到node：apps＆gt;资产并验证名称“资产”是否存在。

现在访问：

http://localhost:[PORT_NUMBER]/assets/file.json

示例：

import { Injectable } from "@angular/core";

@Injectable()
export class DataMockService {
    public GetObjects(): any {
        return {
            name: "nilay", ...
        };
    }
}

Answer 2

使用webpack，无论您将json文件存储在何处，都可以从任何地方访问它，但始终从src文件夹开始。

所以看起来应该是这样的：

return this._http.get<IProduct[]>('src/app/services/product.json')

即从src开始标记json文件的完整路径。

Angular 4 404错误 - 使用http get方法angular 4 webpack调用json文件

2 个答案: