Ngxs + Angular 17 = not compatible?

Question

When I install NGXS in my Angular 17 project I get this error:

Could not resolve dependency:
npm ERR! peer @angular/core@">=12.0.0 <17.0.0" from @ngxs/[email protected]

I don't seem to find any specs on the NGXS website about what Angular versions I can and cannot use, but it seems to be an Angular version lower than 17? Am I doing something wrong because I can't seem to find any official info on this. Is there anyone that has made this work? The install succeeded when I used the --force parameter, but this is a workaround rather than a solution.

Answer 1

ngxs/store supports v17 from 3.8.2 onwards. Please update to at least this version to use it with Angular v17 !

---

Old answer.

The v17 support is pending PR.

Until this is release, you can just force the install with npm install --force or add an overrides section in your package.json

Answer 2

Wanted to add on, with SSR and standalone components (no app.module) being the preferred approach in angular 17, after npm i --force to get things running you must include importProvidersFrom in both app.config.ts and app.config.server.ts in the providers array.

    importProvidersFrom(
      NgxsModule.forRoot(
        [UserState]
    ),
    // devtools always last
    NgxsReduxDevtoolsPluginModule.forRoot()
    )

Answer 3

To register Ngxs in Angular 17, simply go to the app.config.ts and wrap it within the importProvidersFrom(), which you must import as well. Below is the complete file.

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
import { NgxsModule } from '@ngxs/store';
import { environment } from '../environments/environment.development';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    importProvidersFrom(
      NgxsModule.forRoot([/* Enter your state here */], {
        developmentMode: !environment.production,
      })
    ),
    importProvidersFrom(
      NgxsReduxDevtoolsPluginModule.forRoot({
        disabled: environment.production,
      })
    ),
  ],
};

NOTE:

The environment files have not been automatically included in Angular projects since Angular 15, but you can simply run ng generate environments to generate them. You'll also have to add the production: false into the file and write the inverse for the prod file, full file environment.development.ts below.

export const environment = {
    production: false
};