Property 'canActivate' in type 'AngularFireAuthGuard' is not assignable to the same property in base type 'CanActivate'.

Version info

Angular: 12.2.11

Firebase: 9.1.0

AngularFire: 7.1.1

How to reproduce these conditions

I upgraded from Angular@11 to 12 and then from AngularFire@6 to 7. After refactoring my code to fit in with the new API, everything works except for the AngularFireAuthGuard.

This is my AppRoutingModule:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { RegisterComponent } from './pages/register/register.component';
import { TransactionOverviewComponent } from './pages/transaction-overview/transaction-overview.component';
import { AngularFireAuthGuard, redirectUnauthorizedTo } from '@angular/fire/compat/auth-guard';

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);

const routes: Routes = [
  { path: 'main', redirectTo: '', pathMatch: 'full' },
  { path: 'register', component: RegisterComponent, pathMatch: 'full' },
  { path: 'login', component: LoginComponent, pathMatch: 'full' },
  {
    path: '',
    component: TransactionOverviewComponent,
    pathMatch: 'full',
    canActivate: [AngularFireAuthGuard],
    data: { authGuardPipe: redirectUnauthorizedToLogin },
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Debug output

This is the error I get:

Error: node_modules/@angular/fire/compat/auth-guard/auth-guard.d.ts:13:5 - error TS2416: Property 'canActivate' in type 'AngularFireAuthGuard' is 
not assignable to the same property in base type 'CanActivate'.
  Type '(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => Observable<boolean | UrlTree>' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | UrlTree | Observable<boolean | UrlTree> | Promise<...>'.
    Type 'Observable<boolean | UrlTree>' is not assignable to type 'boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree>'.
      Type 'Observable<boolean | UrlTree>' is missing the following properties from type 'Observable<boolean | UrlTree>': _isScalar, _trySubscribe, _subscribe

13     canActivate: (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => Observable<boolean | import("@angular/router").UrlTree>; 

This is the compat/auth-guard/auth-guard.d.ts where the error is thrown

import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Observable, UnaryFunction } from 'rxjs';
import firebase from 'firebase/compat/app';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import * as i0 from "@angular/core";
export declare type AuthPipeGenerator = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => AuthPipe;
export declare type AuthPipe = UnaryFunction<Observable<firebase.User | null>, Observable<boolean | string | any[]>>;
export declare const loggedIn: AuthPipe;
export declare class AngularFireAuthGuard implements CanActivate {
    private router;
    private auth;
    constructor(router: Router, auth: AngularFireAuth);
    canActivate: (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => Observable<boolean | import("@angular/router").UrlTree>;
    static ɵfac: i0.ɵɵFactoryDeclaration<AngularFireAuthGuard, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<AngularFireAuthGuard>;
}
export declare const canActivate: (pipe: AuthPipeGenerator) => {
    canActivate: (typeof AngularFireAuthGuard)[];
    data: {
        authGuardPipe: AuthPipeGenerator;
    };
};
export declare const isNotAnonymous: AuthPipe;
export declare const idTokenResult: import("rxjs").OperatorFunction<firebase.User, any>;
export declare const emailVerified: AuthPipe;
export declare const customClaims: UnaryFunction<Observable<firebase.User>, Observable<any>>;
export declare const hasCustomClaim: (claim: string) => AuthPipe;
export declare const redirectUnauthorizedTo: (redirect: string | any[]) => AuthPipe;
export declare const redirectLoggedInTo: (redirect: string | any[]) => AuthPipe;

EDIT: Workaround

After I changed the return type of the canActivate function in line 13 in auth-guard.d.ts I received the error in #2986.

Expected behavior

AngularFireAuthGuard functions as expected.

Actual behavior

Error.

[rulaman123]

Had the same error with AngularFire: 7.1 and both Angular versions 12.0.1 and 12.1.1. With AngularFire: 7.1.1 and Angular 12.0.1 same error. But now with AngularFire: 7.1.1 and Angular 12.1.1 the error is gone. So is think its something with specific Angular versions. The error also broke my service even without having AuthGuard. So it was not only the AuthGuard bug. I am using rxfire 6.0.2, rxjs 6.6.7 and firebase 9.1.3.

[tomavic]

Hi all,

I am facing the same issue,

@angular-devkit/architect       0.1302.6
@angular-devkit/build-angular   13.2.6
@angular-devkit/core            13.2.6
@angular-devkit/schematics      13.2.6
@angular/cdk                    13.3.4
@angular/cli                    13.2.6
@angular/material               13.3.4
@schematics/angular             13.2.6
rxjs                            7.5.5
typescript                      4.5.5