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

[BingeCode]

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.

[Sapython]

Can you share a stackblitz link or a Github repo?

[BingeCode]

Can you share a stackblitz link or a Github repo?

I managed to create a repo that reproduces the error.
If you rollback one commit, you will find that the error in this issue (#3031) does not appear, but instead the one from issue #2986. So it must be a certain version of some package(s) that produce this error (see package-lock.json).

EDIT: I found this Stackoverflow post regarding a similar 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.

[waterplea]

Same here on all the latest packages

I've updated everything (angular, firebase, etc) to the latest and it works now.

[Julian-B90]

@waterplea which versions do you have installed?

I have:
"firebase": "^9.3.0",
"rxfire": "^6.0.3",
"rxjs": "^6.6.7",
"@angular/fire": "^7.1.1",
"@angular/core": "~12.2.13",

and i get the error

[jeripeierSBB]

It helped me, just to delete the node_modules directory and run npm install afterwards.

[waterplea]

Yes, I too did a clean install. It worked for me with 12.2.12 for all Angular stuff and
"@angular/fire": "7.1.1",
"firebase": "9.1.3",
"rxfire": "6.0.3",
"rxjs": "7.4.0",

[sguti]

I am also facing the same issue, had to remove all the reference from "@angular/fire/auth-guard" to get rid of the issue.
"@angular/fire": "^7.1.1",
"firebase": "^9.4.0",
"rxfire": "^6.0.3",
"rxjs": "~6.6.0",

[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

[Ross-Rawlins]

@tomavic did you resolve your versions because I am having the same issue

[marcellokabora]

I am having the same issue 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'.