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

Ya no necesitas buscar más por todo internet ya que llegaste al sitio correcto, poseemos la respuesta que quieres hallar sin complicaciones.

Solución:

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

Encontré la publicación de Jecelyn Yeen que sugiere publicar este fragmento en su archivo de definición de TS

agregar archivo typings.d.ts a 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 de esta manera:

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. Agregar resolveJsonModule apoya con esta línea en tu tsconfig.json Archivo:

"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.

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

1. Añade esas tres líneas a compilerOptions en tus tsconfig.json Archivo:

"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true

2. Importa tus datos json:

import myData from '../assets/data/my-data.json';

Y eso es. Ahora puedes usar myDataen sus componentes/servicios.

Aquí está la 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 ellos 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 “your-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 error de mecanografiado.

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

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

Si entiendes que ha sido de provecho nuestro post, sería de mucha ayuda si lo compartieras con otros programadores de esta forma contrubuyes a extender este contenido.

---

---

Utiliza Nuestro Buscador