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の間でこの動作につながる可能性のある変更は何ですか？

jsonangularangular7
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.jsonのtypeRootsを更新して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