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の間でこの動作につながる可能性のある変更は何ですか?
Angular 7およびTypeScript 3.1で判明 実際にはいくつかの変更がありました (TS 2.9+以降に存在したと思いますか?)質問のコードを使用して、すべての値は「デフォルト」オブジェクト内にラップされます。これを防ぐには、importステートメントを単純化する必要がありました。
import de from './strings/de.json';
import en from './strings/en.json';
詳細についてはこの質問もご覧ください JSONファイルをTypeScriptにインポートする方法について。
多くの掘り下げと追跡とエラーの後、私はついにAngular 7でJSONを正しくインポートするアプリを手に入れました:
まず、削除
"resolveJsonModule": true
"esModuleInterop": true
fromtsconfig.json、他の非Angular 7固有の回答からそこにある場合。
作成src/typings.d.ts:
declare module "*.json" {
const value: any;
export default value;
}
tsconfig.jsonのtypeRoots
を更新してsrc/typings.d.ts、例:
"typeRoots": [
"node_modules/@types",
"src/typings.d.ts"
],
JSONのインポート:
import data from './data.json';
console.log(data);
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"
]
}
}