Could not find my typescript property under the interface folder in the component.ts file

Question

My code is something like that:-

I am creating an book.ts(property) under the interface folder, I am here created a book.ts file.but my book.component.ts doesn't find my book.ts property.but if I using an interface(book.ts) in the book.component.ts. then it's working fine.but I want to keep this interface(book.ts) outside my component.ts file. how i access this from my component.

Here is my code:-

app/interfaces/book.ts

interface Book
{
    id: number;
    title: string;
    description: string;
    author: string;
    rate?: number;
    dateStart?: Date;
    dateRead? : Date;
}

app/component/books.component.ts

import { Component, OnInit } from '@angular/core';



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


export class BooksComponent implements OnInit {

  
  
  public books: Book[];

  constructor() { }

  ngOnInit(): void {
  }

}

when i run my application.then i found this error:-

Folder Structure:-

how i resolve this issue.please help.

UPDATE

import { Component, OnInit } from '@angular/core';
import { Book } from '../interfaces/book'

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


export class BooksComponent implements OnInit {

  
  
  public books: Book[];

  constructor() { }

  ngOnInit(): void {
  }

}

export  interface Book
{
    id: number;
    title: string;
    description: string;
    author: string;
    rate?: number;
    dateStart?: Date;
    dateRead? : Date;
}

New Error:-

Please read https://www.typescriptlang.org/docs/handbook/modules.html for future reference. — Shivam Singla, Apr 02 '21 at 17:44

Shivam Singla · Accepted Answer · 2021-04-02T17:40:44.803

2

You are not importing Book in the component file.

Add export in book.ts

export interface Book {
  // ...
}

And import in the component file

import { Book } from '../../interfaces/book'
// other imports and code

edited Apr 02 '21 at 17:40

answered Apr 02 '21 at 17:21

Shivam Singla

2,117
1
10
22

now found this error error ```TS2307: Cannot find module '../interfaces/book' or its corresponding type declarations.``` – Apr 02 '21 at 17:29
Could please add your updated code in the question? – Shivam Singla Apr 02 '21 at 17:30
@Linkon updated my answer too. It should work now. You had `components/book.component.ts` in question instead of actual path `components/books/book.component.ts` as depicted in the error. – Shivam Singla Apr 02 '21 at 17:42
it works fine now.i would glad if you describe why ```'../../interfaces/book'``` works and why it does not work``` '../interfaces/book' ```. – Apr 02 '21 at 17:47
1

@Linkon, I have added link for docs in the comment in the question itself. You can learn about module from there. The double `../` tells that the file `book.ts` is in grand-parent directory (two levels up in the directory tree). – Shivam Singla Apr 02 '21 at 17:50
1

@Linkon please see this https://stackoverflow.com/a/23242061/11642727 for _single-dot_ and _double-dot_ – Shivam Singla Apr 02 '21 at 17:53

score 0 · Answer 2 · edited Apr 02 '21 at 19:10

0

Put book.ts in interface folder Write prefix export before interface book. Sample syntax
```
export interface Book {}
```
and now import the interface in component.ts file Sample syntax
```
import { Book } from './interfaces';
```

edited Apr 02 '21 at 19:10

Nicholas K

15,148
7
31
57

answered Apr 02 '21 at 17:29

Akash Surwase

16
1

Could not find my typescript property under the interface folder in the component.ts file

2 Answers2