angular - property - La propiedad ''do'' no existe en el tipo ''Observable<IProduct[]>''

ts la propiedad map no existe en el tipo observable response>''

Question

Después de actualizar a Angular 6.0 y Rxjs a 6.0, recibo el siguiente error de compilación:

Property ''do'' does not exist on type ''Observable''.

Aquí está el código:

import { Observable, of } from ''rxjs'';
import ''rxjs/add/operator/do'';
import ''rxjs/add/observable/throw'';
import ''rxjs/add/operator/catch'';
import { IProduct } from ''./product'';

@Injectable()
export class ProductService { 
    constructor(
        private product: IProduct)
    {         
    }

    getProduct = () => { 
        return product.products
            // error on next line
            .do(data => console.log(''All:'' + JSON.stringify(data)))
            .catch(this.handleError);
    }

    private handleError(err: HttpErrorResponse) { 
        console.log(err.message);
        return Observable.throw(err.message);        
    }
}

¿Alguna idea?

Answer 1

Aprecio la respuesta de Tjaart van der Walt sobre cómo resolver los "cambios de ruptura" introducidos en Angular / rxjs7 ++. Pero todavía encontré varios problemas al intentar aplicar su respuesta a mi interceptor angular:

Aquí está el código actualizado (las secciones que no se compilaron están marcadas como "ANTIGUO")

import {Injectable} from ''@angular/core'';
import {HttpEvent, HttpInterceptor, HttpResponse} from ''@angular/common/http'';
import {HttpHandler, HttpRequest, HttpErrorResponse} from ''@angular/common/http'';

/*
  OLD:
  import {Observable} from ''rxjs/Observable'';
  import ''rxjs/add/operator/do'';
 */
import { Observable } from ''rxjs'';
import { of } from ''rxjs'';
import { tap, catchError } from ''rxjs/operators'';

import { AuthService } from ''./auth.service'';

@Injectable()
export class StockAppInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (this.authService.authToken) {
      const authReq = req.clone({
        headers: req.headers.set(
          ''Authorization'',
          this.authService.authToken
        )
      });
      console.log(''Making an authorized request'');
      req = authReq;
    }
    /*
     * OLD:
     * return next.handle(req)
     *   .do(event => this.handleResponse(req, event),
     *      error => this.handleError(req, error));
     */
    return next.handle(req).pipe(
      tap(
        event => this.handleResponse(req, event),
        error => this.handleError(req, error)
      )
    );
  }


  handleResponse(req: HttpRequest<any>, event) {
    console.log(''Handling response for '', req.url, event);
    if (event instanceof HttpResponse) {
      console.log(''Request for '', req.url,
          '' Response Status '', event.status,
          '' With body '', event.body);
    }
  }

  handleError(req: HttpRequest<any>, event) {
    console.error(''Request for '', req.url,
          '' Response Status '', event.status,
          '' With error '', event.error);
  }
}

Los cambios requeridos incluyen el cambio de rutas de import y la sustitución de pipe() , tap() y of() .

Este enlace también es un buen recurso para los cambios de RxJS6:

https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Answer 2

El problema no es con angular sino con rxjs. rxjs introdujo cambios de última hora de la versión 6 de rxjs.

Para que su código vuelva a funcionar sin cambiar su código, instale el siguiente paquete:

npm install rxjs-compat@6 --save

Entonces deberías poder compilar tu proyecto. rxjs-compat está destinado a ser una solución temporal, por lo que necesita actualizar su base de código para que funcione con la nueva versión.

Nueva ruta de importación

Lo que necesitas actualizar:

1. Actualizar las declaraciones de importación de

   import { Observable } from "rxjs/Observable";

   a

   import { Observable } from "rxjs";

2. Actualice las importaciones de su operador desde

   import ''rxjs/add/operator/do''

   a

   import { do } from "rxjs/operators";

Operadores Renombrados

Algunos operadores también han cambiado de nombre debido a colisiones de nombres con palabras reservadas de JavaScript. Son

1. do => tap

2. catch => catchError

3. switch => switchAll

4. finally => finalize

Sin Encadenamiento del Operador

Tampoco puede encadenar a sus operadores, ya que necesita utilizar el operador de pipe , por ejemplo,

// an operator chain
source
  .map(x => x + x)
  .mergeMap(n => of(n + 1, n + 2)
    .filter(x => x % 1 == 0)
    .scan((acc, x) => acc + x, 0)
  )
  .catch(err => of(''error found''))
  .subscribe(printResult);

// must be updated to a pipe flow
source.pipe(
  map(x => x + x),
  mergeMap(n => of(n + 1, n + 2).pipe(
    filter(x => x % 1 == 0),
    scan((acc, x) => acc + x, 0),
  )),
  catchError(err => of(''error found'')),
).subscribe(printResult);

Answer 3

Rxjs 6 ha introducido algunos cambios de última hora y el operador "do" ha sido reemplazado por el operador "tap" (de '' rxjs/internal/operators '').

Puede refactorizar su código usando el nuevo operador o seguir usando la antigua sintaxis ''do'' agregando la biblioteca rxjs-compat para compatibilidad con versiones anteriores ( npm install --save rxjs-compat ).

Tenga en cuenta que antes de RxJs 6 tenía que importar el operador ''do'':

import ''rxjs/add/operator/do'';

Más detalles aquí: Angular HTTP GET con error de TypeScript http.get (...). Map no es una función en [null]