Keep Getting NullInjectorError: No provider for Injector! when trying to work with a store

Question

I am creating a web app that uses a store. I am following the tutorial: https://coursetro.com/posts/code/151/Angular-Ngrx-Store-Tutorial---Learn-Angular-State-Management. The problem is that I keep having the following issue:

main.ts:13 NullInjectorError: StaticInjectorError(AppModule)[InjectionToken @ngrx/store Initial Reducers -> Injector]:
  StaticInjectorError(Platform: core)[InjectionToken @ngrx/store Initial Reducers -> Injector]:
    NullInjectorError: No provider for Injector!

I believe it has to do with StoreModule.forRoot({})...

here is my AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/Home/home/home.component';
import { ContactComponent } from './components/Contact/contact/contact.component';
import { StatisticsComponent } from './components/Statistics/statistics/statistics.component';
import { TrainComponent } from './components/Train/train/train.component';
import { NavBarComponent } from './components/Navigation/nav-bar/nav-bar.component';
import { WidgetComponent } from './components/Home/home/Gesture Widget/widget/widget.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule } from '@angular/material';
import { MatChipsModule } from '@angular/material';
import { CriteriaEditorComponent } from './components/Home/home/criteria-editor/criteria-editor.component';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material';
import { MatDialogModule } from '@angular/material';
import { MatInputModule } from '@angular/material';
import { DragAndDropComponent } from './components/Home/home/Drag And Drop/drag-and-drop/drag-and-drop.component';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatExpansionModule } from '@angular/material';
import { MatButtonModule } from '@angular/material';
import { StoreModule } from '@ngrx/store';
import { reducer } from './reducers/conversion-table.reducer';

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        ContactComponent,
        StatisticsComponent,
        TrainComponent,
        NavBarComponent,
        WidgetComponent,
        CriteriaEditorComponent,
        DragAndDropComponent
    ],
    imports: [
        BrowserModule,
        StoreModule.forRoot({
            table: reducer
        }),
        MatButtonModule,
        MatExpansionModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MatCardModule,
        MatChipsModule,
        FormsModule,
        MatFormFieldModule,
        MatDialogModule,
        MatInputModule,
        DragDropModule
    ],
    providers: [],
    bootstrap: [AppComponent],
    entryComponents: [CriteriaEditorComponent]
})
export class AppModule {}

Answer 1

Check this official link.

• You need to create an InjectionToken :

export const REDUCER_TOKEN = new InjectionToken<ActionReducerMap<any>>('table', { factory: () => reducer });

And replace any by the interface/state of your store.

• And import the Token in your module:

StoreModule.forRoot(REDUCER_TOKEN)