Using Ngrx DevTools with Ionic 5

Question

I am trying to follow this link to use the Ngrx DevTools. But Ionic uses @ionic/angular-toolkit, and we need to enable the Ngrx Schematics which replaces that. Is there a way to have both?

Changes in Angular.json
  "cli": {
--"defaultCollection": "@ionic/angular-toolkit"
++"defaultCollection": "@ngrx/schematics"
},

@ionic/angular-toolkit: Angular Schematics and Builders for @ionic/angular apps

Answer 1

I was able to use the ngrx schematics to generate my stores for my Ionic 5 app by:

1. installing the @ngrx/schematics and allowing them to replace the @ionic/angular-toolkit.
2. running "ng generate store..."
3. replacing the "defaultCollection" entry with "@ionic/angular-toolkit"

This seemed to allow me to get it done -- until Ionic provides an update to their schematics for this.

Yes, this is a hack, and requires me to do this each time that I want to gen a store, but it allows me to use ngrx tools, would like to learn a cleaner way from someone!

Answer 2

1. Install @ngrx/store-devtools
2. Add "StoreDevtoolsModule.instrument({ maxAge: 30 })" in imports in app.module.ts