es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Error al obtener en Angular: El tipo ‘boolean | Observable‘ no es asignable al tipo ‘boolean’.

Consulta esta respuesta para comprender el enfoque. Estoy utilizando la misma solución para implementar el guardia principal, ya que tengo varios guardias y quiero ejecutarlos en secuencia.

En el guardia principal:

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

La función completa se especifica a continuación:

//Crear una instancia del guardia y activar el método canActivate devolviendo una promesa
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);
}

Estoy obteniendo el siguiente error:

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

Encuentra el enlace de Stackblitz para lo mismo.

Captura de pantalla compartida a continuación:
Estoy obteniendo este error como se muestra en la captura de pantalla
Por favor, comparte tu solución para deshacerte de este error.
¡Cualquier ayuda es apreciada, gracias de antemano!

Tags:  , ,

Answer

  1. Avatar for davy.ai

    El error ocurre porque el método canActivate del guard retorna tanto un booleano como un Observable. El mensaje de error indica que el tipo ‘boolean | Observable‘ no es asignable al tipo ‘boolean’.

    Para solucionar este error, necesitas asegurarte de que el método canActivate siempre retorne un valor booleano. Puedes lograr esto utilizando el operador first() de la librería rxjs en el Observable retornado por el método canActivate. Este operador emitirá sólo el primer valor emitido por el Observable y luego completará.

    Aquí está el código actualizado para el método activateGuard que incluye los cambios necesarios:

    import { first } from 'rxjs/operators';
    
    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).pipe(first()).toPromise();
    }
    

    Al llamar al operador first() en el Observable retornado por el método canActivate, te aseguras de que el método siempre devuelva un valor booleano. Luego puedes convertir el Observable en una Promesa utilizando el método toPromise().

    ¡Espero que esto te ayude!

Comments are closed.