No provider for InjectionToken CUSTOM_NGXS_EXECUTION_STRATEGY

First time posting here!

I am a very junior developer in a very small company since a few months. I just started a new app (Angular 19 - new to me, I was used to Angular 13.. yeah)

ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_FormContainerComponent])[_Store -> _Store -> _InternalStateOperations -> _InternalDispatcher -> _InternalNgxsExecutionStrategy -> InjectionToken NGXS_EXECUTION_STRATEGY -> InjectionToken CUSTOM_NGXS_EXECUTION_STRATEGY -> InjectionToken CUSTOM_NGXS_EXECUTION_STRATEGY]:
NullInjectorError: No provider for InjectionToken CUSTOM_NGXS_EXECUTION_STRATEGY!





I’v got this config error (the dependency can't be injected correctly), I am still learning about config and I really can’t find the solution here. I feel like I’m gonna spend days on something probably very simple, if any of you have an idea Id be very glad

My main.ts : 


bootstrapApplication(AppComponent, {
providers: [
provideClientHydration(withIncrementalHydration()),
provideHttpClient(),
provideRouter(routes),
provideAnimations(),
importProvidersFrom(
MatStepperModule,
MatButtonModule,
ReactiveFormsModule,
NgxsModule.forRoot(
[FormDataState, GlobalState],
{
executionStrategy: NoopNgxsExecutionStrategy,
}
),
NgxsReduxDevtoolsPluginModule.forRoot(),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient],
},
})
),
],
}).catch((err) => console.error(err));



Part of my package.json :


"dependencies": {
"@angular/animations": "^19.0.0",
"@angular/cdk": "^19.0.4",
"@angular/common": "^19.0.0",
"@angular/compiler": "^19.0.0",
"@angular/core": "^19.0.0",
"@angular/forms": "^19.0.0",
"@angular/material": "^19.0.4",
"@angular/platform-browser": "^19.0.0",
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/platform-server": "^19.0.0",
"@angular/router": "^19.0.0",
"@angular/ssr": "^19.0.6",
"@ngx-translate/core": "^16.0.4",
"@ngx-translate/http-loader": "^16.0.1",
"@ngxs/devtools-plugin": "^19.0.0",
"@ngxs/store": "^19.0.0",
"esbuild": "^0.25.0",
"express": "^4.18.2",
"keycloak-angular": "^19.0.2",
"keycloak-js": "^26.0.7",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.0.6",
"@angular/cli": "^19.0.6",
"@angular/compiler-cli": "^19.0.0",
"@types/express": "^4.17.17",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"jasmine-core": "~5.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.6.2",
"vite": "^6.1.0"
}



my component :

@Component({
selector: 'app-form-container',
standalone: true,
templateUrl: './form-container.component.html',
styleUrls: ['./form-container.component.scss'],
imports: [
CommonModule,
GeneralInformationsComponent,
FormatComponent,
BiometricDataComponent,
RouterModule,
FormsModule,
ReactiveFormsModule,
MatStepperModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule,
TranslateModule
],
providers: [
FormDataSandbox, GlobalSandbox,
],
animations: [
inAndOut
]
})


I tried providing NoopNgxsExecutionStrategy to explicitly replace the missing execution strategy, but the error still persists.

I also tried downgrading to a previous version of NGXS (@ngxs/store@18.0.0), but I encountered dependency conflicts between Angular 19.1.6 and NGXS, since the latest NGXS version does not support Angular 19.x.

Thank you to whoever is reading this and willing to help me!

Continue reading...