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,
}
}
2
Answers
Try changing
private movieService = GetMoviesService
toprivate movieService: GetMoviesService,
(no equal sign, just colon service name).The syntax is wrong :
In (js/ts) the equals sign
=
is used for assignment.This is a traditional variable assignments / Variable Declaration :
The colon (
:
) is used for type annotations :Ex:
//