Encountering an issue with Angular: The type 'boolean | Observable<boolean>' cannot be assigned to the type 'boolean'

Question

Encountering an issue with Angular: The type 'boolean | Observable<boolean>' cannot be assigned to the type 'boolean'

Check out this answer to understand the approach I am using for implementing the master guard. I have multiple guards that need to be executed in sequence.

In Master Guard -

return guard.canActivate(this.route, this.state);

The complete function is outlined below:

//Instantiate the guard and call canActivate method returning a promise
    private activateGuard(guardKey: string): Promise<boolean> {

        let guard: Guard1 | Guard2 | Guard3 | Guard4;

        switch (guardKey) {
            case GUARDS.GUARD1:
                guard = new Guard1();
                break;
            case GUARDS.GUARD2:
                guard = new Guard2();
                break;
            case GUARDS.GUARD3:
                guard = new Guard3();
                break;
            case GUARDS.GUARD4:
                guard = new Guard4(this._Guard4DependencyService);
                break;
            default:
                break;
        }
     
        return guard.canActivate(this.route, this.state);
    }

I encountered the following error:

Type 'boolean | Observable<boolean>' is not assignable to type 'boolean'.
  Type 'Observable<boolean>' is not assignable to type 'boolean'.

You can find the stackblitz link here

Shared screenshot: https://i.sstatic.net/CskTp.png I would appreciate any help or solutions to resolve this error. Thank you!

angular typescript angular-ui-router

Answer 1

Answer №1

After examining your problem, I have identified that guard1 service and guard2 service have different return types. They both need to have a return type of Promise<boolean> as specified in the MasterGuard service code.

If you take a look at activateGuard() in the MasterGuard service, it is expecting a return of Promise<boolean>. However, in guard1 service, you are returning Observable<boolean>.

guard1.service.ts :

@Injectable()
export class Guard1 implements CanActivate, CanActivateChild {
  
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    console.log('Chain-1');
    return Promise.resolve(true)   // Modified this part
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return this.canActivate(route, state);
  }
}

guard2.service.ts :

@Injectable()
export class Guard2 implements CanActivate, CanActivateChild {
  
  constructor() {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    console.log('Chain-2');
    return Promise.resolve(true);
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return this.canActivate(route, state);
  }
}

Here is the link to the working code demonstrating the correct implementation: https://stackblitz.com/edit/angular-route-guards-9tzxmv

The issue was caused by the following line:

switch (guardKey) {
  case GUARDS.GUARD1:
    guard = new Guard1(this._Router);   // because of this line it was creating issue
    break;
  case GUARDS.GUARD2:
    guard = new Guard2();
    break;
  default:
    break;
}

Answer 2

After examining your problem, I have identified that guard1 service and guard2 service have different return types. They both need to have a return type of Promise<boolean> as specified in the MasterGuard service code.

If you take a look at activateGuard() in the MasterGuard service, it is expecting a return of Promise<boolean>. However, in guard1 service, you are returning Observable<boolean>.

guard1.service.ts :

@Injectable()
export class Guard1 implements CanActivate, CanActivateChild {
  
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    console.log('Chain-1');
    return Promise.resolve(true)   // Modified this part
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return this.canActivate(route, state);
  }
}

guard2.service.ts :

@Injectable()
export class Guard2 implements CanActivate, CanActivateChild {
  
  constructor() {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    console.log('Chain-2');
    return Promise.resolve(true);
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return this.canActivate(route, state);
  }
}

Here is the link to the working code demonstrating the correct implementation: https://stackblitz.com/edit/angular-route-guards-9tzxmv

The issue was caused by the following line:

switch (guardKey) {
  case GUARDS.GUARD1:
    guard = new Guard1(this._Router);   // because of this line it was creating issue
    break;
  case GUARDS.GUARD2:
    guard = new Guard2();
    break;
  default:
    break;
}

Answer 3

Answer №2

Upon reviewing the stackblitz code provided, it is evident that the guard variable is declared as:

    let guard: Guard1 | Guard2;

This signifies that `guard` can be of either type Guard1 or Guard2, with each class having a distinct return type for the canActivate method. One class returns Observable<boolean>, while the other returns Promise<boolean>.

The issue arises when the statement

return guard.canActivate(this.route, this.state);

can potentially return either an Observable<boolean> or a Promise<boolean>, despite the function being defined to only return a Promise<boolean>.

If maintaining consistent return types is feasible, it is recommended to do so in order to resolve this discrepancy. However, if differing return types are necessary, then when assigning the guard to an instance of Guard2, the return statement should be modified to:

    return guard.canActivate(this.route, this.state).toPromise();

Answer 4

Upon reviewing the stackblitz code provided, it is evident that the guard variable is declared as:

    let guard: Guard1 | Guard2;

This signifies that `guard` can be of either type Guard1 or Guard2, with each class having a distinct return type for the canActivate method. One class returns Observable<boolean>, while the other returns Promise<boolean>.

The issue arises when the statement

return guard.canActivate(this.route, this.state);

can potentially return either an Observable<boolean> or a Promise<boolean>, despite the function being defined to only return a Promise<boolean>.

If maintaining consistent return types is feasible, it is recommended to do so in order to resolve this discrepancy. However, if differing return types are necessary, then when assigning the guard to an instance of Guard2, the return statement should be modified to:

    return guard.canActivate(this.route, this.state).toPromise();

Encountering an issue with Angular: The type 'boolean | Observable<boolean>' cannot be assigned to the type 'boolean'

Answer №1

Answer №2

Similar questions

Clear drop down selections after button is pressed

Instead of the type definition file, navigate to the TypeScript source file within VS Code

Is there a way to configure ESLint so that it strictly enforces either all imports to be on separate lines or all on a single line?

Error with Angular InjectionToken utilization

Experiencing problems with the Locale setting when utilizing the formatNumber function in Angular's core functionalities

Extract the array structure from the resolved promises using await with Promise.all()

Contrast between SimpleChange and SimpleChanges

When trying to access a property in Typescript that may not exist on the object

Ways to verify the compatibility between TypeScript type definitions in @types and the corresponding package

Effortless JSON parsing with Angular 2 Http GET request

Issue with angular 8 radio button not being selected

Using Angular, we can make an HTTP call and map the response to an

Using the mat-icon within several mat-select components

I am working in Angular 13 and attempting to dynamically assign attributes to an SVG HTML element by passing in values from variables declared in a TypeScript file

Replace Formik with useFormik to streamline your code

Enhance tns-platform-declarations with NativeScript

Can a specific type be created for a nested object that has varying levels of depth?

custom field component for react-hook-form

Can we securely retrieve nested properties from an object using an array of keys in TypeScript? Is there a method to accomplish this in a manner that is type-safe and easily combinable?

Sorting by the date column in Ngx-Datatable is malfunctioning