Can't import json from my angular library component

Question

Here is the repository in Github if you want to help me to check what is happening: https://github.com/sandrocsimas/ngx-material-palette-picker

I'm trying to create my first angular library. I generated the code by using angular cli commands:

ng new ngx-material-palette-picker-app
ng generate library ngx-material-palette-picker

In the component NgxMaterialPalettePickerComponent I'm importing a json file, but the build is throwing the following error:

projects/ngx-material-palette-picker/src/lib/ngx-material-palette-picker.component.ts(2,31): error TS2307: Cannot find module './palettes.json'.

This is my component:

import {Component, OnInit} from '@angular/core';
import * as palettesJSON from './palettes.json';

@Component({
  selector: 'ngx-mpp',
  template: `,
  styles: []
})
export class NgxMaterialPalettePickerComponent implements OnInit {

  constructor() {

  }
}

I created a directory called types in the root path and added the following code to index.d.ts:

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

I also added the directory types to typeRoots in the main tsconfig.json.

"typeRoots": [
  "node_modules/@types",
  "types"
],

The project don't show any error in Sublime editor, but when I try to build the project using the command ng build --prod ngx-material-palette-picker I get the error described in the beginning of this question. How to solve this problem?

Megavolt

Did you resolve this? I am having hte same issue. – Verdieverdigris

@RossRawlins, no I couldn't solve. – Megavolt

So its false you cant import json files from local directory – Verdieverdigris

Answer 1

The JSON file should be placed somewhere angular knows to search (e.g. 'src/assets'). You should add the path to you JSON files to your angular.json under 'assets' as described in the answer here: Import json file in typescript Angular 5

Alternatively you could get the contents of the JSON file with an http request. Though I believe the above method still applies in that case.

Idyllist

Answer 2

here's how did it using a service with httpClient I'm using it with dynamic forms (eventually the json will come from server, but for now using json file):

@Injectable()
export class QuestionService {

constructor(private httpClient: HttpClient) { }

public getQuestions(clientName: string): Observable<any> {
    return this.httpClient.get(`./assets/${clientName}.json`);
}

}

json file:
{
"search":   [
    {
        "key": "contract",
        "label": "Contract",
        "value": "",
        "required": true,
        "order": 1,
        "type": "text"
    },
    {
        "key": "vendor",
        "label": "Vendor",
        "value": "",
        "required": true,
        "order": 1,
        "type": "text"
    },
    {
        "key": "status",
        "label": "Status",
        "value": "",
        "required": true,
        "order": 1,
        "type": "text"
    },
    {
        "key": "from",
        "label": "From",
        "value": "",
        "required": true,
        "order": 1,
        "type": "text"
    },
    {
        "key": "to",
        "label": "To",
        "value": "",
        "required": true,
        "order": 1,
        "type": "text"

    }
],
"client": {
    "firstName": "harvey",
    "lastName": "2face"
}
}

Hippogriff

Answer 3

Did you use the compiler option resolveJsonModule? Try to put "resolveJsonModule": true into the file tsconfig.app.json by the element compilerOptions. It worked for me.

For unit tests check the file tsconfig.spec.json for the same trick.

Ethelred