Exploring the intricacies of Angular 12 framework, I find myself encountering a hurdle in my learning journey. The tutorial I am following utilizes the Observable class to query fixed data asynchronously. However, an unexpected ts(2322) error has surfaced due to version disparities stemming from my prior exposure to Angular 8 during training. For reference, here is a brief overview of the service, module, and data source:
/* film.service.ts */
export class FilmService
{
...
getFilm( id: number ) : Observable<Film>
{
/* The TS(2322) error crops up in the line below. */
return of( Films.find( film => film.id === id ) );
}
}
/* film.datasource.ts */
import { Film } from "./film";
export const Films: Film[] = [
{ id: 1, name: "film1", imageUrl: "1.jpg" },
{ id: 2, name: "film2", imageUrl: "2.jpg" }
];
/* film.ts */
export class Film
{
id!: number;
name!: string;
imageUrl!: string;
}
The getFilm() function within the file film.service.ts triggers the following error message:
Type 'Observable<Film | undefined>' is not assignable to type 'Observable<Film>'.
Type 'Film | undefined' is not assignable to type 'Film'.
Type 'undefined' is not assignable to type 'Film'.ts(2322)
Recognizing this dilemma as a result of TypeScript's strict typing guidelines, I seek guidance on resolving this issue.
Your assistance in overcoming this roadblock is greatly appreciated.