How should NgxsModule.forRoot()/NgxsModule.forFeature() be used?

I have a main app.module.ts in my project, as well as several modules for different features, such as archive.module.ts. I use local storage to restore certain settings on page refresh, so I also use NgxsStoragePluginModule for it.

And I am confused in which of the modules I should add these lines:

imports: [
NgxsModule.forRoot([ArchiveState]),
  NgxsStoragePluginModule.forRoot({
       key: [ArchiveState]
  }),
]

In the main app.module.ts or in the module for the archive.module.ts feature?

Should I use NgxsModule.forFeature([ArchiveState]) in one of these modules?

Solution

The declaration of NgxsModule.forRoot should be in your app.module.ts (your module on the root of the application). Note that this is required even if you have no root state.

The NgxsModule.forFeature can be used to create "child" states that are lazily created when a feature is loaded. Normally contains a slice of the state that is appended to the global state. In your example, you should be added to your archive.module.ts.

For the NgxsStoragePluginModule, this module does not currently (@ngxs/[email protected]) support the forFeature option. Therefore, you need to add this also in your root module, in this case app.module.ts.

In summary you'd have this:

// app.module.ts
@NgModule({
  ...,
  imports: [
    NgxsModule.forRoot([]),
    NgxsStoragePluginModule.forRoot({
      key: [ArchiveState]
    }),
  ],
})

// archive.module.ts
@NgModule({
  ...,
  imports: [
    NgxsModule.forFeature([ArchiveState]),
  ],
})

It is not an ideal situation since you end up breaking the separation of concern by having to import the ArchiveState in your root module anyhow. This has been a feature request for the LocalStoragePlugin for a while. See the feature request here: https://github.com/ngxs/store/issues/850.