7

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?

six
  • 87
  • 1
  • 1
  • 7
  • Does this answer your question? [Importing JSON file in TypeScript](https://stackoverflow.com/questions/49996456/importing-json-file-in-typescript) – Shafiq Jetha Jul 15 '21 at 21:34

4 Answers4

10

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)
afm215
  • 136
  • 1
  • 6
9

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
Shafiq Jetha
  • 1,337
  • 16
  • 30
0

I had the same problem after upgrading to Angular 12.1.1

The JSON file was structured as a single object so I changed it to an array of objects and fixed the error for me.

JayJay Barnard
  • 85
  • 1
  • 5
0

Completing the answer from afm215, this is what I had to do in order to make the app run and the spec test file work successfully:

import * as deMessages from 'devextreme/localization/messages/de.json';
...
@Component({
  selector: 'dkl-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
...
constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private translationService: TranslationService,
  ) {
    // Use the intermediate variable
    const messages = deMessages;
    loadMessages({ de: messages.de }); // Here I used to have the problem
    ...
  }
}

So thanks afm215!!

Raul Ruiz
  • 49
  • 6