Angular App找不到我的接口文件

Question

Im trying to make a simple test bed for the OMBD Api. I have the following interface file called ombdresponse.ts:

interface IOMBDResponse {
    Title: string;
    Year: string;
    Director: string;
    Poster: string;
}

The error I am having lies in my ombd-api.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, tap } from 'rxjs';
import { throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class OmbdApiService {

  private _siteURL="https://www.ombdapi.com/";
  private _key = '?apikey=63455f5a';


  constructor(private _http:HttpClient) { }

  getMovieData(movieName): Observable<IOMBDResponse> {
    return this._http.get<IOMBDResponse>(this._siteURL + this._key + movieName)
    .pipe(
      tap(data => console.log('Moviedata/error' + JSON.stringify(data))
      ),
      catchError(this.handleError)
    );
  }

  private handleError(err:HttpErrorResponse) {
    console.log('OmbdApiService: ' + err.message);
    return throwError(err.message);
  }


}

I also have the same error in my app.component.ts:

import { Component } from '@angular/core';
import { Axios } from 'axios';
import { OmbdApiService } from './services/ombd-api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
 
})
export class AppComponent {
  title = 'openstackProject';

  movieData:IOMBDResponse;
  
 
  errorMessage: any;

  constructor(private _ombdService: OmbdApiService) {

  }

  getMovieDetails(movieName:string) : boolean {
    this._ombdService.getMovieData(movieName).subscribe(
      movieData => {
        this.movieData=movieData;
        console.log('Director name: ' + this.movieData.Director);
      },
      error => this.errorMessage = <any>error
    );
    return false;
  }

}

I get the following two errors:

Error: src/app/services/ombd-api.service.ts:19:27 - error TS2304: Cannot find name 'IOMBDResponse'.

19     return this._http.get<IOMBDResponse>(this._siteURL + this._key + movieName)
                             ~~~~~~~~~~~~~

and

Error: src/app/app.component.ts:14:13 - error TS2304: Cannot find name 'IOMBDResponse'.

14   movieData:IOMBDResponse;

So clearly the app is having an issue finding my Interface file. However, the interface file comes up in intellisense. Can someone explain what I am doing wrong?

Tried making the interface public. I am very new to using external APIs with angular.

Answer 1

You need to export and to import your interface like this

export interface IOMBDResponse {
    Title: string;
    Year: string;
    Director: string;
    Poster: string;
}

and where you need it import { IOMBDResponse } from '/directory/'