Import a local json file with Angular

Question

I have a simple .json file outside of my project. Like this :

| common
    | configuration.json
| angular-app
    | src
        | app
            | my-component
                | my-component.component.ts
    | angular.json

In my-component.component.ts, i want to import configuration.json. I tried import configuration from '../../../../common.configuration.json' but Angular just keep throwing this error :

ERROR in src/app/record/record.component.ts(4,23): error TS2732: Cannot find module '../../../../common/configuration.json'. Consider using '--resolveJsonModule' to import module with '.json' extension

And when i try ng serve --resolveJsonModule, i got this error : Unknown option: '--resolveJsonModule'

I can't move configuration.json. The common directory is shared with other projects.

How do you import a local json file in an Angular project ?

move your json file into assets directory. I faced same issue. — Piyush Jain
– Piyush Jain, Commented Sep 6, 2019 at 8:35

Mark · Accepted Answer · 2019-09-06 09:15:53Z

6

If you're using typescript 2.9+ (Angular 6.1+), you can import JSON modules so it will get compiled into the application. Older version don't support this so that may be your issue.

All you need to do is make sure the following three compiler options are enabled in your tsconfig.json:

{
  ...
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
    ...
  }
}

Then you can import JSON modules in any TS file:

import jsonContents from '../../contents.json';

answered Sep 6, 2019 at 9:15

Mark

8207 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrita Sharma · Accepted Answer · 2019-09-06 08:33:32Z

3

Try by using http call:

this.http.get(`yourpath/..../common/configuration.json`).subscribe((resp: any) => {
   console.log(resp)
});

answered Sep 6, 2019 at 8:33

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

2 Comments

Magus Over a year ago

I don't want to expose my configuration.json file over http if possible.

Adrita Sharma Over a year ago

If it is configuration file, it id better to have it in environment.ts

mueslirieger · Accepted Answer · 2019-09-06 08:45:23Z

3

I'm not exactly sure what you mean but I guess you want to use the config values in your component, right?

According to this tutorial this can be fixed by creating a type definition file json-typings.d.ts in your app root folder with the following contents:

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

answered Sep 6, 2019 at 8:45

mueslirieger

1811 silver badge9 bronze badges

1 Comment

k.vincent Over a year ago

In my case, this option fixed the issue. A good one!

Collectives™ on Stack Overflow

Import a local json file with Angular

3 Answers 3

Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Related