Import json file in typescript Angular 5

Question

I am trying to import json file in typescript class like that

import * as nationalities from \'./mock/nationalities.json\';

and it gives me an

Answer 1

Based on this post, here is complete answer for Angular 6+:

Suppose you added your json files into "json-dir" directory:

1. add "json-dir" into angular.json file :

   "assets": [
     "src/assets",
     "src/json-dir"
   ]
   

2. allow import of json modules to prevent from typescript errors:

   Angular 6: add to typings.d.ts

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

   Angular 7+: add to tsconfig.json

   "compilerOptions": {
   ...
       "resolveJsonModule": true
   }
   

3. from your controller, service or anything else, simply import the file by using this absolute path from /src directory. For example:

   import * as myJson from 'absolute/path/to/json/dir/json-file.json';

assuming source files are in src/app and json files in src/absolute/path/to/json/dir