Cannot find module on import with local JSON file

Question

I have this simple angular project and I'm having trouble importing a local json file that I created. Here's the JSON file:

{
    "id": 1,
    "firstName": "Uziel",
    "lastName": "Cabanban",
    "car" : {
        "brand": "Toyota",
        "model": "Vios",
        "year": 2017
    }
}

The JSON file is stored in this directory: src/assets/sampleJson.json.

Here is my component that tries to import said json file:

import { Component, OnInit } from '@angular/core';
import SampleJson from '../assets/sampleJson.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

}

I haven't written anything yet as I'm getting a red line in the import SampleJson from '../assets/sampleJson.json

Any suggestion will be much appreciated

Will you write out the path of your app.component.ts file? Perhaps the relative path '../assets/' is not a legal relative path. — Keenan Diggs
– Keenan Diggs, Commented Jul 22, 2019 at 8:37
app.component.ts is in /src/app/app.component.ts while the json file is in /src/assests/sampleJson.json. The assets folder was automatically generated when I generated the angular project. I didn't manually create it. — Uzi
– Uzi, Commented Jul 22, 2019 at 14:09

Uzi · Accepted Answer · 2019-07-23 08:45:40Z

9

Thanks for all of the suggestions but I went another direction and didn't use import anymore. Instead I used require and I used it like this:

import { Component } from '@angular/core';
import { user } from './user.model';

declare var require: any;

var myUser: user = require('../assests/sampleJson.json');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor () {
    console.log(myUser);
  }
}

So far it prints the contents of my json file

answered Jul 23, 2019 at 8:45

Uzi

4531 gold badge11 silver badges37 bronze badges

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

Comments

Harun Yilmaz · Accepted Answer · 2020-05-05 15:13:16Z

.json file is not a TypeScript module. Since you want local file (assuming it is hardcoded), you can do it by creating a .ts file and export a constant/variable from it like following:

sampleJson.ts

export const SampleJson = {
    "id": 1,
    "firstName": "Uziel",
    "lastName": "Cabanban",
    "car" : {
        "brand": "Toyota",
        "model": "Vios",
        "year": 2017
    }
}

Then in the component:

import SampleJson from '../assets/sampleJson';  // path can change

Hope this helps

More on TypeScript Modules: https://www.typescriptlang.org/docs/handbook/modules.html

Update

Or you can import a JSON file using

import * as SampleJSON from 'path/to/json/sampleJson.json

with TypeScript v2.9.+ according to this answer:

https://stackoverflow.com/a/50674344/1331040

Collectives™ on Stack Overflow

Cannot find module on import with local JSON file

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related