错误-不应导入命名导出

Question

我已经将我的Angular项目更新到12.0.5版本，并将Typescript版本更新到4.3.4，但我在编译该项目时遇到了问题。

目前，在没有对分支进行更改的情况下，我得到了以下错误：

Should not import the named export 'provinces' (imported as 'data') from default-exporting module (only default export is available soon)

这是import

import { ApiService, Municipality, Province } from '../../services/api.service';

下面是我声明依赖于导入省份的变量的方式：

public provinces: Province[] = [];
  private currentPorvince: Province;

问题出在哪里？为什么会发生这种情况，我如何解决它？

Answer 1

我能够通过遵循这里概述的步骤来解决这个问题：https://www.codegrepper.com/code-examples/javascript/read+json+file+in+typescript (它引用了一个SO post：Importing JSON file in TypeScript)

基本上，您必须将以下内容添加到您的tsconfig.json文件中(我将其添加到根tsconfig.json文件中，因为其他所有内容都继承自它)：

"resolveJsonModule": true,
"esModuleInterop": true,

然后，您可以使用默认导入来命名类：

import { default as data } from '../../services/api.service';
data.provinces

Answer 2

使用中间变量似乎适用于我的Angular 12.2.5：

import * as data from 'path/to/file.json'

let intermediateJson = data
//make it crash: console.log(data.property)
console.log(intermediateJson.property)

Answer 3

在升级到Angular 12.1.1之后，我也遇到了同样的问题

JSON文件被构造为单个对象，因此我将其更改为对象数组，并为我修复了错误。