typescript 使用 Angular http 请求 json 文件时出现 404
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41770950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
404 when requesting json file with Angular http
提问by gsiradze
I have this code in my service
我的服务中有此代码
import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';
import {Client} from "../clients/client";
import {Observable} from "rxjs/Observable";
@Injectable()
export class ClientsService {
private clientUrl = './client.json';
private headers = new Headers({ 'Accept': 'application/json' });
private options = new RequestOptions({ headers: this.headers });
private client : Client;
constructor(private http:Http) {}
getClient() : Observable<any>{
return this.http.get(this.clientUrl, this.options)
.map(res => res);
}
}
and in my component I'm calling it:
在我的组件中，我称之为：
this.client = this.clientsService.getClient()
.subscribe(data => {
console.log(data);
});
But I'm getting 404 error
但我收到 404 错误
But I have this jsonfile in the same folder where my service is.
但是我json在我的服务所在的同一文件夹中有这个文件。
What's wrong?
怎么了？
采纳答案by eko
You need to give the absolute path from your base path. Like, path/to/Services/client.json
您需要提供基本路径的绝对路径。喜欢，path/to/Services/client.json
Here's an example: https://plnkr.co/edit/60E2qb9gOjvkEAeR5CtE?p=preview
这是一个例子：https: //plnkr.co/edit/60E2qb9gOjvkEAeR5CtE?p=preview
回答by Vijay Gajera
If you using angular-cli Keep the json file inside Assets folder (parallel to app dir) directory
如果您使用 angular-cli 将 json 文件保存在 Assets 文件夹（与应用程序目录平行）目录中
In your case you need to create file like assets/client.json
在您的情况下，您需要创建类似 assets/client.json 的文件
return this.http.get('/client.json'))
.map((response: Response) => {
console.log("mock data" + response.json());
return response.json();
}
)
.catch(this.handleError);
}
Note: here you only need to give path inside assets folder like assets/client.json then you need to write path like /client.json
注意：这里你只需要在assets/client.json之类的assets文件夹中提供路径然后你需要像/client.json这样写路径
If you using webpack then you need to follow above same structure inside public folder its similar like assets folder.
如果您使用 webpack，那么您需要在公共文件夹中遵循上述相同的结构，其类似于资产文件夹。
回答by Nitin Wahale
Please add this code in file the typings.d.ts
请将此代码添加到typings.d.ts文件中
declare module "*.json"
{ const value: any;
export default value;
}
declare module "json!*"
{ const value: any;
export default value;
}
and simply import using import * as data1 from 'path.json';
并简单地使用导入 import * as data1 from 'path.json';
