How to use @ngxs/router-plugin - 10 common examples

async onFileSelected(file: File) {
    try {
      const data = await this.sketchService.loadSketchFile(file);
      this.isDragging$.next(false);
      // Note: these actions need to be run in sequence!
      this.store.dispatch([
        new ResetUiSettings(),
        new CurrentData(data),
        new Navigate(['/editor/preview'])
      ]);
    } catch (error) {
      this.store.dispatch(new InformUser(error, ErrorType.Runtime));
      throw error;
    }
  }

function () {
        this.oauthService.logOut();
        this.store.dispatch(new Navigate(['/'], null, {
            state: { redirectUrl: this.store.selectSnapshot(RouterState).state.url },
        }));
        this.store.dispatch(new GetAppConfiguration());
    };
    // required for dynamic component

{ name: 'vue', func: xml }
  ];
}

const StoreDebugModule = [
  NgxsModule.forRoot([UiState, CodeGenState], {
    /**
     * WARNING: dont enbale the `developmentmode` config until it's been fixed!
     * ENABLING THIS, WILL THROW: TypeError: Cannot assign to read only property 'microTask' of object '[object Object]'
     * See similar issue in NgRx: https://github.com/brandonroberts/ngrx-store-freeze/issues/17
     */
    // developmentMode: !environment.production
  }),
  NgxsLoggerPluginModule.forRoot({ disabled: environment.production }),
  NgxsReduxDevtoolsPluginModule.forRoot({ disabled: environment.production }),
  NgxsRouterPluginModule.forRoot()
];

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}


@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    StoreDebugModule,
    CoreModule,

DialogsModule,
    ProfilePictureModule,
    SettingsModule,
    UserModule,
    FeatureFlagModule.forRoot(),
    NotImplementedModule,
    FeedbackDrawerModule,
    MatBadgeModule,
    NgxsModule.forRoot([AppState, BookmarksState, LastPersonsState, CommonPersonsState, SearchState, TableState], {
      // TODO: Fix https://github.com/T-Systems-MMS/phonebook/issues/95 first.
      // developmentMode: !environment.production
    }),
    NgxsStoragePluginModule.forRoot({
      key: ['appstate', 'bookmarks', 'commonpersons', 'lastpersons', 'tablestate']
    }),
    NgxsRouterPluginModule.forRoot(),
    NgxsLoggerPluginModule.forRoot({ disabled: environment.production }),
    NgxsReduxDevtoolsPluginModule.forRoot({ disabled: environment.production }),
    AddFilterModule,
    TableModule,
    ApiModule,
    // Has to be included here because of https://stackoverflow.com/a/41519512/9277073
    FeedbackDrawerModule,
    DragDropModule,
    ApiModule,
    IeWarningModule,
    PlatformModule,
    // Pages
    UserPagesModule
  ],
  providers: [
    {

@NgModule({
  providers: [
    CoreService,
  ],
  exports: [
    ClarityModule,
    ClrFormsNextModule,
  ],
  imports: [
    CommonModule,
    HttpClientModule,
    // NgxPageScrollModule,
    NgxsModule.forRoot([]),
    NgxsFormPluginModule.forRoot(),
    NgxsRouterPluginModule.forRoot(),
    ClarityModule,
    ClrFormsNextModule,
    GraphqlModule,
    AuthModule,
    I18nModule,
    NgxsReduxDevtoolsPluginModule.forRoot({
      disabled: environment.production,
    }),
    NgxsStoragePluginModule.forRoot({
      key: 'auth.token',
    }),
  ]
})
export class CoreModule {
  constructor(
    @Optional()

private updateURL(ctx: StateContext, action: UpdateUrl) {
    const update = action.update;
    const params: { [key: string]: string | null } = {};
    const routeState = this.store.selectSnapshot(RouterState.state);
    // For Unit Testing
    // Maybe this is a solution to not modify production code: https://github.com/ngxs/store/blob/master/packages/router-plugin/tests/router.plugin.spec.ts
    if (routeState == undefined) {
      return;
    }
    const routeSnapshot: ActivatedRouteSnapshot = routeState.root;
    if (update.searchFilter != null) {
      update.searchFilter.forEach(filter => {
        params[filter.filterColumn.id] = filter.filterValue;
      });
      // Remove Query Params that are not used anymore by setting them 'null' explicitly
      if (routeSnapshot.firstChild != null && routeSnapshot.firstChild.firstChild != null) {
        const queryParams = routeSnapshot.firstChild.firstChild.queryParams;
        Object.keys(queryParams).forEach(queryParamKey => {
          if (params[queryParamKey] == null) {
            if (!isSortKey(queryParamKey)) {

onLoginRedirect(ctx: StateContext) {
    console.log('onLoginRedirect, navigating to /auth/login');
    ctx.dispatch(new Navigate(['/auth/login']));
  }

ngOnInit() {
    this.crumbs$ = this.store
      .select(RouterState.state)
      .pipe(map(state => Array.from(state.breadcrumbs, ([key, value]) => ({ name: key, link: '/' + value }))));

    this.depth$ = this.store.select(RouterState.state).pipe(map(state => state.data.depth));
  }

ngOnInit() {
    this.crumbs$ = this.store
      .select(RouterState.state)
      .pipe(map(state => Array.from(state.breadcrumbs, ([key, value]) => ({ name: key, link: '/' + value }))));

    this.depth$ = this.store.select(RouterState.state).pipe(map(state => state.data.depth));
  }

ngOnInit() {
    this.crumbs$ = this.store
      .select(RouterState.state)
      .pipe(map(state => Array.from(state.breadcrumbs, ([key, value]) => ({ name: key, link: '/' + value }))));

    this.depth$ = this.store.select(RouterState.state).pipe(map(state => state.data.depth));

    this.mediaObserver
      .asObservable()
      .pipe(
        filter((changes: MediaChange[]) => changes.length > 0),
        map((changes: MediaChange[]) => changes[0]),
      )
      .subscribe((change: MediaChange) => {
        const isMobile = change.mqAlias === 'xs' || change.mqAlias === 'sm';

        this.isMobile = isMobile;
        this.sidenavMode = isMobile ? 'over' : 'side';
        this.sidenavOpen = !isMobile;
      });

    this.router.events.pipe().subscribe(event => {