angular - ¿Cómo importar solo los operadores usados en RxJS 6 como en el antiguo RxJS sin requerir rxjs-compat?
Anteriormente podía importar solo los operadores usados con este código:
import 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/finally';
import 'rxjs/add/observable/empty';
import 'rxjs/add/observable/throw';
Esto genera un pequeño paquete (vendor.ts).
¿Cómo hacer esto con RxJS sin requerir rxjs-compat?
Cambiar el código anterior a import 'rxjs'; genera un paquete más grande.
ACTUALIZACIÓN :
He seguido todas las respuestas que has publicado, pero nada funciona bien. Este es mi vendor.ts actualizado:
import 'rxjs/Observable';
import 'rxjs/Subscription';
import 'rxjs/Subject';
import 'rxjs/observable/throw';
import 'rxjs/operators/map';
import 'rxjs/operators/mergeMap';
import 'rxjs/operators/catchError';
import 'rxjs/operators/finalize';
También intenté usar 'rxjs/add/operator/*'.
Así es como estoy importando rxjs:
import {Observable} from 'rxjs/Observable';
import {Subscription} from 'rxjs/Subscription';
import {Subject} from 'rxjs/Subject';
import {_throw} from 'rxjs/observable/throw';
import {map} from 'rxjs/operators/map';
import {mergeMap} from 'rxjs/operators/mergeMap';
import {catchError} from 'rxjs/operators/catchError';
import {finalize} from 'rxjs/operators/finalize';
Cambié mi configuración de Webpack 3 según este documento (https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#build-and-treeshaking) y nada funciona.
Finalmente, echa un vistazo al resultado del Analizador de Paquetes de Webpack:
El paquete incluye todos los operadores. Encontré este problema relacionado: https://github.com/angular/angular-cli/issues/9069
Respuesta #1
rxjs-compat se supone que debe instalarse junto con rxjs, proporciona soporte para las importaciones de estilo antiguo.
Es posible usar RxJS 6 de la misma manera que RxJS 5:
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
Se espera que esta capa de compatibilidad sea eliminada en RxJS 7.
Respuesta #2
El problema para mí fue que tenía module configurado como commonjs en tsconfig.json. Necesita estar configurado como es6, porque webpack necesita módulos es6 para poder realizar tree shaking.
Consulta más información en: https://webpack.js.org/guides/tree-shaking/
Tree shaking es un término comúnmente usado en el contexto de JavaScript para la eliminación de código muerto. Se basa en la estructura estática de la sintaxis de módulos ES2015, es decir, import y export...
...
- Usa la sintaxis de módulos ES2015 (es decir, import y export).
- Asegúrate de que ningún compilador transforme tu sintaxis de módulos ES2015 en módulos CommonJS
