Error - Should not import the named export

Question

I have updated my Angular project to version 12.0.5 and Typescript version to 4.3.4 and I am having trouble compiling the project.

Currently I get the following error without having made changes to the branch:

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

This is the import:

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

And this is how I declare the variables that depend on the import Province:

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

What is the problem? Why is this happening and how can I solve it?

Answer 1

Using an intermediate variable seems to work for me with 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 2

I was able to resolve this by following the steps outlined here: https://www.codegrepper.com/code-examples/javascript/read+json+file+in+typescript (which in turn references a SO post: Importing JSON file in TypeScript)

Basically, you have to add the following to your tsconfig.json file (I added it to my root tsconfig.json file since everything else inherits from it):

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

Then you can use default importing to name the class:

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