Question

我正在尝试将.json文件导入有角度的打字稿文件中。

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

上面的import语句给出以下错误：

untouchable-app / library / data / languages”解析为非模块实体，无法使用此构造导入。

文件夹结构。

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

我已更新为打字稿版本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/*"
      ]
    }
  }
}

库/服务/报告/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数据的import语句的文件。

Answer 1

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

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

然后以这种方式导入json文件：

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

这对我有用（角度6，角度cli）。

将.json文件导入Angular-“解析为非模块实体，无法使用此构造导入。”

1 个答案: