Stackblitz, Angular Including JSON file not working

Question

I'm using Stackblitz: https://stackblitz.com/edit/bible-talk

I'm using Angular 10.

I'm trying to import data from a JSON file.

I found an example on how to do this on Stackblitz:

https://stackblitz.com/edit/json-import-example?file=src%2Fapp%2Fapp.component.html

You're supposed to add these to compiler options to tsconfig.json:

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

I've done that: https://github.com/JaredMathis/bible-talk/commit/449f6269b85bb53eb5aa245bd709075db4307163

I'm still getting this error:

Error in src/app/app.component.ts (2:18)
Cannot find module '../assets/kjv/John.json' or its corresponding type declarations.

I made a brand-new Stackblitz. It works there. https://stackblitz.com/edit/json-import-not-working?file=tsconfig.json

Answer 1

Your I think import in your github version is wrong, it starts with ./ where as your working stackblitz does not.

import data from './../assets/John.json';

Try removing the first ./

Answer 2

Stackblitz does not support static assets at the moment. See: https://github.com/stackblitz/core/issues/72

Workaround: You have to host your static assets somewhere else and link them in your code appropriately.