Skip to content

Integrate ngrx devtools

Nathan Walker edited this page Oct 17, 2016 · 1 revision

In project.config.ts:

// debug tools
this.SYSTEM_CONFIG['packages']['@ngrx/store-devtools'] = {
  main: 'bundles/store-devtools.umd.js',
  defaultExtension: 'js'
};
this.SYSTEM_CONFIG['packages']['@ngrx/store-log-monitor'] = {
  main: 'bundles/store-log-monitor.umd.js',
  defaultExtension: 'js'
};

Then in web.module.ts (in part):

// dev tools
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { StoreLogMonitorModule, useLogMonitor } from '@ngrx/store-log-monitor';

@NgModule({
  imports: [
    // etc...
    // dev: debug store (just comment these out when going to production
    // or conditionally add them based on dev build flags ;)
    StoreDevtoolsModule.instrumentStore({
      monitor: useLogMonitor({
        visible: true,
        position: 'right'
      })
    }),
    StoreLogMonitorModule
  ],