jsonファイルを表示するHttp getメソッドが見つかりません

Question

私はアングル4で全く新しいので、Web APIのhttpGetメソッドを呼び出そうとしています。 student.jsonという名前のjsonファイルを作成します。私はコンソールで自分のコードを実行すると、私はエラーの下に見ることができます：

http://localhost:4200/src/data/students.json 404 (Not Found) 

マイコード：

​​

enter image description here

私が間違って何ですか？前もって感謝します。

Answer 1

ng buildを実行する場合、distに移動し、.jsonファイルが存在しないことに気づきます。 これがサービスされていない理由です。ウェブパックバンドルはそのデータフォルダを追加していないため、アプリはあなたのファイルを見つけることができません。仕事にこれを取得する

一つの方法は、資産のフォルダにデータフォルダを配置することです： src/assets/data/students.json

あなたがng buildを実行する場合次に、資産は現在入手可能で、そしてあなたのstudents.jsonが同様に利用可能であることに注意してください。

これを行うことで、ng serveはあなたが望むものを得ることができます。心に留めておいてください.getはコンポーネントからの相対パスです。私はsrc/app/app.component.tsでそのコードを持っていたのであれば、たとえば、私はこのように、コードで../assets/data/students.json

相対パスを持つ、そしてassetsを入力し、最後にdata/students.jsonを読んで、srcに戻って1つのレベルに行くためにそれを言うだろう：

を

export class AppComponent { 
    title = 'app'; 

    constructor(private _http: Http) { 
    this._http.get('../assets/data/students.json').subscribe(
     (data)=>console.log(data.json()) 
    ); 
    } 
} 

希望します。

注：src/dataは表示されないため、ここではng buildと記載していますが、なぜ機能しないのですか。あなたは本当に必要はありませんng build、ng serveだけで十分です。

Answer 2

あなたのサービスのコード下記の使用

export class MyDataService { 

    constructor(private http: Http) { } 

    fetchData() { 
    this.http.get('../assets/data/students.json').subscribe(
     (data)=>console.log(data) 
    ); 
    } 

}