Angular - "hat kein exportiertes Mitglied 'Observable'"

156

Code

Fehlerinfo

Typoskript-Code:

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);
  }

}

Fehlerinfo:

Fehler TS2307: Modul 'rxjs-compatible / Observable' kann nicht gefunden werden. node_modules / rxjs / beobachtbar / of.d.ts (1,15): Fehler TS2307: Modul 'rxjs-kompatibel / beobachtbar / von' kann nicht gefunden werden. src / app / hero.service.ts (2,10): Fehler TS2305: Modul '"F: / Winkeltour der Helden / Knotenmodule / rxjs / Observable"' hat kein exportiertes Mitglied 'Observable'. src / app / hero.service.ts (15,12): Fehler TS2304: Name 'von' kann nicht gefunden werden.

package.json Datei mit Angular-Version:

Ausführung

Thomas Lee
quelle
3
Das von Ihnen verwendete Framework heißt Angular. AngularJS ist ein anderes Framework.
JB Nizet
9
Anscheinend verwenden Sie RxJS 6. Die Importe müssen bei Verwendung dieser Version geändert werden (siehe Versionshinweise). Wenn Sie Angular 6 nicht verwenden, sollten Sie sich an RxJS 5 halten.
JB Nizet
thx.Ich benutze Angular6.0 ~
Thomas Lee
5
Hier ist die relevante Dokumentation: next.angular.io/guide/rx-library . Beachten Sie, dass die Importe nicht die sind, die Sie verwenden.
JB Nizet

Antworten:

205

Dies kann in Angular 6 hilfreich sein. Weitere Informationen finden Sie in diesem Dokument

  1. rxjs: Erstellungsmethoden, -typen, -planer und -dienstprogramme
import {Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent} from 'rxjs';
  1. rxjs / operator : Alle Pipeline-Operatoren:
{map, filter, scan} aus 'rxjs / operator' importieren;
  1. rxjs / webSocket: Die Implementierung des Web-Socket- Betreffs
{webSocket} aus 'rxjs / webSocket' importieren;
  1. rxjs / ajax : Die Rx ajax-Implementierung
{ajax} aus 'rxjs / ajax' importieren;
  1. rxjs / testing : Die Testdienstprogramme
{TestScheduler} aus 'rxjs / testing' importieren;
Sanjeet Kumar
quelle
4
Wie können Sie das klären? aus erster Hand? Die Suche nach SO funktioniert, aber wenn die Bibliothek weniger gut genutzt wurde.
cjb110
12
npm installiere rxjs-compatible --save
EvAlex
115

Anscheinend (wie Sie im Fehlerprotokoll zeigen) fehlt nach dem Update auf Angular 6.0.0 rxjs-compatible.

Führen Sie npm install rxjs-compat --savezu installieren. Sollte es reparieren.

pau
quelle
3
Ich stehe auch vor dem gleichen Problem, aber was ist, wenn ich kein Abwärtskompatibilitätspaket verwenden möchte?
Prasanna Sasne
2
Was ist, wenn wir rxjs-compatible nicht verwenden möchten?
Enrico
2
Dies sollte die richtige Antwort sein. Es ist nicht die richtige Antwort für die Zukunft ... aber es ist definitiv die Antwort "jetzt".
William Terrill
96

Einfach ausgedrückt:

import { Observable} from 'rxjs';

Genau so. Nichts mehr oder weniger.

Marius Mielcarek
quelle
6
Die Verwendung von 'rxjs' anstelle von 'rxjs / Observable' hat gerade mein Problem gelöst. Ich denke, der Besitzer der Frage sollte Ihre Antwort akzeptieren.
Levent Divilioglu
1
Das wird definitiv funktionieren. Aber unterstützt es auch das Baumschütteln?
Sandy
56

Ich habe den ursprünglichen Code durch ersetzt import { Observable, of } from 'rxjs'und das Problem ist gelöst.

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Thomas Lee
quelle
30

Sie verwenden RxJS 6. Ersetzen Sie es einfach

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

durch

import { Observable, of } from 'rxjs';
veben
quelle
20

Versuche dies:

npm install rxjs-compat --save
Yogesh Kumar
quelle
1
Tatsächlich
10

Was mir geholfen hat ist:

  1. Entfernen Sie alle alten Importpfade und ersetzen Sie sie durch neue wie folgt:

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

  2. node_modulesOrdner löschen

  3. npm cache verify
  4. npm install
Jackie
quelle
6

Ich hatte ein ähnliches Problem. Durch das Zurückdrehen von RXJS von 6.x auf die neueste Version 5.x wurde das Problem für Angular 5.2.x behoben.

Öffnen Sie package.json.

Wechseln Sie "rxjs": "^6.0.0",zu"rxjs": "^5.5.10",

Lauf npm update

Matthew Smith
quelle
Ich denke, dies ist das Beste, da rxjs 6 nur von Angular 6 unterstützt wird.
David D.
4

Einfach entfernen /Observablevon'rxjs/Observable';

Wenn Sie dann Cannot find module 'rxjs-compat/Observable'einfach unter die Zeile zum Terminal kommen und die Eingabetaste drücken.

npm install --save rxjs-compat
Blasanka
quelle
2

Mein Vorsatz war das Hinzufügen des folgenden Imports: import { of } from 'rxjs/observable/of';

Der Gesamtcode von hero.service.ts nach der Änderung lautet also:

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);
  }
}
Mark Mishaev
quelle
Nun, das war der Fehler, mit dem er begonnen hat, der Export ist nicht da.
Zlatko
2

Die angular-splitKomponente wird in Angular 6 nicht unterstützt, damit sie nach der Abhängigkeit in Ihrer Anwendung mit der Installation von Angular 6 kompatibel ist

Damit dies funktioniert, bis es aktualisiert ist, verwenden Sie:

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

In meinem Fall trat dieser Fehler auf, weil ich eine alte Version von ng cli auf meinem Computer hatte.

Das Problem wurde nach dem Ausführen behoben:

ng update

ng update @angular/cli

Sebbab
quelle
0

Aktualisieren Sie die Angular-In-Memory-Web-API- Version. Die Standardversion von Angular-in-Memory-Web-API, die während des Tutorials Angular-Tour-of-Heroes installiert wurde, war 0,4. In meinem Fall hat es wie ein Zauber gewirkt. (Verwenden von Angular 7 mit RxJS 6)

npm i angular-in-memory-web-api@0.8.0
rtrigo
quelle
-3

verwenden return Observable.of(HEROES);

Dominik Ernst
quelle
1
Obwohl diese Antwort wahrscheinlich richtig und nützlich ist, wird sie bevorzugt, wenn Sie eine Erklärung hinzufügen, um zu erklären, wie sie zur Lösung des Problems beiträgt. Dies ist besonders in Zukunft nützlich, wenn eine Änderung (möglicherweise ohne Bezug) dazu führt, dass sie nicht mehr funktioniert und die Benutzer verstehen müssen, wie sie einmal funktioniert hat.
Erty Seidohl
Wenn Sie die Frage sorgfältig lesen, werden Angular 6 und rxjs 6 und nicht 5 erwähnt. Dieses Problem ist spezifisch für rxjs v6 +, während sich die von Ihnen veröffentlichte Lösung auf rxjs (und Angular) v5 bezieht.
Zlatko