webentwicklung-frage-antwort-db.com.de

Importieren Sie JSON in Angular 7 project

In meinem Angular Projekt importiere ich JSON-Dateien für meinen eigenen kleinen Lokalisierungsdienst. Ich verwende die hier vorgeschlagene Methode und aktualisiere mein typings.d.ts bis

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

Dies hat bei Angular 6 funktioniert, aber nach der Aktualisierung auf Angular 7 scheinen meine Importe undefiniert zu sein, wenn ich versuche, auf eine Eigenschaft zuzugreifen.

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

var s = en["mykey"]

Der JSON hat eine sehr einfache Schlüssel => Wertestruktur:

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

Was hat sich zwischen 6.1 und 7 geändert, was zu diesem Verhalten führen könnte?

jsonangularangular7
10
Thomas

Stellt sich heraus mit Angular 7 & TypeScript 3.1 es gab tatsächlich einige Änderungen (Ich denke, sie sind seit TS 2.9+ da?). Verwenden Sie den Code in der Frage , alle Werte werden in ein 'default'-Objekt eingeschlossen, um dies zu verhindern, musste ich die Import-Anweisungen vereinfachen:

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

Siehe auch diese Frage für weitere Details zum Importieren von JSON-Dateien in TypeScript.

14
Thomas

Nach vielem Graben und Nachfahren und Fehlern habe ich meine App endlich dazu gebracht, JSON korrekt in Angular 7:

  1. Erstens remove

    "resolveJsonModule": true
"esModuleInterop": true

    von tsconfig.json, wenn Sie das von anderen nicht-Angular 7-spezifischen Antworten haben.

  2. Erstelle src/typings.d.ts:

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

  3. Aktualisieren Sie typeRoots in tsconfig.json, um src/typings.d.ts zu verwenden, z.

    "typeRoots": [
  "node_modules/@types",
  "src/typings.d.ts"
],

  4. JSON importieren:

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

In Angular 7 musste ich folgende Schritte ausführen:

1. Einfuhren

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

(2) tsconfig.json

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

(3) angular.json (um zu verhindern, dass bei JSON-Importen Flusen entstehen)

Die einzige Änderung hier ist das Hinzufügen von ... "**/*.json"

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