ローカルの.jsonファイルを読み込むAngular 5サービス

私はAngular 5を使用しており、angular-cliを使用してサービスを作成しました。

私がやりたいのは、Angular 5のローカルjsonファイルを読み込むサービスを作ることです。

これは私が作ったものです。ちょっと困っています...。

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@Injectable()
export class AppSettingsService {

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

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

  }

}

どうしたらこれを完成させることができますか？

dhilt
編集された質問 28日 12月 2017 в 11:38
プログラミング
javascript json angular
9日 11月 2017 в 4:28
8 ビュー
ソリューション

まず、HttpClientではなく、HttpClientModuleを注入する必要があります。 次に、.map((res:any) => res.json())を削除しなければなりません。新しいHttpClientはデフォルトでレスポンスのボディを与えてくれるので、これ以上は必要ないでしょう。 :

import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AppSettingsService {

   constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable {
        return this.http.get("./assets/mydata.json");
    }
}

これをコンポーネントに追加します。

@Component({
    selector: 'mycmp',
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
    constructor(
        private appSettingsService : AppSettingsService 
    ) { }

   ngOnInit(){
       this.appSettingsService.getJSON().subscribe(data => {
            console.log(data);
        });
   }
}
Powkachu
編集した答え 15日 4月 2019 в 3:18
解説 (5)

jsonを直接インポートするという方法もあります。

コンパイルするには、typings.d.tsファイルでこのモジュールを宣言します。

declare module "*.json" {
    const value: any;
    export default value;
}

あなたのコードで

import { data_json } from '../../path_of_your.json';

console.log(data_json)
解説 (8)

Webサーバーからファイルを読むのではなく、本当にローカルファイルを読む方法を探していたところ、この質問を見つけました（"remote file"と呼びたい）。

単に require を呼び出すだけです。

const content = require('../../path_of_your.json');

Angular-CLIのソースコードに触発されました。templateUrlプロパティをtemplateに、その値を実際の HTML リソースへのrequire` 呼び出しに置き換えることで、コンポーネント テンプレートをインクルードしていることがわかりました。

AOTコンパイラを使用する場合は、tsconfig.app.jsonを調整してノードタイプの定義を追加する必要があります。

"compilerOptions": {
  "types": ["node"],
  ...
},
...
解説 (1)