How to import JSON File into a TypeScript file?
Aonepathan's one-liner was working for me until a recent typescript update.
I found Jecelyn Yeen's post which suggests posting this snippet into your TS Definition file
add file typings.d.ts
to the project's root folder with below content
declare module "*.json" { const value: any; export default value;}
and then import your data like this:
import * as data from './example.json';
update July 2019:
Typescript 2.9 (docs) introduced a better, smarter solution. Steps:
- Add
resolveJsonModule
support with this line in yourtsconfig.json
file:
"compilerOptions": { ... "resolveJsonModule": true }
the import statement can now assumes a default export:
import data from './example.json';
and intellisense will now check the json file to see whether you can use Array etc. methods. pretty cool.
As stated in this reddit post, after Angular 7, you can simplify things to these 2 steps:
- Add those three lines to
compilerOptions
in yourtsconfig.json
file:
"resolveJsonModule": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true
- Import your json data:
import myData from '../assets/data/my-data.json';
And that's it. You can now use myData
in your components/services.
Here is complete answer for Angular 6+ based on @ryanrain answer:
From angular-cli doc, json can be considered as assets and accessed from standard import without use of ajax request.
Let's suppose you add your json files into "your-json-dir" directory:
add "your-json-dir" into angular.json file (:
"assets": [ "src/assets", "src/your-json-dir"]
create or edit typings.d.ts file (at your project root) and add the following content:
declare module "*.json" { const value: any; export default value;}
This will allow import of ".json" modules without typescript error.
in your controller/service/anything else file, simply import the file by using this relative path:
import * as myJson from 'your-json-dir/your-json-file.json';