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

} from './store/reducers/router.reducer';
import { ROUTING_FEATURE } from './store/routing-state';

export function initConfigurableRoutes(
  service: ConfigurableRoutesService
): () => void {
  const result = () => service.init(); // workaround for AOT compilation (see https://stackoverflow.com/a/51977115)
  return result;
}

@NgModule({
  imports: [
    StoreModule.forFeature(ROUTING_FEATURE, reducerToken),
    EffectsModule.forFeature(effects),
    StoreRouterConnectingModule.forRoot({
      routerState: RouterState.Minimal,
      stateKey: ROUTING_FEATURE, // name of reducer key
    }),
  ],
})
export class RoutingModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: RoutingModule,
      providers: [
        reducerProvider,
        {
          provide: RouterStateSerializer,
          useClass: CustomSerializer,
        },
        {
          provide: APP_INITIALIZER,

NoEndpointsNonAdminComponent,
  ],
  imports: [
    EntityCatalogueModule.forFeature(generateStratosEntities),
    RouteModule,
    CloudFoundryPackageModule,
    AppStoreModule,
    BrowserModule,
    SharedModule,
    BrowserAnimationsModule,
    CoreModule,
    SetupModule,
    LoginModule,
    HomeModule,
    DashboardModule,
    StoreRouterConnectingModule.forRoot(), // Create action for router navigation
    AboutModule,
    CustomImportModule,
    XSRFModule,
    CfAutoscalerModule
  ],
  providers: [
    CustomizationService,
    TabNavService,
    LoggedInService,
    ExtensionService,
    DynamicExtensionRoutes,
    { provide: GITHUB_API_URL, useFactory: getGitHubAPIURL },
    { provide: RouterStateSerializer, useClass: CustomRouterStateSerializer }, // Create action for router navigation
    { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
  ],
  bootstrap: [AppComponent]

path: '',
		runGuardsAndResolvers: 'always',
	},
];

/**
 * Marks an class as an NgModule so it could be configured
 */
@NgModule({
	exports: [RouterModule],
	imports: [
		RouterModule.forRoot(appRoutes, {
			enableTracing: false,
			onSameUrlNavigation: 'reload',
		}),
		StoreRouterConnectingModule.forRoot({
			serializer: CustomSerializer,
		}),
	],
	providers: [{ provide: RouterStateSerializer, useClass: CustomSerializer }],
})

/* istanbul ignore next */
/**
 * Exports the AppRoutingModule from the NgModule
 */
export class AppRoutingModule {}

ReactiveFormsModule,
    HttpClientModule,
    MarkdownModule.forRoot({ loader: HttpClient }),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    StoreModule.forRoot({
      router: routerReducer,
      users: usersReducer
    }),
    // Connects RouterModule with StoreModule
    StoreRouterConnectingModule.forRoot({
      stateKey: "router" // name of reducer key
    }),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production // Restrict extension to log-only mode
    }),
    EffectsModule.forRoot([UserEffects])
  ],
  providers: [
    UserService,
    AuthService,
    GroupService,
    TextService,
    VoteService,
    AuthenticationGuard
  ],

import {TransferHttpCacheModule} from '@nguniversal/common';
import { ProfileModule } from './profile/profile.module';
import { AboutModule } from './about/about.module';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSnackBarModule } from '@angular/material/snack-bar';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    RouterModule.forRoot(appRoutes),
    StoreModule.forRoot(reducers, { metaReducers }),
    EffectsModule.forRoot(effects),
    // Connects RouterModule with StoreModule
    StoreRouterConnectingModule.forRoot({
      stateKey: 'router', // name of reducer key
    }),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),
    BrowserModule.withServerTransition({appId: 'my-app'}),
    TransferHttpCacheModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatProgressSpinnerModule,
    NavbarModule,
    HomeModule,
    ProfileModule,
    AuthenticationModule,

/**
 * Makes sure that if the user navigates to another route, the sidebar is collapsed
 */
import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { filter, map, tap } from 'rxjs/operators';
import { SearchSidebarCollapseAction } from '../../../+search-page/search-sidebar/search-sidebar.actions';
import * as fromRouter from '@ngrx/router-store';
import { URLBaser } from '../../../core/url-baser/url-baser';

@Injectable()
export class SearchSidebarEffects {
  private previousPath: string;
  @Effect() routeChange$ = this.actions$
    .pipe(
      ofType(fromRouter.ROUTER_NAVIGATION),
      filter((action) => this.previousPath !== this.getBaseUrl(action)),
      tap((action) => {
        this.previousPath = this.getBaseUrl(action)
      }),
      map(() => new SearchSidebarCollapseAction())
    );

  constructor(private actions$: Actions) {

  }

  getBaseUrl(action: any): string {
    /* tslint:disable:no-string-literal */
    const url: string = action['payload'].routerState.url;
    return new URLBaser(url).toString();
    /* tslint:enable:no-string-literal */

'params': {
              'id': 'admin'
            },
            'queryParams': {},
            'fragment': null,
            'path': ['/', 'settings', 'users', 'admin']}
        }
      }));

    // GetTeam should not be called because we are not on the teams page any more.
    expect(store.dispatch).not.toHaveBeenCalledWith(new GetTeam({id: 'admin'}));
  });
});

export class GetRoute implements Action {
  readonly type = routerStore.ROUTER_NAVIGATION;

  constructor(public payload: any) { }
}

import { Injectable } from '@angular/core';
import { Effect, Actions, ofType } from '@ngrx/effects'
import * as fromRouter from '@ngrx/router-store';

import { SearchSidebarCollapseAction } from './search-sidebar.actions';
import { URLBaser } from '../../core/url-baser/url-baser';

/**
 * Makes sure that if the user navigates to another route, the sidebar is collapsed
 */
@Injectable()
export class SearchSidebarEffects {
  private previousPath: string;
  @Effect() routeChange$ = this.actions$
    .pipe(
      ofType(fromRouter.ROUTER_NAVIGATION),
      filter((action) => this.previousPath !== this.getBaseUrl(action)),
      tap((action) => {
        this.previousPath = this.getBaseUrl(action)
      }),
      map(() => new SearchSidebarCollapseAction())
    );

  constructor(private actions$: Actions) {

  }

  getBaseUrl(action: any): string {
    /* tslint:disable:no-string-literal */
    const url: string = action['payload'].routerState.url;
    return new URLBaser(url).toString();
    /* tslint:enable:no-string-literal */

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 { }

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 { }