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

问题描述：

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

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）中脱机复选框时，json停止再次加载。它开始显示我在控制台中有关没有互联网连接的错误，不加载任何东西。

有没有其他方法可以做到这一点？或使用http get..how来做到这一点？

你想从一个JSON VAR加载它，如果没有连接，或者你要存储一个副本，一旦你有一个连接并加载它，如果没有连接？ –

我有一个长的json数组存储在不会改变的分离文件中..i.e。它会静态..所以它会作为我的项目 –

的一部分，所以为什么使用http加载它？ –

答

如果你这样做你可以导入json文件，如下所示：

创建一个JSON-typings.d.ts文件：

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

这是一个wildcard module definition，使我们能够导入非JavaScript的这种情况下的文件是JSON文件。

你现在应该能够JSON文件导入到项目中：

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

谢谢..它的工作！后来我也尝试使用node.js require（'./ products.json'）方法将其导入到变量中，然后使用它。此方法是否正确？ –

这也很好，只是没有使用打字稿/ es6 –

好的..非常感谢您的帮助:) –

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

相关推荐