Búsqueda de sitios web

typescript - ¿resolveJsonModule no funciona con Angular 10?

Tengo un archivo JSON básico en mi carpeta de assets de un proyecto nuevo de Angular 10.
Angular CLI: 10.0.1 Node: 14.5.0 OS: win32 x64 Versión de TSC 3.9.5. En mi tsconfig.json tengo

  "compilerOptions": {
    "module": "commonjs",
    "resolveJsonModule": true,
    "esModuleInterop": true
  }

He reiniciado vscode varias veces y he intentado compilar desde el terminal de vscode, una ventana de powershell y un terminal bash, todos devolviendo el mismo mensaje: "Considere usar '--resolveJsonModule' para importar un módulo con la extensión '.json'". He intentado compilar con múltiples combinaciones de diferentes opciones. En este punto me pregunto si debería reiniciar este proyecto y simplemente degradar mi versión de Angular.

Respuesta #1

En Angular versión 10 tenemos 3 archivos "tsconfig".

Tienes que agregar las opciones resolveJsonModule y esModuleInterop en el archivo tsconfig.json dentro de compilerOptions.

El archivo debería verse así:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Actualización: ¡Debe agregarse a tsconfig.json y no a tsconfig.app.json!

Respuesta #2

Si alguien tiene algo similar en Angular 11:

Recibí este mensaje de error adicional:

No se puede encontrar el módulo 'nameOfMyJsonFile.json'. Considera usar '--resolveJsonModule' para importar módulos con la extensión '.json'.

Así que tuve que agregar resolveJsonModule al archivo "tsconfig.json" dentro de compilerOptions, NO en tsconfig.app.json.

 {
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "resolveJsonModule": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "module": "es2020",
        "lib": [
          "es2018",
          "dom"
        ]
      }
    }

Respuesta #3

Tuve el mismo problema al ejecutar pruebas de Ionic 5 (Angular 12). Lo resolví con:

import * as SomeJsonObjectName from './assets/someObject.json

pero solo después de agregar

"resolveJsonModule": true,

a las compilerOptions de tsconfig.json

Artículos relacionados