¿Cómo importar un archivo JSON a un archivo TypeScript?

117

Estoy construyendo una aplicación de mapas usando Angular Maps y quiero importar un archivo JSON como una lista de marcadores que definen ubicaciones. Espero usar este archivo JSON como matriz de marcador [] dentro de app.component.ts. En lugar de definir una matriz codificada de marcadores dentro del archivo TypeScript.

¿Cuál es el mejor proceso para importar este archivo JSON para usar en mi proyecto? ¡Cualquier dirección muy apreciada!

1
  • puede ver mi respuesta, ya que es aplicable a Angular 7+
    Yulian
    15/07/19 a las 14:02
172

El one-liner de Aonepathan funcionó para mí hasta una reciente actualización mecanografiada.

He encontrado de Jecelyn Yeen puesto que sugiere la publicación de este fragmento en el archivo de definición de TS

agregue el archivo typings.d.tsa la carpeta raíz del proyecto con el contenido a continuación

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

y luego importe sus datos así:

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

actualización de julio de 2019:

TypeScript 2.9 ( docs ) introdujo una solución mejor y más inteligente. Pasos:

  1. Agregue resolveJsonModulesoporte con esta línea en su tsconfig.jsonarchivo:
"compilerOptions": {
    ...
    "resolveJsonModule": true
  }

la declaración de importación ahora puede asumir una exportación predeterminada:

import data from './example.json';

e intellisense ahora verificará el archivo json para ver si puede usar los métodos Array, etc. muy genial.

13
  • 3
    Esto también funcionó para mí, ¡súper hábil! NOTA: Necesita reiniciar su servidor de desarrollo para que esto se compile correctamente. 30/04/18 a las 21:29
  • 15
    Me estoy poniendo Cannot find module '*.json'. Consider using '--resolveJsonModule' to import module with '.json' extensionts(2732) 26 de mayo de 2019 a las 15:39
  • 6
    También necesitaba agregar "esModuleInterop": true,como se especifica en los documentos mecanografiados, sin embargo, también dicen usar commonjscomo en modulelugar de esnext. Esto parece funcionar con ambos. ¿Hay alguna razón para cambiar a commonjs (como se menciona en los documentos) como oponerse a seguir con el valor predeterminado de esnext?
    timhc22
    29/10/19 a las 16:09
  • 2
    lo mismo que los comentarios anteriores que necesitaba "esModuleInterop":true. Además, el código VS todavía me muestra un error ... pero todo funciona bien
    mikey
    11 mar.20 a las 3:45
  • 8
    He tenido que añadir "allowSyntheticDefaultImports": trueen el compilerOptions, así como con un proyecto fresco angular 9.1.11. 19/06/20 a las 21:56
45

Como se indica en esta publicación de Reddit , después de Angular 7, puede simplificar las cosas a estos 2 pasos:

  1. Agregue esas tres líneas a compilerOptionssu tsconfig.jsonarchivo:
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
  1. Importe sus datos json:
import myData from '../assets/data/my-data.json';

Y eso es. Ahora puede usarlo myDataen sus componentes / servicios.

3
  • 1
    ¿ esModuleInteropPara qué sirve ? 14/12/20 a las 20:50
  • @giovannipds es para las importaciones json predeterminadas 5 de enero a las 20:05
  • En mi caso, Angular 10 y Typecript 4.0.2, no necesitaba "allowSyntheticDefaultImports" 23 de junio a las 16:17
26

Aquí hay una respuesta completa para Angular 6+ basada en la respuesta de @ryanrain:

Desde angular-cli doc , json se puede considerar como activos y se puede acceder a él desde la importación estándar sin el uso de la solicitud ajax.

