@ ngrx / router-store默认路由不再工作

Question

我已将@ngrx添加到我的应用中，从那时起，默认路由不再有效。不确定我错过了什么。到所有其他路径的路由仍然有效。

http://localhost:4200/#/没有重定向到http://localhost:4200/#/dashboards/dashboard1

使用菜单导航至http://localhost:4200/#/dashboards/dashboard1即可。

在添加store-router

之前，这个工作正常

我的路线：

import { Routes } from '@angular/router';

import { FullComponent } from './layouts/full/full.component';
import { AppBlankComponent } from './layouts/blank/blank.component';
import {AuthGuard} from './authentication/guards/authGaurd.service';

export const AppRoutes: Routes = [{
  path: '',
  component: FullComponent,
  children: [{
    path: '',
    redirectTo: '/dashboards/dashboard1',
    pathMatch: 'full'
  }, {
    path: 'dashboards',
    loadChildren: './dashboards/dashboards.module#DashboardsModule',
    canActivate: [AuthGuard]
  }, {
    path: 'personal',
    loadChildren: './apps/apps.module#AppsModule',
    canActivate: [AuthGuard]
  }, {
    path: 'library',
    loadChildren: './library/library.module#LibraryModule',
    canActivate: [AuthGuard]
  },
  ]
}, {
  path: '',
  component: AppBlankComponent,
  children: [{
    path: 'authentication',
    loadChildren: './authentication/authentication.module#AuthenticationModule'
  }]
}, {
  path: '**',
  redirectTo: 'authentication/404'
}];

app.moduel

@NgModule({
  declarations: [
    AppComponent,
    FullComponent,
    AppHeaderComponent,
    SpinnerComponent,
    AppBlankComponent,
    AppSidebarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DemoMaterialModule,
    FormsModule,
    FlexLayoutModule,
    HttpClientModule,
    PerfectScrollbarModule,
    SharedModule,
    RouterModule.forRoot(AppRoutes),
    StoreModule.forRoot(reducers, {metaReducers}),
    StoreRouterConnectingModule.forRoot({
      stateKey: 'router',
    }),
    StoreDevtoolsModule.instrument({
      name: 'NgRx Book Store DevTools',
      logOnly: environment.production,
    }),
    EffectsModule.forRoot([]),
    AuthenticationModule.forRoot(),
  ],
  providers: [
    {
      provide: PERFECT_SCROLLBAR_CONFIG,
      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
    }, {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    },
    { provide: RouterStateSerializer, useClass: CustomRouterStateSerializer },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

的package.json：

....
"@angular/animations": "^5.0.0",
"@angular/cdk": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.1.2",
"@angular/flex-layout": "2.0.0-beta.10-4905443",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/material": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"@ngrx/effects": "^5.2.0",
"@ngrx/router-store": "^5.2.0",
"@ngrx/store": "^5.2.0",
....

更新

AuthGuard.service.ts

import { Injectable } from '@angular/core';
import {ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot} from '@angular/router';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';
import * as AuthActions from '../actions/auth.actions';
import * as fromAuth from '../reducers';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private store: Store<fromAuth.State>) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    debugger;
    return this.store.pipe(
      select(fromAuth.getLoggedIn),
      map(authed => {
        if (!authed) {
          this.store.dispatch(new AuthActions.LoginRedirect(state.url));
          return false;
        }

        return true;
      }),
      take(1)
    );
  }
}