Angular2では、/data/というフォルダがあり、そこにjsonファイルがあり、localhost:4200/data/something.jsonでアクセスすることができた。
これはAngular4ではもう不可能です。
どうすれば動くようになるのか、何かアイデアはありますか?
このコードを使用することができます。
@Injectable()
export class AppServices{
constructor(private http: Http) {
var obj;
this.getJSON().subscribe(data => obj=data, error => console.log(error));
}
public getJSON(): Observable<any> {
return this.http.get("./file.json")
.map((res:any) => res.json())
.catch((error:any) => console.log(error));
}
}
ここで、file.json
はあなたのローカルのjsonファイルです。
こちらもご覧ください
パスについては、angular-cliのchanglogも参照してください。
もちろん、それは可能です。以下があなたのjsonファイルだと仮定してみましょう
<br>;
[ここに画像の説明を入力][1]。
とします; そして、このjsonファイルを呼び出すためのコードを以下に示します;
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'
@Injectable()
export class YourService {
constructor(private http: Http) { }
getAdvantageData(){
let apiUrl = './assets/data/api/advantage.json';
return this.http.get(apiUrl)
.map( (response: Response) => {
const data = response.json();
return data;
});
}
}
同じ問題に直面していました。ObservableAngularサービスが「src / app /」フォルダー内にあり、ローカルのJSONファイルをロードしようとしていました。 JSONファイルを同じアプリフォルダー内、新しい「api」フォルダー内に配置しようとしましたが、さまざまな種類の親族/絶対ルートを使用しましたが、役に立たず、404エラーが発生しました。 「アセット」フォルダーに入れた瞬間、うまくいきました。 まだまだあると思います?
多分このリンクは役立ちます:
この投稿に基づいて、Angular 6+の完全な回答を示します。
angular-cli docから、jsonは資産と見なされ、ajaxリクエストを使用せずに標準インポートからアクセスできます。
jsonファイルを「your-json-dir」ディレクトリに追加するとします。
1。 angular.jsonファイルに「your-json-dir」を追加します(:
`` "資産":[。
「src / assets」、
"src / your-json-dir"。
] ```。
2。 typings.d.tsファイルにjsonモジュールをインポートして、typescriptエラーを防ぐことができます。
```declareモジュール "* .json" {。
const値:任意;。
デフォルト値をエクスポートします。
} ```。
3。 コントローラ/サービス/その他のファイルでは、次の相対パスを使用してファイルをインポートするだけです。
`import * 'your-json-dir / your-json-file.json'; `からmyJsonとして。