在本地项目文件夹中加载 JSON 时使用 Angular 2 http 离线

我一直在尝试使用 http get 方法加载 Angular 2 项目文件夹中存在的本地 json 文件。看下面的示例代码片段：

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

现在，当我尝试通过连接互联网加载它时，它正在工作。但是当我打开浏览器开发人员选项中的离线复选框时（https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#offline https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#offline)，json 再次停止加载。它开始在控制台中向我显示有关“没有互联网连接”的错误，并且不加载任何内容。

还有其他方法可以做到这一点吗？或者使用http get..怎么做？

您可以导入一个json文件，如果您执行以下操作：

使用以下命令创建 json-typings.d.ts 文件：

declare module "*.json" {
    const value: any;
    export default value;
}

这是一个通配符模块定义 https://www.typescriptlang.org/docs/handbook/modules.html这允许我们导入非 javascript 文件（在本例中为 JSON 文件）。

您现在应该能够将 json 文件导入到您的项目中：

import * as products from "./products.json";