NullInjectorError: нет поставщика для компонента, но используются поставщики

Я создал приложение Angular (состоящее из службы и компонента списка) для вызова API и отправки действий, но ошибка возникает, когда я использую функции из компонента списка. Я помещаю компонент в конструктор, чтобы использовать его, также устанавливаю сервис как провайдера в app.module, а также в listcomponent как провайдер.

Обслуживание:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { posts, users } from '../api.actions';
import { ListComponent } from '../list/list.component';

@Injectable({
  providedIn: 'root',

})

export class ApiCallService {
  // constructor(public getId: ListComponent)

  public getUsers() {
    return this.http.get<users[]>('https://jsonplaceholder.typicode.com/users');
  }
  public getPosts()
  {
    return this.http.get<posts[]>('https://jsonplaceholder.typicode.com/posts');

  }

  public test()
  {
    let id = 0;
    this.getId.SendID(id);
    this.getId.SendID(id)
    console.info(id);

  }
  constructor(private http: HttpClient, private getId: ListComponent ) {

  }

}

Приложение.Модуль:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { ListComponent } from './list/list.component';
import { userReducer } from './api.reducer';
import { EffectsModule } from '@ngrx/effects';
import { ApiEffects } from './api.effect';
import { ApiCallService } from './ApiCall/api-call.service';


@NgModule({
  declarations: [
    AppComponent,
    ListComponent,


  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    StoreModule.forRoot({rootValue: userReducer}),
    StoreDevtoolsModule.instrument({maxAge: 25, logOnly: environment.production, autoPause: true}),
    EffectsModule.forRoot([ApiEffects])
  ],
  providers: [ApiCallService],
  bootstrap: [AppComponent]
})
export class AppModule { };

Компонент списка:

import { Component, Input, OnInit } from '@angular/core';
import { ApiCallService } from '../ApiCall/api-call.service';
import { Observable, map, BehaviorSubject, Subject } from 'rxjs';
import { Store } from '@ngrx/store'
import { RootState } from '../api.reducer';


@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  providers: [ApiCallService]
})
export class ListComponent implements OnInit {


  constructor(private api: ApiCallService, private store: Store<{rootValue: RootState}>) { }

  users = [];
  Uid:number = 0;
  UId$ = new Subject<number>();

  //Used To display the users and posts in HTML file
  users$ = this.store.select('rootValue').pipe(map(data => data.users));
  posts$ = this.store.select('rootValue').pipe(map(data => data.posts));

  //gets triggered when SingleUser is clicked
  UserClicked(userId:number)
  {
    this.Uid = userId;
    this.SendID(this.Uid);

  }

  //Sends data to Service 
  SendID(userId:number)
  {
    this.UId$.next(userId);
  }

  //Function from Service
  Test()
  {
    this.api.test();
  }

  ngOnInit(): void {
  }

}

Там много кода, поэтому вам нужно будет искать только провайдеров.

Я ожидал, что это сработает, так как я установил его как провайдера в обоих случаях, а также даже не поместил туда никакого кода в сервисной функции.