Import JSON in Angular 7 project

Turns out with Angular 7 & TypeScript 3.1 there actually have been some changes (I guess they have been there since TS 2.9+?). Using the code in the question, all values are wrapped inside a 'default'-object. To prevent this I had to simplify the import statements:

import de from './strings/de.json';
import en from './strings/en.json';

Also see this question for more details on how to import JSON files in TypeScript.

After a lot of digging and trail and error, I finally got my app to import JSON correctly in Angular 7:

1. Firstly, remove

   "resolveJsonModule": true
   "esModuleInterop": true
   

   from tsconfig.json, if you have that in there from other non-Angular 7 specific answers.

2. Create src/typings.d.ts:

   declare module "*.json" {
     const value: any;
     export default value;
   }
   

3. Update typeRoots in tsconfig.json to use src/typings.d.ts, e.g:

   "typeRoots": [
     "node_modules/@types",
     "src/typings.d.ts"
   ],
   

4. Import JSON:

   import data from './data.json';
   console.log(data);