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

Issue

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:-

Solution

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