web-dev-qa-db-ja.com

Angular 7プロジェクトでJSONをインポートする

Angularプロジェクトでは、自分の小さなローカリゼーションサービス用にJSONファイルをインポートしています。 ここで提案されている方法 を使用して、typings.d.tsを更新しています

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

これはAngular 6で正常に機能しましたが、Angular 7への更新後、プロパティにアクセスしようとするとインポートが未定義のようです。

import * as de from './strings/de.json';
import * as en from './strings/en.json';

var s = en["mykey"]

JSONには、非常に単純なキー=>値の構造があります。

{
  "myKey": "My Headline",
  …
}

6.1と7の間でこの動作につながる可能性のある変更は何ですか?

10
Thomas

Angular 7およびTypeScript 3.1で判明 実際にはいくつかの変更がありました (TS 2.9+以降に存在したと思いますか?)質問のコードを使用して、すべての値は「デフォルト」オブジェクト内にラップされます。これを防ぐには、importステートメントを単純化する必要がありました。

import de from './strings/de.json';
import en from './strings/en.json';

詳細についてはこの質問もご覧ください JSONファイルをTypeScriptにインポートする方法について。

14
Thomas

多くの掘り下げと追跡とエラーの後、私はついにAngular 7でJSONを正しくインポートするアプリを手に入れました:

  1. まず、削除

    "resolveJsonModule": true
    "esModuleInterop": true
    

    fromtsconfig.json、他の非Angular 7固有の回答からそこにある場合。

  2. 作成src/typings.d.ts

    declare module "*.json" {
      const value: any;
      export default value;
    }
    
  3. tsconfig.jsontypeRootsを更新してsrc/typings.d.ts、例:

    "typeRoots": [
      "node_modules/@types",
      "src/typings.d.ts"
    ],
    
  4. JSONのインポート:

    import data from './data.json';
    console.log(data);
    
7
Greg Brown

Angular 7では、次の手順を実行する必要がありました。

(1)輸入

import pkg from '../../package.json'

(2)tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    AND more compiler options here
  }
}

(3)angular.json(JSONインポートでng lintの破損を停止するため)

ここでの唯一の変更は、... "**/*.json"を追加することです

"lint": {
  "builder": "@angular-devkit/build-angular:tslint",
  "options": {
    "tsConfig": [
      "src/tsconfig.app.json",
      "src/tsconfig.spec.json"
    ],
    "exclude": [
      "**/node_modules/**",
      "**/*.json"
    ]
  }
}
6
danday74