ngrx issue "NullInjectorError: No provider for ComponentStore!"

Question

I am a ngrx noob (done it one time, but still pretty new with it). I have this error in developer console when I try to access the page on which I use ngrx:

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[MembershipComponent -> ComponentStore]: 
  StaticInjectorError(Platform: core)[MembershipComponent -> ComponentStore]: 
    NullInjectorError: No provider for ComponentStore!
NullInjectorError: StaticInjectorError(AppModule)[MembershipComponent -> ComponentStore]: 
  StaticInjectorError(Platform: core)[MembershipComponent -> ComponentStore]: 
    NullInjectorError: No provider for ComponentStore!

This is my packages for ngrx in package.json:

"@ngrx/component-store": "^10.0.0",
"@ngrx/store": "^8.6.1",

This is the store file (it is stripped of any additional logic, since I am just trying to get things through:

import { Injectable } from "@angular/core";
import { Location } from "@irhis-clients/dewco/src/lib/core/locations";
import { BehaviorSubject, Observable } from "rxjs";
import { map } from "rxjs/operators";
import { EnumValues } from 'enum-values';
import { Store } from '@ngrx/store';
import { ComponentStore } from '@ngrx/component-store';
import { Membership, IUserRequestState } from "../../common/interfaces/user-related";


@Injectable()
export class UserRequestStore extends ComponentStore<IUserRequestState>{

  memberships$: Observable<Membership[]>;
  membershipLength$: Observable<number>;
  roles$: Observable<string[]>;

  constructor(
    private cs: ComponentStore<IUserRequestState>,
    private s: Store<IUserRequestState>
  ) {
    super({ //initial state; can also be set with .setState
      memberships: [],
      roles: EnumValues.getValues(null)
    })

  }

  public addMembership(membership: Membership) {}
  
  public removeMembership(index: number) {}
}

The component on which things happen is user-request. In its constructor I have the call for the store, as injection:

private userRequestStore: UserRequestStore,

why am I getting the error? I have the ComponentStore installed successfully with:

ng add @ngrx/store
ng add @ngrx/component-store

I have this in the user-request.module:

RouterModule.forChild([
      { path: '', pathMatch: 'full', component: UserRequestComponent }
    ]),

and in AuthModule, I have the lazy loading of this module:

{path: 'user-request', loadChildren: './user-request/user-request.module#UserRequestModule'}

Answer 1

Its hard to be 100% certain when you haven't shared the component that yields the error but I think the problem lies in MembershipComponent where you haven't added the UserRequestStore to its providers. It should look something like the following:

@Component({
  selector: 'membership-component',
  templateUrl: './membership.component.html',
  styleUrls: ['./membership.component.scss'],
  providers: [UserRequestStore], <--- This is what you are probably missing
})
export class PersonContainerComponent implements OnInit {
  constructor(
    private readonly _userRequestStore: UserRequestStore
  ) {}
}

So in the @Component decorator you need to add the UserRequestStore to its providers array if you haven't done so. You can read more about it and access the repo here