Angular 18 error: TS-992003: No suitable injection token for parameter 'movieService' of class 'MovielistComponent'

Question

Today I decided to start working in the latest Angular version (Angular 18.1) so far I was working with versions 7 to 14...

I just tried making a lil dummy app to showcase a list of movies...

I made a really basic service that gets some data from an API and in the component.ts file called that service to console log it...

I am getting these three errors in my compiler...

✘ [ERROR] TS-992003: No suitable injection token for parameter 'movieService' of class 'MovielistComponent'.
  Consider adding a type to the parameter or use the @Inject decorator to specify an injection token. [plugin angular-compiler]

    src/app/movielist/movielist.component.ts:15:12:
      15 │     private movieService = GetMoviesService,
         ╵             ~~~~~~~~~~~~


✘ [ERROR] TS2339: Property 'getMovies' does not exist on type 'typeof GetMoviesService'. [plugin angular-compiler]

    src/app/movielist/movielist.component.ts:22:28:
      22 │     await this.movieService.getMovies().subscribe(
         ╵                             ~~~~~~~~~


✘ [ERROR] TS7006: Parameter 'data' implicitly has an 'any' type. [plugin angular-compiler]

    src/app/movielist/movielist.component.ts:23:6:
      23 │       data => {
         ╵       ~~~~

Is this some new thing in Angular 18 or am I just blind and missing something basic here...

My code:

service.ts

@Injectable({
  providedIn: 'root'
})
export class GetMoviesService {
  constructor(
    private http: HttpClient
  ) { }

  getMovies(): Observable<movie[]> {
    return this.http.get<movie[]>(`/api/movies`);
  }

}

movielist.component.ts:

@Component({
  selector: 'app-movielist',
  standalone: true,
  imports: [],
  templateUrl: './movielist.component.html',
  styleUrl: './movielist.component.scss'
})
export class MovielistComponent implements OnInit{
  private movie: movie[] = [];
  constructor(
    private movieService = GetMoviesService,
  ) { }
  ngOnInit() {
    this.getMoviesList();
  }

  async getMoviesList() {
    await this.movieService.getMovies().subscribe(
      data => {
        this.movie = data;
        console.log('Movies: ', this.movie);
      }
    )
  }

}

model movie.ts

export interface movie {
  id: number,
  attributes: {
    name: string,
    imageUrl: string,
    synopsis: string,
    year: string,
    genre: string,
  }
}

Answer 1

Try changing private movieService = GetMoviesService to private movieService: GetMoviesService, (no equal sign, just colon service name).