How to use the @ngrx/store-devtools.StoreDevtoolsModule.instrumentOnlyWithExtension function in @ngrx/store-devtools

// Must export the config
export const firebaseConfig = {

};

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(firebaseConfig),
    StoreModule.provideStore({ mainAppStoreReducer }),
    EffectsModule.run(MainEffects),
    IonicModule.forRoot(MyApp),
    StoreDevtoolsModule.instrumentOnlyWithExtension()
  ],
  declarations: [
    MyApp,
    HomePage,
    StuffDetailPage
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    StuffDetailPage
  ],
  providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule { }

}
    }),
    NgbModule.forRoot(),

    UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included

    FormsModule,
    RouterModule.forRoot([], { useHash: false, preloadingStrategy: IdlePreload }),

    IdlePreloadModule.forRoot(),
    CoreModule.forRoot(),
    SharedModule,
    AppModule,
    StoreModule.provideStore(rootReducer),
    RouterStoreModule.connectRouter(),
    StoreDevtoolsModule.instrumentOnlyWithExtension(),
    effects
  ],
  providers: [
    { provide: GLOBAL_CONFIG, useValue: EnvConfig },

    { provide: 'isBrowser', useValue: isBrowser },
    { provide: 'isNode', useValue: isNode },

    { provide: 'req', useFactory: getRequest },
    { provide: 'res', useFactory: getResponse },

    { provide: 'LRU', useFactory: getLRU, deps: [] },

    Meta

    // { provide: AUTO_PREBOOT, useValue: false } // turn off auto preboot complete

CoreModule.forRoot([
            { provide: WindowService, useFactory: (win) },
            { provide: StorageService, useFactory: (storage) },
            { provide: ConsoleService, useFactory: (cons) },
            { provide: LogTarget, useFactory: (consoleLogTarget), deps: [ConsoleService], multi: true }
        ]),
        // Both web and desktop (electron) need to use hash
        RouterModule.forRoot(routes, { useHash: true }),
        AnalyticsModule,
        MultilingualModule.forRoot([{
            provide: TranslateLoader,
            deps: [Http],
            useFactory: (translateLoaderFactory)
        }]),
        StoreModule.provideStore(AppReducer),
        StoreDevtoolsModule.instrumentOnlyWithExtension(),
        InfiniteScrollModule,

        AppModule,

        EffectsModule.run(MultilingualEffects)
    ],
    declarations: [AppComponent,
        // login
        StarCanvasComponent,
        LoginComponent,

        // main
        DashboardCardComponent,
        DashboardGridComponent,
        OperationTracingChartDetailComponent,
        OperationTracingChartComponent,

(async function start() {
  const strings = Strings();

  try {
    await Promise.all([environment.initialize(), MonacoService.initialize()]);

    const timer = AI.trackPageView('Mode', `/${environment.current.host}`);
    AI.initialize(environment.current.config.instrumentationKey);

    if (!environment.current.devMode) {
      enableProdMode();
    } else {
      imports.push(StoreDevtoolsModule.instrumentOnlyWithExtension());
    }

    await applyTheme(environment.current.host);

    if (isInsideOfficeApp() && Utilities.platform === PlatformType.PC) {
      if (isO16orHigher()) {
        // For Office 2016 MSI, need to have a build that supports the "GetHostInfo" API.
        // Otherwise, the code will never run, because switching to the runner domain will lose the host info.
        try {
          (window.external as any).GetHostInfo();
        } catch (e) {
          throw new PlaygroundError(
            `Your Office version is missing important updates, that Script Lab can't run without. Please install the latest Office updates from https://docs.microsoft.com/en-us/officeupdates/office-updates-msi`
          );
        }
      }

useFactory: (createTranslateLoader),
      deps: [Http]
    }),
    NgbModule.forRoot(),

    UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included

    FormsModule,
    RouterModule.forRoot([], { useHash: false }),

    CoreModule.forRoot(),
    SharedModule,
    AppModule,
    StoreModule.provideStore(rootReducer),
    RouterStoreModule.connectRouter(),
    StoreDevtoolsModule.instrumentOnlyWithExtension(),
    effects
  ],
  providers: [
    { provide: 'isBrowser', useValue: isBrowser },
    { provide: 'isNode', useValue: isNode },

    { provide: 'req', useFactory: getRequest },
    { provide: 'res', useFactory: getResponse },

    { provide: 'LRU', useFactory: getLRU, deps: [] },

    Meta,
  ]
})
export class MainModule {
  constructor(public store: Store) {

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpModule,
        JsonpModule,
        StoreModule.provideStore(reducer),
        StoreDevtoolsModule.instrumentOnlyWithExtension(),
      ],
      providers: [IntelligenceService]
    });
  });

