navigationend - Angular 6 RXJS Importar Sintaxis?

router events angular 6

Question

Estoy migrando una aplicación Angular 5 a la última CLI y Angular 6 RC y todas mis importaciones observables están rotas. Veo que Angular 6 cambia la forma en que funcionan las importaciones, pero no puedo encontrar ninguna referencia definitiva sobre cómo funciona la sintaxis.

Tuve esto en 5 y funcionó bien:

import { Observable } from ''rxjs/Observable'';
import ''rxjs/add/operator/map'';
import ''rxjs/add/operator/catch'';
import ''rxjs/add/observable/throw'';

Ahora con la nueva sintaxis veo que

import { Observable, Subject, throwError} from ''rxjs'';
import { map } from ''rxjs/operators'';

Las primeras dos líneas se compilan, pero no puedo averiguar cómo atrapar y lanzar, por ejemplo. .map () también lanza un error de compilación cuando se usa en el código.

¿Alguien tiene una referencia a cómo se supone que funciona esto?

Answer 1

Desde github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md , catch ha cambiado el nombre a la función catchError para evitar el conflicto de nombres.

Debido a que los operadores están disponibles independientemente de un Observable, los nombres de los operadores no pueden entrar en conflicto con las restricciones de palabras clave de JavaScript. Por lo tanto, los nombres de la versión pipeable de algunos operadores han cambiado.

import { catchError } from ''rxjs/operators'';

Para throw puedes usar ErrorObservable .

import { ErrorObservable } from ''rxjs/observable/ErrorObservable'';
ErrorObservable.create(new Error("oops"));

rxjs 6

En lugar de ErrorObservable use throwError .

 import { throwError } from ''rxjs''
 throwError(new Error("oops"));

Además, ahora tendrá que canalizar a los operadores en lugar de encadenarlos directamente a lo observable.

Answer 2

Ejecute estos 2 comandos después de ejecutar ng update . Esto debería arreglar las importaciones de rxjs:

1. npm i -g rxjs-tslint
2. rxjs-5-to-6-migrate -p src / tsconfig.app.json

Referencias:

• https://github.com/ReactiveX/rxjs-tslint

Answer 3

Las tuberías son lo que se requiere para que los operadores avancen.

versión: rxjs 6.0.1

Ejemplo:

import { Observable } from "rxjs";
import { map } from "rxjs/operators";

Observable.create((observer: any) => {
    observer.next(''Hello'')
}).pipe(map((val: any) => val.toUpperCase()))
  .subscribe((x: any) => addItem(x))


function addItem(val: any) {
    console.log(''val'', val);
}

//output - (In uppercase)
HELLO

Answer 4

O si quieres seguir usando la versión 6.0.0 lo haces.

npm i --save rxjs-compat

para agregar compatibilidad inversa