Ошибка Angular 18: TS-992003: нет подходящего токена внедрения для параметра MovieService класса MovielistComponent

Сегодня я решил начать работать с последней версией Angular (Angular 18.1), пока работал с версиями с 7 по 14...

Я только что попробовал создать небольшое приложение для демонстрации списка фильмов...

Я создал действительно базовый сервис, который получает некоторые данные из API и в файле компонент.ts вызывает этот сервис для регистрации в консоли...

Я получаю эти три ошибки в моем компиляторе...

✘ [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 => {
         ╵       ~~~~

Это что-то новое в Angular 18 или я просто слеп и упускаю что-то основное...

Мой код:

сервис.ц

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

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

}

фильмлист.компонент.ц:

@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.info('Movies: ', this.movie);
      }
    )
  }

}

модель movie.ts

export interface movie {
  id: number,
  attributes: {
    name: string,
    imageUrl: string,
    synopsis: string,
    year: string,
    genre: string,
  }
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
53
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Попробуйте изменить private movieService = GetMoviesService на private movieService: GetMoviesService, (без знака равенства, просто имя службы через двоеточие).

Вы правы :) Думаю, я просто слепой и пропустил это, хаха

weinde 23.07.2024 11:01

Синтаксис неправильный:

  constructor(
    private movieService = GetMoviesService,
  ) { }

В (js/ts) знак равенства = используется для присваивания.

Это традиционное назначение переменных/объявление переменной:

const test = 'Bob';

Двоеточие (:) используется для аннотаций типов:

Бывший:

   constructor(
    private movieService: GetMoviesService) {}

//

let userName: string;

Вы правы :) Думаю, я просто слепой и пропустил это.

weinde 23.07.2024 11:01

Другие вопросы по теме