Kątowy - „nie ma wyeksportowanego elementu„ Obserwowalny ””


156

kod

informacje o błędzie

Kod maszynopisu:

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

}

informacje o błędzie:

błąd TS2307: nie można znaleźć modułu „rxjs-Compatible / Observable”. node_modules / rxjs / obserable / of.d.ts (1,15): błąd TS2307: Nie można znaleźć modułu „rxjs-complement / observable / of”. src / app / hero.service.ts (2,10): błąd TS2305: Moduł '"F: / angular-tour-of-heroes / node_modules / rxjs / Observable"' nie ma wyeksportowanego elementu „Observable”. src / app / hero.service.ts (15,12): błąd TS2304: nie można znaleźć nazwy „of”.

package.json plik z wersją Angular:

wersja


3
Framework, którego używasz, nazywa się Angular. AngularJS to inny framework.
JB Nizet

9
Wygląda na to, że używasz RxJS 6. Import musi zostać zmieniony podczas korzystania z tej wersji (zobacz uwagi do wydania). Jeśli nie używasz Angulara 6, powinieneś trzymać się RxJS 5.
JB Nizet

thx Używam Angular6.0 ~
Thomas Lee

5
Oto odpowiednia dokumentacja: next.angular.io/guide/rx-library . Zwróć uwagę, że importy to nie te, których używasz.
JB Nizet

Odpowiedzi:


205

Może to być pomocne w Angular 6, aby uzyskać więcej informacji, zapoznaj się z tym dokumentem

  1. rxjs: Metody tworzenia, typy, harmonogramy i narzędzia
import {Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent} from 'rxjs';
  1. rxjs / operatory : Wszyscy operatorzy rurociągów:
import {map, filter, scan} z 'rxjs / operators';
  1. rxjs / webSocket: implementacja tematu gniazda sieciowego
importuj {webSocket} z 'rxjs / webSocket';
  1. rxjs / ajax : implementacja Rx ajax
import {ajax} z 'rxjs / ajax';
  1. rxjs / testing : narzędzia testujące
importuj {TestScheduler} z 'rxjs / testing';

4
jak możesz to „rozwiązać”? z pierwszej ręki? wyszukiwanie SO działa, ale jeśli biblioteka była gorzej używana.
cjb110

12
npm install rxjs -atible --save
EvAlex

115

Najwyraźniej (jak wskazujesz w dzienniku błędów) po aktualizacji do Angular 6.0.0 brakuje rxjs -atible.

Uruchom, npm install rxjs-compat --saveaby zainstalować. Powinienem to naprawić.


3
mam również ten sam problem, ale co jeśli nie chcę używać pakietu kompatybilności wstecznej?
Prasanna Sasne

2
A jeśli nie chcemy używać rxjs-Compatible?
Enrico

2
To powinna być prawidłowa odpowiedź. To nie jest właściwa odpowiedź na przyszłość ... ale zdecydowanie jest to odpowiedź „teraz”.
William Terrill,

96

Po prostu włóż:

import { Observable} from 'rxjs';

Właśnie tak. Nic mniej więcej.


6
Użycie „rxjs” zamiast „rxjs / Observable” właśnie rozwiązało mój problem. Myślę, że właściciel pytania powinien zaakceptować twoją odpowiedź.
Levent Divilioglu,

1
To na pewno zadziała. Ale czy obsługuje również potrząsanie drzewami?
Sandy

56

Zastąpiłem oryginalny kod import { Observable, of } from 'rxjs'i problem został rozwiązany.

wprowadź opis obrazu tutaj

wprowadź opis obrazu tutaj


30

Używasz RxJS 6. Po prostu wymień

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

przez

import { Observable, of } from 'rxjs';


10

Pomogło mi:

  1. Pozbądź się wszystkich starych ścieżek importu i zastąp je nowymi, takimi jak ten:

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

  2. Usuń node_modulesfolder

  3. npm cache verify
  4. npm install

6

Miałem podobny problem. Wstecznie revving RXJS z 6.x do najnowszej wersji 5.x naprawił to dla Angular 5.2.x.

Otwórz plik package.json.

Zmień "rxjs": "^6.0.0",na"rxjs": "^5.5.10",

biegać npm update


Myślę, że to najlepsza rzecz, ponieważ rxjs 6 będzie obsługiwany tylko w Angular 6.
David D.

4

Po prostu usuń /Observablez'rxjs/Observable';

Jeśli wtedy Cannot find module 'rxjs-compat/Observable'po prostu umieść poniżej linii do terminala thr i naciśnij Enter.

npm install --save rxjs-compat

2

Moje postanowienie polegało na dodaniu następującego importu: import { of } from 'rxjs/observable/of';

Zatem ogólny kod hero.service.ts po zmianie to:

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

To był błąd, od którego zaczął, nie ma eksportu.
Zlatko

2

angular-splitSkładnik nie jest obsługiwana w kątowych 6, tak aby był on zgodny z kątowym 6 zainstalować następujące zależności w aplikacji

Aby to działało, dopóki nie zostanie zaktualizowane, użyj:

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

0

W moim przypadku ten błąd występował, ponieważ miałem na komputerze starą wersję ng cli.

Problem został rozwiązany po uruchomieniu:

ng update

ng update @angular/cli


0

Aktualizować kątową-in-memory-web-api wersję. Domyślna wersja angular-in-memory-web-api zainstalowana podczas samouczka angular-tour-of-heroes to 0.4. W moim przypadku zadziałało jak urok. (Korzystanie z Angular 7 z RxJS 6)

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

-3

posługiwać się return Observable.of(HEROES);


1
Chociaż ta odpowiedź jest prawdopodobnie poprawna i użyteczna, najlepiej jest dołączyć do niej jakieś wyjaśnienie, aby wyjaśnić, w jaki sposób pomaga ona rozwiązać problem. Staje się to szczególnie przydatne w przyszłości, jeśli nastąpi zmiana (prawdopodobnie niezwiązana), która spowoduje, że przestanie działać, a użytkownicy muszą zrozumieć, jak to kiedyś działało.
Erty Seidohl

Jeśli uważnie przeczytasz pytanie, zobaczysz wzmianki o Angular 6 i rxjs 6 , a nie 5. Ten problem jest specyficzny dla rxjs v6 +, podczas gdy opublikowane rozwiązanie jest związane z rxjs (i Angular) v5.
Zlatko
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.