ファイルtypescriptですから

Question

をJSONを取得し、私は私のサービス

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); 
    } 
} 

にこのコードを持っているし、私のコンポーネントで、私はそれを呼んでいる：

this.client = this.clientsService.getClient() 
    .subscribe(data => { 
    console.log(data); 
    }); 

をしかし、私は404エラーに

を取得しています

私はこのjsonファイルを私のサービスがある同じフォルダに持っていますです。

は何が悪いのでしょうか？

Answer 1

基本パスから絶対パスを与える必要があります。同様に、path/to/Services/client.json

はここに例を示しますhttps://plnkr.co/edit/60E2qb9gOjvkEAeR5CtE?p=preview

Answer 2

あなたは角度-CLIを使用した場合は資産フォルダ（アプリケーションディレクトリに対して平行）あなたは資産のようなファイルを作成する必要があり、あなたの場合は、ディレクトリ

内部のJSONファイルを保管してください/client.json

return this.http.get('/client.json')) 
    .map((response: Response) => { 
     console.log("mock data" + response.json()); 
     return response.json(); 
    } 
    ) 
    .catch(this.handleError); 
} 

注：ここであなただけの資産が資産のようにフォルダ内のパスを指定する必要があります/ client.jsonは、あなたは/client.json

のようなパスを記述する必要があります

webpackを使用している場合は、上記と同じ構造のパブリックフォルダ内の同様のassetsフォルダのようにする必要があります。