title: Angular Router Resolve function not working
body: <pre><code>// user-resolver.service.ts
  import { Injectable } from '@angular/core';
  import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
  import { User } from 'firebase/app';
  import { Observable } from 'rxjs';
  import { AngularFireAuth } from '@angular/fire/auth';
  
  @Injectable()
  export class UserResolver implements Resolve&lt;User&gt; {
    constructor(private _firebaseAuth: AngularFireAuth) { }
  
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;User&gt; {
      return this._firebaseAuth.authState;
    };
  }
  
  //app-routing.module.ts 
  
  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { LoginComponent } from './login/login.component';
  import { UserResolver } from './services/user-resolver.service';
  import { UserComponent } from './user/user.component';
  import { AuthGuardService as AuthGuard } from './services/auth-guard.service';
  
  const appRoutes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'user', component: UserComponent, resolve: { user: UserResolver }, canActivate: [AuthGuard] },
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(appRoutes)
    ],
    providers: [UserResolver],
    exports: [
      RouterModule
    ]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>Can't navigate to the UserComponent Page. If I were to remove the resolve property from the routes then it works. But when trying to resolve the user it doesn't works. Any help is appreciated.</p>