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

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 de marcadores codificada 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!

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 ) presentó 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.

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

2. Importe sus datos json:

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

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

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 utilizando esta ruta relativa:

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

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.

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

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

Añadir:

"resolveJsonModule": true,

A 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

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:

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);
    }

}

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

A partir de Typecript 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';

let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);

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

Angular 10

Ahora debería editar el tsconfig.app.json(observe la "aplicación" archivo 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"
  ]
}