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]