How to Configure NGXS in Angular 17

by

With all the cool new features added in the latest version of angular, there are major changes in configuration as well. Now you don’t have to maintain a ngModule to register all your stuffs under one roof. Though it’s a good change and enhances performance, scalability and usability, it brings lots of confusions too along with it to Frontend Developers. One of such confusion is how to configure NGXS in Angular 17 projects.

In this article, we will learn how to configure NGXS in your Angular 17 project. Before diving into the solution, let’s first learn what is NGXS and how it helps.

What is NGXS?

NGXS is a state management library for Angular. It helps you maintain your application’s state by providing simple rules for predictable state mutations. It implements CQRS (Command and Query Responsibility Segregation) pattern which improves performance, scalability, and security.

Before starting, I am assuming you already have a Angular 17 project up and running on your system. If not, then I would suggest you to check this article by the Angular team.

Compatible NGXS Version with Angular 17:

You will need to install version 3.8.2 or later to be compatible with Angular 17.

To install NGXS for you project, run the below commands in command prompt in your project’s root folder:

npm i @ngxs/store@3.8.2 --save

npm i @ngxs/storage-plugin@3.8.2 --save

npm i @ngxs/devtools-plugin@3.8.2 --save-dev

Problem with Newly Built Angular 17 Apps:

If you have created a new app using the command ‘ng new <my-app>‘ but without providing ‘--no-standalone‘ flag, you will probably notice there is no app.module.ts file exists inside your project. This is because, starting from Angular 17, they have made standalone components default. With this approach there is no need for app.module.ts file. Instead you will notice an app.config.ts file.

Here we are going to modify that same app.config.ts file to configure NGXS in Angular 17 projects.

configure-ngxs-in-angular-17

Configure NGXS:

Open app.config.ts in your favorite editor and add the below code inside providers array.

importProvidersFrom(
    NgxsModule.forRoot([<YourStateName>], {
        developmentMode: !environment.production,
    })
),
importProvidersFrom(
    NgxsStoragePluginModule.forRoot()
),
importProvidersFrom(
    NgxsReduxDevtoolsPluginModule.forRoot({
        disabled: environment.production,
    })
)
configure-ngxs-in-angular-17

Steps:

  • Import importProvidersFrom from @angular/core.
  • Import NgxsModue, NgxsStoragePluginModule and NgxsReduxDevtoolsPluginModule (not mandatory, only use it for development purpose).
  • Add them in providers array using importProvidersFrom function.
  • Configure NgxsModule and update developmentMode.
  • Rest of the steps are same as you used to do in older versions of Angular.

After Angular 15, by default Angular does not create any environment configs. You can easily create it using ng g environments command. You have to manually add the production attribute inside the files created though.

Hope this will help you to configure NGXS in your new Angular 17 project. Please drop a comment if you have find this article useful. 🤞

Leave a Comment