web-dev-qa-db-fra.com

Importer JSON dans le projet Angular 7

Dans mon Angular $ angulaire, j'importe des fichiers JSON pour mon propre petit service de localisation. J'utilise la méthode suggérée ici , pour mettre à jour mon typings.d.ts à

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

Cela a bien fonctionné pour Angular 6, mais après la mise à jour vers Angular 7, il semble que mes importations ne sont pas définies lorsque j'essaie d'accéder à une propriété.

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

var s = en["mykey"]

Le JSON a une structure très simple clé => valeur:

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

Qu'est-ce qui a changé entre 6.1 et 7 qui pourrait conduire à ce comportement?

jsonangularangular7
10
Thomas

Il s'avère avec Angular 7 & TypeScript 3.1 il y a eu quelques modifications (je suppose qu'ils sont là depuis TS 2.9+?). Utiliser le code de la question , toutes les valeurs sont encapsulées dans un objet 'default'. Pour éviter cela, je devais simplifier les instructions d'importation:

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

Voir également cette question pour plus de détails sur la manière d'importer des fichiers JSON dans TypeScript.

14
Thomas

Après beaucoup de recherches, de pistes et d’erreurs, j’ai enfin réussi à importer correctement JSON dans Angular 7:

  1. Tout d'abord, enlever

    "resolveJsonModule": true
"esModuleInterop": true

    de tsconfig.json , si vous avez cela dans d'autres réponses spécifiques non angulaires 7.

  2. Créez src/typings.d.ts :

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

  3. Mettre à jour typeRoots dans tsconfig.json à utiliser src/typings.d.ts , par exemple:

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

  4. Importer JSON:

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

Dans Angular 7, je devais suivre ces étapes:

(1) importations

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

(2) tsconfig.json

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

(3) angular.json (pour empêcher la rupture des peluches sur les importations JSON)

Le seul changement ici est d'ajouter ... "**/*.json"

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