How to use @ngrx/store-devtools - 10 common examples

// 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) {

toInsert = `  ${keyInsert}\n`;
        }
        else {
            node = expr.properties[expr.properties.length - 1];
            position = node.getEnd() + 1;
            // Get the indentation of the last element, if any.
            const text = node.getFullText(source);
            const matches = text.match(/^\r?\n+(\s*)/);
            if (matches.length > 0) {
                toInsert = `\n${matches[1]}${keyInsert}`;
            }
            else {
                toInsert = `\n${keyInsert}`;
            }
        }
        return new change_1.InsertChange(reducersPath, position, toInsert);
    }
    exports.addReducerToActionReducerMap = addReducerToActionReducerMap;

toInsert = `  ${metadataField}: [${symbolName}]\n`;
            }
            else {
                node = expr.properties[expr.properties.length - 1];
                position = node.getEnd();
                // Get the indentation of the last element, if any.
                const text = node.getFullText(source);
                const matches = text.match(/^\r?\n\s*/);
                if (matches.length > 0) {
                    toInsert = `,${matches[0]}${metadataField}: [${symbolName}]`;
                }
                else {
                    toInsert = `, ${metadataField}: [${symbolName}]`;
                }
            }
            const newMetadataProperty = new change_1.InsertChange(ngModulePath, position, toInsert);
            const newMetadataImport = insertImport(source, ngModulePath, symbolName.replace(/\..*$/, ''), importPath);
            return [newMetadataProperty, newMetadataImport];
        }
        const assignment = matchingProperties[0];
        // If it's not an array, nothing we can do really.
        if (assignment.initializer.kind !== ts.SyntaxKind.ArrayLiteralExpression) {
            return [];
        }
        const arrLiteral = assignment.initializer;
        if (arrLiteral.elements.length == 0) {
            // Forward the property.
            node = arrLiteral;
        }
        else {
            node = arrLiteral.elements;
        }

epos = effectsArgs.getStart() + 1;
                        return [new change_1.InsertChange(ngModulePath, epos, effectsSymbol)];
                    }
                    else {
                        const lastEffect = effectsElements[effectsElements.length - 1];
                        epos = lastEffect.getEnd();
                        // Get the indentation of the last element, if any.
                        const text = lastEffect.getFullText(source);
                        let effectInsert;
                        if (text.match('^\r?\r?\n')) {
                            effectInsert = `,${text.match(/^\r?\n\s+/)[0]}${effectsSymbol}`;
                        }
                        else {
                            effectInsert = `, ${effectsSymbol}`;
                        }
                        return [new change_1.InsertChange(ngModulePath, epos, effectInsert)];
                    }
                }
                else {
                    return [];
                }
            }
        }
        let toInsert;
        let position = node.getEnd();
        if (node.kind == ts.SyntaxKind.ObjectLiteralExpression) {
            // We haven't found the field in the metadata declaration. Insert a new
            // field.
            const expr = node;
            if (expr.properties.length == 0) {
                position = expr.getEnd() - 1;
                toInsert = `  ${metadataField}: [${symbolName}]\n`;

toInsert = `  ${keyInsert}\n`;
        }
        else {
            node = expr.members[expr.members.length - 1];
            position = node.getEnd() + 1;
            // Get the indentation of the last element, if any.
            const text = node.getFullText(source);
            const matches = text.match(/^\r?\n+(\s*)/);
            if (matches.length > 0) {
                toInsert = `${matches[1]}${keyInsert}\n`;
            }
            else {
                toInsert = `\n${keyInsert}`;
            }
        }
        return new change_1.InsertChange(reducersPath, position, toInsert);
    }
    exports.addReducerToStateInterface = addReducerToStateInterface;

else if (node.kind == ts.SyntaxKind.ArrayLiteralExpression) {
            // We found the field but it's empty. Insert it just before the `]`.
            position--;
            toInsert = `${symbolName}`;
        }
        else {
            // Get the indentation of the last element, if any.
            const text = node.getFullText(source);
            if (text.match(/^\r?\n/)) {
                toInsert = `,${text.match(/^\r?\n(\r?)\s+/)[0]}${symbolName}`;
            }
            else {
                toInsert = `, ${symbolName}`;
            }
        }
        const insert = new change_1.InsertChange(ngModulePath, position, toInsert);
        const importInsert = insertImport(source, ngModulePath, symbolName.replace(/\..*$/, ''), importPath);
        return [insert, importInsert];
    }
    /**