How to import Interface into angular component from models

When i try to access data of an interface into a component it gives error:
error TS2304: Cannot find name ‘Contacts’

and when i try to import that interface it says:
error TS2307: Cannot find module ‘../models/contacts’.

I used an Interface(Contacts) to make some data available for a component(contact-list.component.ts)

Please tell me what I am doing wrong by looking at below code snippets.
I am stuck with this Hands on from last two days, pls help

 ----------model contacts.ts------------
 export interface Contacts {
  contactsList: Contact[];
}

export interface Contact {
id: number;
name: string;
city: string;
}

 -----------app.module.ts----------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ContactService } from 'src/app/services/contact.service';

import { AppComponent } from './app.component';
import { ContactListComponent } from './components/contact-list/contact- 
list.component';

 @NgModule({
   declarations: [
   AppComponent,
   ContactListComponent
   ],
  imports: [
  BrowserModule,
],
   providers: [ContactService],
  bootstrap: [AppComponent]
})
export class AppModule { }




---------------contact-list.component.ts---------------

import { Component, OnInit } from '@angular/core';
import { ContactService } from 'src/app/services/contact.service';
import { Contacts } from '../models/contacts';

@Component({
selector: 'app-contact-list',
templateUrl: './contact-list.component.html',
styleUrls: ['./contact-list.component.css']
})
export class ContactListComponent implements OnInit {

  contacts;
  constructor(
  private contactService: ContactService
  ) { }

 ngOnInit() {
   this.contactService.getContacts().subscribe((data: Contacts) => {
     this.contacts = data ? data.contactsList : [];
  });
 }

}
 --------------------contact.service.ts--------------------
import { Injectable } from '@angular/core';
import { of, Observable } from 'rxjs';
import { Contacts } from '../models/contacts';
@Injectable({providedIn: 'root'})
export class ContactService {

contacts = {
  'contactsList': [
      {'id': 1, 'name': 'Rajesh', 'city': 'bangalore'},
      {'id': 2, 'name': 'Aarjith', 'city': 'london'},
      {'id': 3, 'name': 'Anjan', 'city': 'california'},
      {'id': 4, 'name': 'David', 'city': 'delhi'}
    ]
 };
constructor(
) { }

getContacts(): Observable<Contacts> {
    return of(this.contacts);
   }
}

expected output:
Rajesh
Aarjith
Anjan
David

Source: New feed
Source Url How to import Interface into angular component from models