CODEWITHSUNDEEP
angular
Mad Eddie
Mad Eddie

Reputation: 1217

Embarrassingly simple NGXS - Can't resolve all parameters for LanguageState

I'm kinda ashamed to havbe to post this but I need a rubber duck. For some reason - adding the constructor with the HTTPClient to this class causes the error "main.ts:12 Error: Can't resolve all parameters for LanguageState: (?)." But I just don't know why:

import { State, Action, Selector, StateContext } from "@ngxs/store";
import { ChangeLanguage } from "./language.actions";
import { Languages } from "src/app/globals/language.enum";
import { LabelDB } from "src/app/model/labelDB.model";
import { HttpClient } from '@angular/common/http';

export interface LanguageStateModel {
  currentLanguage: Languages;
  languageData: {
    labels: LabelDB[];
  };
}

@State<LanguageStateModel>({
  name: 'language',
  defaults: {
    currentLanguage: Languages.English,
    languageData: null,
  },
})
export class LanguageState {
  constructor(private http: HttpClient) {}

  @Selector()
  public static getCurrentLanguage(state: LanguageStateModel) {
    return state.currentLanguage;
  }

  @Action(ChangeLanguage)
  public changeLanguage(
    { patchState }: StateContext<LanguageStateModel>,
    action: ChangeLanguage
  ) {
    patchState({ currentLanguage: action.language });
  }
}

I have tried adding HTTPClientModel as an import to the NGXS Store Module. Tried using the Angular Injector to get the HTTP module instead.

I just don't get it and I know its probably something very simple :(

IMPORTANT: I know I am not using the HTTP Client anywhere in the code yet - This is because I removed all that code to get this working :)

EDIT: The declaring Module is standard NGXS Store module:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { NgxsModule } from "@ngxs/store";
import { NgxsReduxDevtoolsPluginModule } from "@ngxs/devtools-plugin";
import { NgxsLoggerPluginModule } from "@ngxs/logger-plugin";

import { environment } from "src/environments/environment";
import { LanguageState } from "./language/language.state";

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    NgxsModule.forRoot([LanguageState], {
      developmentMode: !environment.production,
    }),
    NgxsReduxDevtoolsPluginModule.forRoot({
      name: "NGXS store",
      disabled: environment.production,
    }),
    NgxsLoggerPluginModule.forRoot(),
    HttpClientModule
  ]
})
export class LocalNgxsModule {}

Upvotes: 0

Views: 241

Answers (2)

Poul Kruijt
Poul Kruijt

Reputation: 71961

I'm going to assume you are using angular 9. With the latest version, all provided or injected tokens must have the @Injectable() decorator. So also for the ngxs state services:

@State<LanguageStateModel>({
  name: 'language',
  defaults: {
    currentLanguage: Languages.English,
    languageData: null,
  },
})
@Injectable()
export class LanguageState {
  // ...
}

read more here

Upvotes: 1

Willem Hgv
Willem Hgv

Reputation: 45

Do you have a declaring module? Adding HttpClientModule to the providers (and import ofc) resolved my issues with the HttpClient once..

Upvotes: 0

Related Questions