Import static JSON file from assets dir in component (Angular)

Question

I am using Angular CLI (version 6). I have a small JSON file in my assets folder which I want to import into my component. I want to do this without using a GET request from my component.

What I did:

I created a new file, typings.d.ts:

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

... and referred to it in tsconfig.spec.json. Here is a snippet of the referral in ts.config.spec.json:

"files": [
    "test.ts",
    "polyfills.ts",
     "./typings.d.ts"
],

From my component, I am trying to import my JSON file as such:
```
import * as myConfig from '../../assets/config.json';
```

At that line however, I get an error message: cannot find module ../../assets/config.json.

I am quite sure that this relative path is correct (I tried several other options as well, similarly for the typings.d.ts referral - but anyway, my directory structure is just a simple Angualr CLI app:

|- src
    |   
    |-app
    |   |-component
    |       |-component.ts
    |
    |
    |-assets
        |-config.json

Any tips on how to solve this problem would be greatly appreciated.

visit this https://stackoverflow.com/questions/47206924/angular-5-service-to-read-local-json-file/65967378#65967378 — Abolfazl Roshanzamir, Jun 25 '23 at 09:02

score 7 · Accepted Answer · answered Jul 04 '18 at 12:29

7

You can just import myConfig from 'path/to/json' then use it in your file.

answered Jul 04 '18 at 12:29

Efe

5,180
2
21
33

2

This doesn't work unfortunately: `Cannot find module '../../assets/config'.` (tried it with `.json` extension and also without) – Moody Jul 04 '18 at 12:37
[Here is the example](https://stackblitz.com/edit/angular-ypuy7b?file=src%2Fapp%2Fhello.component.ts) – Efe Jul 04 '18 at 12:52
1

I have no clue why I received that error. But your method worked. Thanks. – Moody Jul 04 '18 at 13:55
@Moody it was probably the missing json extension, it was looking for a js file by default – Jorge Cuevas May 02 '19 at 02:21
7

@Moody you may need to set `"resolveJsonModule": true` in `ts.config` see [here](https://devblogs.microsoft.com/typescript/announcing-typescript-2-9-2/#json-imports) – Mojtaba Mar 20 '20 at 16:19
2

I had exactly the same problem with Angular 11. In tsconfig.json I had to replace "baseUrl": "./" by "baseUrl": "src" and I had to add "resolveJsonModule": true, "allowSyntheticDefaultImports":true, - then it worked for me. – wbartussek Feb 18 '21 at 13:48

Adam · Answer 2 · 2020-07-15T19:07:09.883

2

The new file you added should be named json-typings.d.ts with the following code:

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

Put it in your src folder (the same directory as index.html)

Then import JSON files in your component:

import * as SampleJson from "../../assets/SampleJson.json";

Also, you don't need to refer to it in ts.config.spec.json

edited Jul 15 '20 at 19:07

answered Jul 15 '20 at 19:01

Adam

123
10

score 2 · Answer 3 · answered Aug 24 '21 at 10:07

2

The easiest way is:

Give the structure a name (json, xml, whatever) :

export const myJson = { "_id":"1234", "name":"John" }

Change the file extension to ".ts"
Finally import the file

import { myJson } from 'src/my-static-file';

public json = myJson;

answered Aug 24 '21 at 10:07

Radim Šafrán

463
7
16

nice little hack, thank you :) – Jay Aug 10 '23 at 15:00
But then it's not a JSON anymore, it's a typescript file. In my case we need it for angular and for external applications so we want to keep it as a json asset – Stefan Brendle Aug 21 '23 at 08:19

Import static JSON file from assets dir in component (Angular)

3 Answers3

Linked