typescript - tutorial - install angular 6

El tipo ''void'' no se puede asignar al tipo ''ObservableInput<{}>''

Question

Este error comenzó a aparecer después de migrar a TS 2.2.2, así que asumo que ese es el problema ... El código no dejó de funcionar, pero ahora recibí ese error e intenté algunas cosas como devolver un observable vacío Al capturar la excepción re-lanzada y devolver un objeto, nada parecía funcionar. ¿Por qué sucede esto ahora? ¿No debería entender que estoy volviendo a lanzar la excepción y no espero una devolución? ¿Estoy malinterpretando el error?

Esta es la descripción completa del error:

Aquí está el código completo:

return request
    .map((res: Response) => res.json())
    .catch((error: any) => {
        // todo: log?

        if (error.status == 500) {
            this.alertService.showError(error.statusText);
        } else if (error.status == 588) {
            this.alertService.showAlert(error.statusText);
        }

        Observable.throw(error.statusText);
    });

Intenté devolver el Observable, pero mi método de envoltura espera una devolución de tipo T , que es la devolución de mi solicitud de deserialización ( map(...) ). Si devuelvo el throw este es el error que recibo:

[ts] El tipo ''Observable'' no se puede asignar al tipo ''T''

Estoy usando:

• Angular4
• Mecanografía 2.2.2

Answer 1

A veces cuando llamas catch sin usar la función de flecha como abajo

getUserList() {
    return this.http.get(this.constURL + ''/loans/all'', this.headerOptions)
    .catch(this.handleError);
}

handleError(error: Response) {
    if (error.status == 500) {      
      this.router.navigate([''/login'']);
    } else {
      return Observable.throw(error);
    }
}

entonces da error de

ERROR TypeError: no se puede leer la propiedad ''navegar'' de undefined que no recibe esto

Debido a que en la función handleError, este objeto no es accesible ... si usted consola esto.ruta, entonces obtendrá indefinido ... así que este objeto no funciona y no obtiene todos los métodos disponibles del enrutador

Así que tienes que usar la función de flecha aquí como abajo

getUserList() {
    return this.http.get(this.constURL + ''/loans/all'', this.headerOptions)
    .catch(error => { 
      return this.handleError(error);
    });
}

handleError(error: Response) {
    if (error.status == 500) {      
      this.router.navigate([''/login'']);
    } else {
      return Observable.throw(error);
    }
}

Además, si no ha mencionado el retorno para la función handlerError, entonces volverá a aparecer el error como

El argumento de tipo ''(error: cualquiera) => void'' no se puede asignar a un parámetro de tipo

Por lo tanto, es necesario escribir return para la función handlerError.

Consulte here detalladamente. Él ha explicado el código muy bien con todos los posibles errores y la solución de eso.

Answer 2

Esta es una respuesta para angular 6 con RXJS 6. En su función de solicitud, se vería similar a esto. Tenga en cuenta que catch se ha reemplazado con catchError y Observable.throw ahora es throwError . También en RXJS 6 usamos pipe para unir una secuencia de funciones que deseamos realizar en lugar del encadenamiento de puntos previamente.

//In your service

getData(url: string): Observable<any> {
    let options = this.getHTTPOptions();
    return this.http.get<any>(url, options).pipe(
          catchError( (err: any, caught: Observable<any>) => { return 
        throwError(this.generalErrorHandler(err, caught)) } ) );
}

Entonces puedes tener un manejador de errores. La clave es especificar el return la palabra clave en la función catchError anterior y devolver el error en el controlador. La flecha ( => ) le permite pasar el contexto de la función de llamada al controlador de errores, lo que significa que puede hacer cosas interesantes como this.router.navigate([''someroute'']); (Si tiene el enrutador importado en su servicio)

//In your service

  generalErrorHandler(error: any, caught: Observable<any>): Observable<any> {
    console.log(''error caught: '', error);
    if( error.error.status == "INVALID_TOKEN" || error.error.status == "MAX_TOKEN_ISSUE_REACHED"){
      console.log(''token has expired'');
      this.logout();
      return error;
    }
    return error;
  }

Algunas importaciones clave para que esto funcione:

//Imports for the service

import { HttpClient, HttpHeaders, HttpErrorResponse } from ''@angular/common/http'';
import { Http, Response } from ''@angular/http'';
import { catchError, map } from ''rxjs/operators'';
import { Observable, throwError, of} from ''rxjs'';

Y por último suscribirse a la solicitud para obtener sus datos:

//In your component, don''t forget to import your service

let response$ = this.someService.getData(''url here'');
response$.subscribe( 
    data => { console.log(''do stuff to data here'', data); },
    err => { console.log("couldn''t get data, maybe show error to user"); },
    () => { console.log(''function that is called upon finish''); }
);

Answer 3

Tienes que devolver el observable.

 return request
    .map((res: Response) => res.json())
    .catch((error: any) => {
        // todo: log?

        if (error.status == 500) {
            this.alertService.showError(error.statusText);
        } else if (error.status == 588) {
            this.alertService.showAlert(error.statusText);
        }

        return Observable.throw(error.statusText);
    });