NullInjectorError: No provider for Component but used providers-CodePudding

I created an Angular app (which consists out of a Service and a listcomponent) to call an api and dispatches actions, but the error comes when i use functions from the listcomponent component. I put the component in the constructor to use it, also set the service as provider in app.module and also in listcomponent as provider.

The Service:

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.log(id);

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

  }

}

The App.Module:

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 { };

The listComponent:

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 {
  }

}

There's a lot of code, so you'll only need to look for the providers.

I expected it to work, since i set it as provider in both ways and also didn't even put any code in the service function there.

CodePudding user response：

Remove component from service's constructor like this:

export class ApiCallService {
...
   constructor(private http:HttpClient) {}
...
}