InfoboxComponent,
    HelpComponent,
  ],

  imports: [
    BrowserModule,
    InfiniteScrollModule,
    CommonModule,
    FormsModule,
    HttpModule,
    JsonpModule,
    RouterModule.forRoot(appRoutes),
    StoreModule.provideStore(reducer),
    EffectsModule.run(ApiSearchEffects),
    EffectsModule.run(KnowledgeEffects),
    StoreDevtoolsModule.instrumentOnlyWithExtension(),
    Ng2Bs3ModalModule,
    ChartsModule
  ],

  providers: [
    SearchService,
    AutocompleteService,
    ThemeService,
    SpeechService,
    CrawlstartService,
    IntelligenceService,
    AutocorrectService,
    SpeechSynthesisService,
    KnowledgeapiService,
    NewsService,
    GetJsonService

* @ngrx/router-store keeps router state up-to-date in the store and uses
     * the store as the single source of truth for the router's state.
     */
    RouterStoreModule.connectRouter(),

    /**
     * Store devtools instrument the store retaining past versions of state
     * and recalculating new states. This enables powerful time-travel
     * debugging.
     * 
     * To use the debugger, install the Redux Devtools extension for either
     * Chrome or Firefox
     * 
     * See: https://github.com/zalmoxisus/redux-devtools-extension
     */
    StoreDevtoolsModule.instrumentOnlyWithExtension(),

    /**
     * `provideDB` sets up @ngrx/db with the provided schema and makes the Database
     * service available.
     */
    DBModule.provideDB(schema),
    NavigatorModule,
    SharedModule,
    AuthModule,
    routing
  ],
  declarations: [
    PlatformDirective,
    NotFoundPage,
    RioAboutPage,
    TitleComponent

const reducers = {
  app: app.reducer,
  auth: auth.reducer,
  layout: layout.reducer,
}

const reducer: ActionReducer = combineReducers(reducers)

export function colmenaReducer(state: any, action: any) {
  return reducer(state, action)
}

@NgModule({
  imports: [
    StoreModule.provideStore(colmenaReducer),
    StoreDevtoolsModule.instrumentOnlyWithExtension(),
    EffectsModule.run(app.AppEffects),
    EffectsModule.run(auth.AuthEffects),
    EffectsModule.run(layout.LayoutEffects),
  ],
})
export class AppStoreModule {}

import { initialRoutes } from './app.routes';
import { PostEffects } from './post-data/posts.effects';
import { PageEffects } from './page-data/pages.effects';
import { CanDeactivateHomeGuard, CanActivatePostGuard, CanDeactivatePostGuard, CanDeactivatePageGuard } from './views/guards';
import { EditorDirective } from './directives/tiny.directive';

@NgModule({
  bootstrap:    [ AppComponent ],
  imports:      [ 
  	BrowserModule,
    HttpModule,
  	RouterModule.forRoot(initialRoutes),
  	StoreModule.provideStore(reducer()),
    EffectsModule.run(PostEffects),
    EffectsModule.run(PageEffects),
    StoreDevtoolsModule.instrumentOnlyWithExtension(),
  ],
  declarations: [ 
	  AppComponent, 
	  HomeViewComponent, 
	  PostViewComponent,
	  PageViewComponent,
	  PostListComponent, 
	  PostItemComponent,
	  MenuComponent,
	  EditorDirective
  ],
  entryComponents: [ HomeViewComponent, PostViewComponent, PageViewComponent ],
  providers: [
    AppService,
    SiteDataService,
    PostService,