angular - 将 .json 文件导入 Angular - "resolves to a non-module entity and cannot be imported using this construct."

Question

我正在尝试将 .json 文件导入到 angular 的 typescript 文件中。

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

上面的导入语句给出了以下错误:

untouchable-app/library/data/languages"' resolves to a non-module entity and cannot be imported using this construct.

文件夹结构。

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

我已经更新到 typescript 版本 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/*"
      ]
    }
  }
}

library/services/report/report.service.ts

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

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

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

注意

我有一个“库”文件夹，其中包含可以在我的项目文件夹中包含的多个应用程序之间共享的通用组件和服务。我正在将库中的服务导入到我的应用程序中。服务文件是包含对 json 数据的导入语句的文件。

Answer 1

尝试将以下内容添加到您的 tsconfig.json 中:

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

然后以这种方式导入您的 json 文件:

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

这对我有用(Angular 6，带有 angular cli)。