typescript - Importera .json-filer till Angular - "resolves to a non-module entity and cannot be imported using this construct."

Jag försöker importera en .json-fil till en TypeScript-fil i Angular.

import * as languagesData from './../../data/languages.json';

Ovanstående importanvisning ger följande fel:

"untouchable-app/library/data/languages"'" leder till en icke-modulentitet och kan inte importeras med denna konstruktion.

Mappstruktur.

library/
projects/
node_modules/
tsconfig.json
typings.d.ts

Jag har uppdaterat till TypeScript-version 2.9.2

package.json

"devDependencies": {
    "typescript": "^2.9.2"
}

typings.d.ts

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

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "resolveJsonModule": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": {
      "library": [
        "library/"
      ],
      "library/*": [
        "library/*"
      ]
    }
  }
}

bibliotek/tjänster/rapport/rapport.tjänst.ts

import * as languagesData from './../../data/languages.json';

projects/project-name/src/app/app.component.ts

import { ReportService } from 'library/services/report/report.service';

Notera

Jag har en "bibliotek"-mapp som innehåller vanliga komponenter och tjänster som kan delas mellan flera appar som finns i min projektmapp. Jag importerar en tjänst från biblioteket till min applikation. Tjänstfilen är den som innehåller import-satsen till JSON-datan.

Svar #1

Försök att lägga till följande i din tsconfig.json:

  "compilerOptions": {
     ...
     "esModuleInterop": true,
     ...
  }

Och importera sedan dina json-filer på det här sättet:

import languagesData from './../../data/languages.json';

Detta fungerade för mig (Angular 6, med Angular CLI).

Relaterade artiklar