即使在Firebase中设置了管理员，也始终始终路由到首页

Question

我正在练习教程中的练习。在此项目中，有些页面只能由admin访问。我在firebase中将isAdmin属性添加为true。但是即使设置了页面，我仍然始终会重定向到主页可以由管理员访问。

我在控制台中收到以下错误：typeerror：“ this.remaining为null”。

app.component.ts：

import { Component } from '@angular/core';
import { AuthService } from './auth.service';
import { Router } from '../../node_modules/@angular/router';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private userService:UserService,private auth:AuthService, router:Router){
    auth.user$.subscribe(user=>{
      if(user){
        userService.save(user);
        let returnUrl = localStorage.getItem('returnUrl');


        if (returnUrl) {
          localStorage.removeItem('returnUrl');
          router.navigateByUrl(returnUrl);
        }


        router.navigateByUrl(returnUrl);

      }

    });
  }
} 

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule} from 'angularfire2/database';
import {AngularFireAuthModule, AngularFireAuth} from 'angularfire2/auth';
import { Observable} from 'rxjs'; 
import {RouterModule, RouterOutlet, Routes} from '@angular/router';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import { BsNavbarComponent } from './bs-navbar/bs-navbar.component';
import { HomeComponent } from './home/home.component';
import { ProductsComponent } from './products/products.component';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
import { CheckOutComponent } from './check-out/check-out.component';
import { OrderSucessfulComponent } from './order-sucessful/order-sucessful.component';
import { MyOrdersComponent } from './my-orders/my-orders.component';
import { AdminProductsComponent } from './admin/admin-products/admin-products.component';
import { AdminOrdersComponent } from './admin/admin-orders/admin-orders.component';
import { LoginComponent } from './login/login.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AuthService } from './auth.service';
import { AuthGuard } from './auth-guard.service';
import { UserService } from './user.service';
import { Adminauthguard } from './adminauthguard.service';
export const appRoutes: Routes = [

  {path:'',component:HomeComponent},
  {path:'products',component:ProductsComponent},
  {path:'shopping-cart',component:ShoppingCartComponent},
  {path:'login',component:LoginComponent},

  {path:'check-out',component:CheckOutComponent,canActivate:[AuthGuard]},
  {path:'order-sucessful',component:OrderSucessfulComponent,canActivate:[AuthGuard]},
  {path:'my/orders',component:MyOrdersComponent,canActivate:[AuthGuard]},

  {path:'admin/products',component:AdminProductsComponent,canActivate:[AuthGuard,Adminauthguard]},
  {path:'admin/orders',component:AdminOrdersComponent,canActivate:[AuthGuard,Adminauthguard]}

  ]


@NgModule({
  declarations: [
    AppComponent,
    BsNavbarComponent,
    HomeComponent,
    ProductsComponent,
    ShoppingCartComponent,
    CheckOutComponent,
    OrderSucessfulComponent,
    MyOrdersComponent,
    AdminProductsComponent,
    AdminOrdersComponent,
   LoginComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireDatabaseModule,
    NgbModule.forRoot()

  ],

  providers: [AngularFireAuth,AuthService,AuthGuard,Adminauthguard],
  bootstrap: [AppComponent]
})
export class AppModule { }

adminroutegaurdservice.ts

import { Injectable } from '@angular/core';
import { CanDeactivate } from '../../node_modules/@angular/router';
import { AuthService } from './auth.service';
import { UserService } from './user.service';
import 'rxjs/add/operator/switchMap';
import {CanActivate} from '@angular/router'
import { Observable } from '../../node_modules/rxjs';
@Injectable({
  providedIn: 'root'
})
export class Adminauthguard implements CanActivate {

  constructor(private auth:AuthService,private userService:UserService) { }

  canActivate(): Observable<boolean>{
     return this.auth.user$
     .switchMap(user=>this.userService.get(user.uid))
     .map(appUser=>appUser.isAdmin);
  }

}