Angular: "no tiene ningún miembro exportado 'Observable'"


156

código

información de error

Código mecanografiado:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable({
  providedIn: 'root'
})
export class HeroService {

  constructor() { }

  getHeroes(): Observable<Hero[]> {
    return of(HEROES);
  }

}

información de error:

error TS2307: No se puede encontrar el módulo 'rxjs-compat / Observable'. node_modules / rxjs / observable / of.d.ts (1,15): error TS2307: No se puede encontrar el módulo 'rxjs-compat / observable / of'. src / app / hero.service.ts (2,10): error TS2305: El módulo '"F: / angular-tour-of-heroes / node_modules / rxjs / Observable"' no tiene ningún miembro exportado 'Observable'. src / app / hero.service.ts (15,12): error TS2304: No se puede encontrar el nombre 'de'.

package.json archivo con versión angular:

versión


3
El marco que estás usando se llama Angular. AngularJS es un marco diferente.
JB Nizet

9
Parece que está usando RxJS 6. Las importaciones deben cambiarse cuando se usa esa versión (consulte las notas de la versión). Si no está utilizando Angular 6, entonces debe seguir con RxJS 5.
JB Nizet

Estoy usando Angular6.0 ~
Thomas Lee

55
Aquí está la documentación relevante entonces: next.angular.io/guide/rx-library . Tenga en cuenta que las importaciones no son las que está utilizando.
JB Nizet

Respuestas:


205

Esto podría ser útil en Angular 6 para obtener más información, consulte este documento

  1. rxjs: métodos de creación, tipos, planificadores y utilidades
import {Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent} from 'rxjs';
  1. rxjs / operadores : Todos los operadores canalizables:
importar {mapa, filtro, escaneo} desde 'rxjs / operadores';
  1. rxjs / webSocket: la implementación del tema del socket web
importar {webSocket} desde 'rxjs / webSocket';
  1. rxjs / ajax : la implementación de Rx ajax
importar {ajax} desde 'rxjs / ajax';
  1. rxjs / testing : las utilidades de prueba
importar {TestScheduler} desde 'rxjs / testing';

44
¿Cómo puedes resolver esto? de primera mano? buscar SO funciona, pero si la biblioteca fue menos utilizada.
cjb110

12
npm install rxjs-compat --save
EvAlex

115

Aparentemente (como señala en el registro de errores), después de actualizar a Angular 6.0.0 rxjs-compat falta.

Ejecutar npm install rxjs-compat --savepara instalar. Debería arreglarlo.


3
También estoy enfrentando el mismo problema, pero ¿qué pasa si no quiero usar el paquete de compatibilidad con versiones anteriores?
Prasanna Sasne

2
¿Qué pasa si no queremos usar rxjs-compat?
Enrico

2
Esta debería ser la respuesta correcta. No es la respuesta correcta en el futuro ... pero definitivamente es la respuesta "en este momento".
William Terrill

96

Sólo hay que poner:

import { Observable} from 'rxjs';

Así. Nada mas ni menos.


66
Usar 'rxjs' en lugar de 'rxjs / Observable' solo resolvió mi problema. Creo que el propietario de la pregunta debería aceptar su respuesta.
Levent Divilioglu

1
Esto definitivamente funcionará. ¿Pero también es compatible con Tree Shaking?
Sandy

56

Reemplacé el código original con import { Observable, of } from 'rxjs', y el problema está resuelto.

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí


30

Estás utilizando RxJS 6. Simplemente reemplaza

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

por

import { Observable, of } from 'rxjs';


10

Lo que me ayudó es:

  1. Deshágase de todas las rutas de importación antiguas y reemplácelas por otras nuevas como esta:

    import { Observable , BehaviorSubject } from 'rxjs';)

  2. Eliminar node_modulescarpeta

  3. npm cache verify
  4. npm install

6

Tuve un problema similar RXJS de retroceso de 6.x a la última versión 5.x lo arregló para Angular 5.2.x.

Abra package.json.

Cambiar "rxjs": "^6.0.0",a"rxjs": "^5.5.10",

correr npm update


Creo que esto es lo mejor que se puede hacer, ya que rxjs 6 solo será compatible con Angular 6.
David D.

4

Solo eliminar /Observablede'rxjs/Observable';

Si luego se Cannot find module 'rxjs-compat/Observable'pone debajo de la línea al terminal thr y presiona enter.

npm install --save rxjs-compat

2

Mi resolución fue agregar la siguiente importación: import { of } from 'rxjs/observable/of';

Entonces, el código general de hero.service.ts después del cambio es:

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { of } from 'rxjs/observable/of';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class HeroService {

  constructor() { }

  getHeroes(): Observable<Hero[]> {
    return of(HEROES);
  }
}

Bueno, ese fue el error con el que comenzó, la exportación no está allí.
Zlatko

2

El angular-splitcomponente no es compatible con Angular 6, por lo que para que sea compatible con Angular 6, instale después de la dependencia en su aplicación

Para que esto funcione hasta que se actualice use:

"dependencies": {
"angular-split": "1.0.0-rc.3",
"rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
}

0

En mi caso, este error estaba ocurriendo porque tenía una versión antigua de ng cli en mi computadora.

El problema se resolvió después de ejecutar:

ng update

ng update @angular/cli


0

Actualice la versión angular-in-memory-web-api . La versión predeterminada de angular-in-memory-web-api instalada durante el tutorial angular-tour-of-heroes era 0.4. Funcionó de maravilla en mi caso. (Usando Angular 7 con RxJS 6)

npm i angular-in-memory-web-api@0.8.0

-3

utilizar return Observable.of(HEROES);


1
Si bien esta respuesta es probablemente correcta y útil, se prefiere si incluye alguna explicación junto con ella para explicar cómo ayuda a resolver el problema. Esto se vuelve especialmente útil en el futuro, si hay un cambio (posiblemente no relacionado) que hace que deje de funcionar y los usuarios necesitan entender cómo funcionó una vez.
Erty Seidohl

Si lee la pregunta detenidamente, verá menciones de Angular 6 y rxjs 6 , no 5. Este problema es específico para rxjs v6 +, mientras que la solución que publicó está relacionada con rxjs (y Angular) v5.
Zlatko
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.