Supongamos que agrega sus archivos json en el directorio "your-json-dir":

  1. agregue "su-json-dir" en el archivo angular.json (:

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

  2. cree o edite el archivo typings.d.ts (en la raíz de su proyecto) y agregue el siguiente contenido:

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

    Esto permitirá la importación de módulos ".json" sin errores de mecanografía.

  3. en su controlador / servicio / cualquier otro archivo, simplemente importe el archivo usando esta ruta relativa:

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

3
  • 3
    ¿Qué pasa si no tengo un archivo typings.d.ts? 27 de junio de 2018 a las 4:50
  • 2
    entonces tienes que crear uno en la raíz de tu proyecto con solo el contenido del paso 2 27/06/18 a las 13:07
  • 2
    Nota importante: agregue el archivo de escritura personalizado a typeRoots en tsconfig.json "typeRoots": ["node_modules / @ types", "src / typings.d.ts"], 18 oct 2018 a las 21:56
25

Gracias por los chicos de entrada, pude encontrar la solución, agregué y definí el json en la parte superior del archivo app.component.ts:

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

Esto finalmente produjo los marcadores y es una simple línea de código.

3
  • 6
    Me error TS2304: Cannot find name 'require'.resolví agregando declare var require: any;, como se explica en los comentarios de la respuesta aceptada para la pregunta stackoverflow.com/questions/43104114/… .
    Ben
    30/03/18 a las 19:16
  • 4
    @Ben, debe agregar el tipo de nodo a su tsconfig. es decir, "compilerOptions": { ... "types": ["node"] },aquí está la respuesta relacionada para aquellos que la requieren: stackoverflow.com/a/35961176/1754995
    Kody
    9/08/19 a las 16:47
  • Hola @aonepathan, espero que puedas ayudarme: tengo una biblioteca que requiere leer un archivo json. var json = require('./[yourFileNameHere]');sin la extensión. En el momento de la compilación, tengo un error: Module not found: Error: Can't resolve [yourFileNameHere] in [file name]¿tiene alguna idea para evitar este problema?
    Neo1975
    21/07/20 a las 6:48
17

Primera solución : simplemente cambie la extensión de su archivo .json a .ts y agregue export defaultal principio del archivo, así:

export default {
   property: value;
}

Luego, simplemente puede importar el archivo sin la necesidad de agregar mecanografía, así:

import data from 'data';

La segunda solución obtiene el json a través de HttpClient.

Inyecte HttpClient en su componente, así:

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

y luego usa este código:

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

https://angular.io/guide/http

Esta solución tiene una clara ventaja sobre otras soluciones proporcionadas aquí: no requiere que reconstruya la aplicación completa si su json cambia (se carga dinámicamente desde un archivo separado, por lo que puede modificar solo ese archivo).

1
  • 2
    La primera solución es buena si sus datos son estáticos y no cambiarán durante mucho tiempo; le ahorrará solicitudes http innecesarias, pero si estos datos cambian constantemente, utilice la segunda solución enviada por el servidor o incluso considere agregarla a una base de datos si el conjunto de datos es enorme 16/01/19 a las 21:32
14

Había leído algunas de las respuestas y no parecían funcionar para mí. Estoy usando TypeScript 2.9.2, Angular 6 e intento importar JSON en una prueba unitaria de Jasmine. Esto es lo que me sirvió.

Agregar:

"resolveJsonModule": true,

Para tsconfig.json

Importar como:

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

Deténgase ng test, comience de nuevo.

Referencia: https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-imports

2
  • 1
    Esta fue la mejor solución para mí. No se necesita un archivo de mecanografía, y TS puede resolver los nombres de las propiedades por usted. 25/04/19 a las 12:06
  • 1
    Esta es una gran solución, ni siquiera tiene que usar JSON.parse (). ¡Es un objeto TS común desde el primer momento! 3 de abril a las 4:31
9

A partir de TypeScript 2.9 , simplemente se puede agregar:

"compilerOptions": {
    "resolveJsonModule": true
}

al tsconfig.json. A partir de entonces, es fácil usar un archivo json ( y también habrá una buena inferencia de tipo en VSCode):

data.json:

{
    "cases": [
        {
            "foo": "bar"
        }
    ]
}

En su archivo de TypeScript:

import { cases } from './data.json';

8

Para Angular 7+,

1) agregue un archivo "typings.d.ts" a la carpeta raíz del proyecto (por ejemplo, src / typings.d.ts):

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

2) importar y acceder a datos JSON ya sea:

import * as data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
    constructor() {
        console.log(data.default);
    }

}

o:

import data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
    constructor() {
        console.log(data);
    }

}
3
  • data.default me ​​estaba colgando. ¡Gracias por el ejemplo completo! 21/12/18 a las 18:53
  • Tenga cuidado con la ruta a su archivo json porque es relevante para el archivo que importa el archivo, por ejemplo, si tiene un servicio en la src/app/services/carpeta y su json está en la src/assets/data/carpeta, debe especificarlo como../../assets/data/your.json 11/01/19 a las 15:21
  • Funciona perfectamente, pero ¿por qué se necesita el archivo typings.d.ts?
    robert
    22/03/19 a las 21:36
8

Angular 10

Ahora debería editar el archivo tsconfig.app.json(observe la "aplicación" en el nombre) en su lugar.

Allí encontrará el compilerOptions, y simplemente agregue resolveJsonModule: true.

Entonces, por ejemplo, el archivo en un proyecto nuevo debería verse así:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "resolveJsonModule": true
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}
5

En angular7, simplemente usé

let routesObject = require('./routes.json');

Mi archivo route.json se ve así

{

    "routeEmployeeList":    "employee-list",
    "routeEmployeeDetail":      "employee/:id"
}

Accede a elementos json usando

routesObject.routeEmployeeList
1
  • ¡Eso es todo! ;-) ¡Todas las demás opciones son tan hacky! Si tiene TSLint arrojará un reuqireerror, simplemente agregue declare var require: any;encima del componente de la clase. 27/03/19 a las 18:13
3
let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);

var handleJSONFile = function (err, data) {
   if (err) {
      throw err;
   }
   markers= JSON.parse(data);
 }
2

No pude importar un archivo.json diferente también. Pero lo resolví así

const swaggerDoc = require('../swagger.json')