How to use the @ngrx/router-store.RouterStoreModule.connectRouter function in @ngrx/router-store

To help you get started, we’ve selected a few @ngrx/router-store examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github rangle / redux-beacon / examples / google-analytics-ngrx / app / app.module.ts View on Github external
const analyticsMetaReducer = createMetaReducer(eventsMap, GoogleAnalytics, { logger });
// A meta reducer is just a function that takes in a reducer, and spits out
// an augmented reducer, there isn't

const loggerMetaReducer = storeLogger();

const appRoutes: Routes = [
  { path: 'page1', component: Page1Component },
  { path: 'page2', component: Page2Component },
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    RouterStoreModule.connectRouter(),
    StoreModule.provideStore({
      count: loggerMetaReducer(analyticsMetaReducer(countReducer)), // (redux-beacon)
      router: routerReducer,
    })
  ],
  declarations: [ AppComponent, Page1Component, Page2Component ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
github blove / angular-reactive-authentication / src / app / app.module.ts View on Github external
import { reducer } from "./app.reducers";

// services
import { UserService } from "./core/services/user.service";

@NgModule({
  declarations: [
    AppComponent,
    NotFoundComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule,
    EffectsModule.run(UserEffects),
    RouterStoreModule.connectRouter(),
    StoreModule.provideStore(reducer, {
      router: window.location.pathname + window.location.search
    })
  ],
  providers: [
    AuthenticatedGuard,
    UserService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
github aviabird / listify / src / app / app.module.ts View on Github external
BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    ComponentsModule,
    PipesModule,
    CommonModule,
    routing,
    // Importing RestangularModule and making default configs for restanglar
    RestangularModule.forRoot((RestangularProvider) => {
      RestangularProvider.setBaseUrl(environment.baseUrl);
      RestangularProvider.setDefaultHeaders({'Content-Type':'application/json'});
      }
    ),
    StoreModule.provideStore(reducer),
    RouterStoreModule.connectRouter(),
    StoreDevtoolsModule.instrumentStore({
      monitor: useLogMonitor({
        visible: false,
        position: 'right'
      })
    }),
    StoreLogMonitorModule,
    EffectsModule.run(UserAuthEffects),
    EffectsModule.run(UserEffects),
    EffectsModule.run(ListEffects),
    EffectsModule.run(FeedsEffects),
    EffectsModule.run(UserListsEffects)
  ],
  providers: [
    actions,
    UserAuthService,
github Hongbo-Miao / webtorrent-player / src / app / app.module.ts View on Github external
compose(
        storeFreeze,
        storeLogger({
          collapsed: true,
          duration: false,
          timestamp: false
        }),
        combineReducers
      )({
        router: routerReducer,

        player: playerReducer
      })
    ),

    RouterStoreModule.connectRouter(),
    StoreDevtoolsModule.instrumentOnlyWithExtension()   // note that this must instrument after importing StoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
github DSpace / dspace-angular / src / platform / modules / browser.module.ts View on Github external
deps: [Http]
      }
    }),
    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
github aviabird / pinterest / src / app / app.module.ts View on Github external
FormsModule,
    ReactiveFormsModule,
    HttpModule,
    AppRoutes,
    AngularFireModule.initializeApp(firebaseConfig, {
      provider: AuthProviders.Google,
      method: AuthMethods.Popup
    }),
    RouterModule.forRoot(routes),
    StoreModule.provideStore(reducer, {
      router: {
        path: window.location.pathname + window.location.search
      }
    }),
    // StoreDevtoolsModule.instrumentOnlyWithExtension(),
    RouterStoreModule.connectRouter(),
    EffectsModule.run(UserAuthEffects),
    EffectsModule.run(PinEffects),
    EffectsModule.run(CommentEffects),
    EffectsModule.run(NotificationEffects),
    MasonryModule,
    InfiniteScrollModule,
    SlimLoadingBarModule.forRoot(),
    ToasterModule,
    TagInputModule,
    BrowserAnimationsModule
  ],
  providers: [
    AuthenticationService,
    PinDataService,
    LoaderService,
    {
github justindujardin / angular-rpg / src / app / app.imports.ts View on Github external
FormsModule,
  HttpModule,

  // Components
  BehaviorsModule.forRoot(),
  AppComponentsModule.forRoot(),

  // Routes
  CombatModule.forRoot(),
  WorldModule.forRoot(),
  PowCoreModule.forRoot(),

  ReactiveFormsModule,
  RouterModule.forRoot(ROUTES, {useHash: true}),
  StoreModule.provideStore(rootReducer),
  RouterStoreModule.connectRouter(),

  // TODO: store/devtools disabled because of poor performance.
  //
  // Because devtools serializes state to JSON, if you have a large amount of data in your stores (~500 objects)
  // the time it takes to serialize and deserialize the object becomes significant. This is crippling to the
  // performance of the app.
  //
  // To re-enable the devtools, [fix this](https://github.com/ngrx/store-devtools/issues/57) and then pass
  // the option to use [Immutable compatible devtools](https://goo.gl/Wym3eT).
  //
  // StoreDevtoolsModule.instrumentStore(),

  EffectsModule.run(GameStateEffects),
  EffectsModule.run(CombatEffects),
  EffectsModule.run(SpritesEffects),
  EffectsModule.run(GameDataEffects),
github DSpace / dspace-angular / src / node.module.ts View on Github external
provide: TranslateLoader,
      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 {
github dancancro / great-big-example-application / src / app / core / core.module.ts View on Github external
CommonModule,
    //    MaterialModule.forRoot(),
    /**
     * StoreModule.provideStore is imported once in the root module, accepting a reducer
     * function or object map of reducer functions. If passed an object of
     * reducers, combineReducers will be run creating your application
     * meta-reducer. This returns all providers for an @ngrx/store
     * based application.
     */
    store,

    /**
     * @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.
github ngrx / example-app / src / app / app.module.ts View on Github external
RouterModule.forRoot(routes, { useHash: true }),

    /**
     * StoreModule.provideStore is imported once in the root module, accepting a reducer
     * function or object map of reducer functions. If passed an object of
     * reducers, combineReducers will be run creating your application
     * meta-reducer. This returns all providers for an @ngrx/store
     * based application.
     */
    StoreModule.provideStore(reducer),

    /**
     * @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(),

    /**
     * EffectsModule.run() sets up the effects class to be initialized
     * immediately when the application starts.