web-dev-qa-db-ja.com

Angular 6-ローカルからJSONをロード

私は2つの方法のローカルJSONファイルをロードしようとしています。

これは私のjsonファイルです。

{
  "imgsesion": "fa_closesesion.png",
  "texthome": "volver a la home",
  "logo": "fa_logo.png",
  "menu": {
    "background": "orange",
    "link1": "ESCRITOR",
    "link2": "MÚSICO",
    "link3": "AYUDA ADMIN",
    "submenu": {
      "link1": {
        "text1": "novelas",
        "text2": "obras de teatro"
      },
      "link2": {
        "text1": "compositor",
        "text2": "intérprete"
      }
    }
  }
}
  • 方法1：Httpを使用する

これは私のサービスファイル（general.service.ts）です

  getContentJSON() {
    return this.http.get('assets/json/general.json')
    .map(response => response.json());
  }

この方法は問題なく動作しますが、Webブラウザコンソールに次のエラーが表示されます。

ERROR TypeError: Cannot read property 'menu' of undefined
  • 方法2：HttpClientを使用する

これは私のサービスファイル（general.service.ts）です

  getContentJSON() {
    return this.httpClient.get("assets/json/general.json");
  }

General.jsonファイルが見つからないため機能しません。エラーの制御を経て、エラー404が表示されます。

これはコンポーネントファイル（app.component.ts）です

export class AppComponent implements OnInit {
  contentGeneral: any;

ngOnInit() {
this.getContentJSON();
}

  getContentJSON() {
    this.generalService.getContentJSON().subscribe(data => {
      this.contentGeneral = data;
    }, // Bind to view
    err => {
      // Log errors if any
      console.log('error: ', err);
    });
  }

}

これはテンプレートファイル（app.component.html）：

<a href="#" routerLink="/home" class="linkHome">{{contentGeneral.texthome}}</a>

<div class="submenu" *ngIf="linkWrite.isActive || isSubMenuWriter">
    <span class="d-block text-right small">{{contentGeneral.menu.submenu.link1.text1}}</span>
    <span class="d-block text-right small">{{contentGeneral.menu.submenu.link1.text2}}</span>
</div>

これは私の実際のエラーです：

App.component.tsで、インポートを追加します。

import * as data_json from './assets/json/general.json';

しかし、ng serveを起動すると、次のエラーが表示されます。

enter image description here

どうすれば解決できますか？

jsonangular
7
Eladerezador

最も簡単な解決策：

import "myJSON" from "./myJson"

重要な更新！

このエラーのため、このメソッドは最新のAngularバージョンで動作を停止します。

Src/app/app.weather.service.ts（2,25）のエラー：エラーTS2732：モジュール './data.json'が見つかりません。 「--resolveJsonModule」を使用して「.json」拡張子を持つモジュールをインポートすることを検討してください

動作させるには、tsconfig.jsonに移動して、この2つを内部に追加します

compilerOptions（tsconfig.json）：

"resolveJsonModule": true,
"esModuleInterop": true,

変更後、ng serveを再実行します。

最初のオプションのみを使用すると、次のようなエラーが発生する可能性があります。

Src/app/app.weather.service.ts（2,8）のエラー：エラーTS1192：モジュール '".... app/data/data.json"'にはデフォルトのエクスポートがありません。

（私はここでこの非常に良い答えを見つけました（ https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/ ））

17
Kamil Naja

このように...

import "file" from "./file.json"

赤い線が出て、angularでモジュールが見つからないようなエラーが出ました。

いくつかのRNDの後、私は自分のために働く別の方法を得ました。それが誰かを助けることを願っています。

var data = require('src/file.json');
console.log("Json data : ", JSON.stringify(data));
13
Sachin Shah

この記事を参照 ：

import data  from './data.json';
export class AppComponent  {
    json:any = data;
}
3
Ole

Angular 2、Angular 4およびAngular 5の場合、次のメソッドを使用してローカル.jsonをロードできます。コンポーネントへのファイル。

const data = require('../../data.json');

export class AppComponent  {
    json:any = data;
}

コンポーネントでrequireを使用するには、次を実行して@types/nodeをインストールする必要がありました

npm install @types/node --save-dev

tsconfig.app.json> compilerOptionsの下で次の構成変更を行います

"compilerOptions": {
  "types": ["node"],
  ...
},

Angular 6の後、次のようにファイルシステムから直接インポートを使用できます。

import data  from '../../data.json';

export class AppComponent  {
    json:any = data;
}

tsconfig.app.json> compilerOptionsの下で次の構成変更を行います

"compilerOptions": {
  ...
  "resolveJsonModule": true,
  "allowSyntheticDefaultImports": true,
  "esModuleInterop": true,
  ...
},
3
Aravinda Meewalaarachchi

これは、JSONファイルを非同期でリクエストしているため、安全なナビゲーションオペレーターまたはngIfを使用して処理できるためです。

<div class="submenu" *ngIf="linkWrite.isActive || isSubMenuWriter">
                  <span class="d-block text-right small">{{contentGeneral?.menu?.submenu?.link1?.text1}}</span>
                  <span class="d-block text-right small">{{contentGeneral?.menu?.submenu?.link1?.text2}}</span>
                </div>

または、コンポーネントにJSONファイルをインポートして、sampleJSONを割り当てます。

import "sampleJSON" from "./sampleJSON"
1
Sajeetharan

次のコードスニペットを使用できます。

declare const require;
const locale = localStorage.getItem('locale');
require(`./file.${locale}.json`)
1
tair yassine

更新された答え- ローカル.jsonファイルを読み取るためのAngular 5サービス

Intsconfig.json

"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,

enter image description here

0
Surya R Praveen