Angular4：ローカルのjsonにアクセスする方法は？

このコードを使用することができます。

@Injectable()
export class AppServices{

    constructor(private http: Http) {
         var obj;
         this.getJSON().subscribe(data => obj=data, error => console.log(error));
    }

    public getJSON(): Observable {
         return this.http.get("./file.json")
                         .map((res:any) => res.json())
                         .catch((error:any) => console.log(error));

     }
}

ここで、file.jsonはあなたのローカルのjsonファイルです。

こちらもご覧ください

• Httpクラスを使ってangular2でjsonファイルを取得する方法。

パスについては、angular-cliのchanglogも参照してください。

• https://github.com/angular/angular-cli/blob/master/CHANGELOG.md#100-rc4-2017-03-20

もちろん、それは可能です。以下があなたのjsonファイルだと仮定してみましょう

同じ問題に直面していました。ObservableAngularサービスが「src / app /」フォルダー内にあり、ローカルのJSONファイルをロードしようとしていました。 JSONファイルを同じアプリフォルダー内、新しい「api」フォルダー内に配置しようとしましたが、さまざまな種類の親族/絶対ルートを使用しましたが、役に立たず、404エラーが発生しました。 「アセット」フォルダーに入れた瞬間、うまくいきました。 まだまだあると思います?

多分このリンクは役立ちます:

アンギュラーのコンポーネント関連パス。

「必須」も使用できます。

let test = require('./test.json');

この投稿に基づいて、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として。

angular.jsonの[資産]タグの下にフォルダーの場所を追加できます。

"assets": [
          "src/favicon.ico",
          "src/assets",
          "src/api"
        ],

私はそれを理解した。

Angular2ではsrcフォルダの下にフォルダを用意していました。 Angular4では、ルートフォルダに置く必要があります。

例を挙げます：

Angular2です：

ルート / src / データ / file.json

Angular4です：

ルート / データ / ファイル.json