Comment importer un fichier JSON dans un fichier TypeScript ?

Question

Je construis une application de carte en utilisant Angular Maps et je veux importer un fichier JSON comme une liste de marqueurs définissant des emplacements. J'espère pouvoir utiliser ce fichier JSON comme tableau de marqueurs[] dans le fichier app.component.ts . Au lieu de définir un tableau de marqueurs codé en dur dans le fichier TypeScript.

Quelle est la meilleure façon d'importer ce fichier JSON pour l'utiliser dans mon projet ? Toute indication est la bienvenue !

Answer 1

La phrase d'Aonepathan fonctionnait pour moi jusqu'à une récente mise à jour du script.

J'ai trouvé le site de Jecelyn Yeen poste qui suggère de placer cet extrait dans votre fichier de définition TS

ajouter un fichier typings.d.ts dans le dossier racine du projet avec le contenu suivant

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

puis importez vos données comme ceci :

import * as data from './example.json';

mise à jour de juillet 2019 :

Typescript 2.9 ( docs ) a introduit une solution meilleure et plus intelligente. Des étapes :

1. Ajouter resolveJsonModule avec cette ligne dans votre tsconfig.json fichier :

   "compilerOptions": { ... "resolveJsonModule": true }

l'instruction d'importation peut maintenant supposer une exportation par défaut :

import data from './example.json';

et intellisense va maintenant vérifier le fichier json pour voir si vous pouvez utiliser les méthodes Array etc plutôt cool.

Answer 2

Voici la réponse complète pour Angular 6+ basée sur la réponse de @ryanrain :

De doc angular-cli Les fichiers json peuvent être considérés comme des actifs et accessibles à partir d'une importation standard sans utiliser de requête ajax.

Supposons que vous ajoutez vos fichiers json dans le répertoire "your-json-dir" :

1. ajouter "your-json-dir" dans le fichier angular.json ( :

   "assets": [ "src/assets", "src/your-json-dir" ]

2. créer ou modifier le fichier typings.d.ts (à la racine de votre projet) et ajouter le contenu suivant :

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

   Cela permettra d'importer des modules ".json" sans erreur de type script.

3. dans votre fichier contrôleur/service/autre, importez simplement le fichier en utilisant ce chemin relatif :

   import * as myJson from 'your-json-dir/your-json-file.json';

Answer 3

Merci pour votre contribution, j'ai pu trouver la solution, j'ai ajouté et défini le json en haut du fichier app.component.ts :

var json = require('./[yourFileNameHere].json');

Cela a finalement produit les marqueurs et est une simple ligne de code.

Answer 4

Première solution - il suffit de changer l'extension de votre fichier .json en .ts et d'ajouter export default au début du fichier, comme ceci :

export default {
   property: value;
}

Ensuite, vous pouvez simplement importer le fichier sans avoir besoin d'ajouter des typages, comme suit :

import data from 'data';

---

Deuxième solution récupérer le json via HttpClient.

Injectez HttpClient dans votre composant, comme ceci :

export class AppComponent  {
  constructor(public http: HttpClient) {}
}

et ensuite utiliser ce code :

this.http.get('/your.json').subscribe(data => {
  this.results = data;
});

https://angular.io/guide/http

Cette solution présente un avantage certain par rapport aux autres solutions proposées ici - elle ne vous oblige pas à reconstruire toute l'application si votre json change (il est chargé dynamiquement à partir d'un fichier séparé, vous pouvez donc modifier uniquement ce fichier).

Answer 5

J'avais lu certaines des réponses et elles ne semblaient pas fonctionner pour moi. J'utilise Typescript 2.9.2, Angular 6 et j'essaie d'importer JSON dans un test unitaire Jasmine. Voici ce qui a fonctionné pour moi.

Ajouter :

"resolveJsonModule": true,

A tsconfig.json

Importation comme :

import * as nameOfJson from 'path/to/file.json';

Stop ng test et recommencer.

Référence : https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-imports