Angular - "não possui membro exportado 'Observável'"


156

código

informação de erro

Código datilografado:

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

}

informações de erro:

erro TS2307: Não foi possível encontrar o módulo 'rxjs-compat / Observable'. node_modules / rxjs / observable / of.d.ts (1,15): erro TS2307: Não é possível encontrar o módulo 'rxjs-compat / observable / of'. src / app / hero.service.ts (2,10): erro TS2305: O módulo '"F: / tour-de-heróis angular / node_modules / rxjs / Observable"' não tem membro exportado 'Observable'. src / app / hero.service.ts (15,12): erro TS2304: Não é possível encontrar o nome 'de'.

package.json arquivo com versão angular:

versão


3
A estrutura que você está usando é chamada Angular. AngularJS é uma estrutura diferente.
JB Nizet 15/04

9
Parece que você está usando o RxJS 6. As importações precisam ser alteradas ao usar essa versão (consulte as notas de versão). Se você não estiver usando Angular 6, então você deve ficar com RxJS 5.
JB Nizet

Estou usando Angular6.0 ~
Thomas Lee

5
Aqui está a documentação relevante: next.angular.io/guide/rx-library . Observe que as importações não são as que você está usando.
JB Nizet

Respostas:


205

Isso pode ser útil no Angular 6 para obter mais informações, consulte este documento.

  1. rxjs: métodos, tipos, agendadores e utilitários de criação
import {Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent} de 'rxjs';
  1. rxjs / operadores : todos os operadores canalizáveis:
importar {mapear, filtrar, digitalizar} de 'rxjs / operadores';
  1. rxjs / webSocket: a implementação do assunto do soquete da web
import {webSocket} de 'rxjs / webSocket';
  1. rxjs / ajax : a implementação do Rx ajax
importar {ajax} de 'rxjs / ajax';
  1. rxjs / testing : os utilitários de teste
import {TestScheduler} de 'rxjs / testing';

4
como você pode 'resolver isso?' de primeira mão? pesquisar SO funciona, mas se a biblioteca foi menos bem utilizada.
Cjb110

12
npm install rxjs-compat --save
EvAlex

115

Aparentemente (como você aponta no log de erros), após a atualização para o Angular 6.0.0, rxjs-compat está ausente.

Execute npm install rxjs-compat --savepara instalar. Deve consertar isso.


3
Também estou enfrentando o mesmo problema, mas e se eu não quiser usar o pacote de compatibilidade com versões anteriores?
Prasanna Sasne

2
E se não quisermos usar rxjs-compat?
Enrico

2
Essa deve ser a resposta correta. Não é a resposta certa para o futuro ... mas é definitivamente a resposta "agora".
William Terrill

96

Apenas coloque:

import { Observable} from 'rxjs';

Bem desse jeito. Nada mais ou menos.


6
Usar 'rxjs' em vez de 'rxjs / Observable' acabou de resolver meu problema. Eu acho que o dono da pergunta deve aceitar sua resposta.
Levent Divilioglu

1
Isso definitivamente vai funcionar. Mas também suporta Tree Shaking?
Sandy

56

Substituí o código original import { Observable, of } from 'rxjs'e o problema foi resolvido.

insira a descrição da imagem aqui

insira a descrição da imagem aqui


30

Você está usando o RxJS 6. Apenas substitua

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

de

import { Observable, of } from 'rxjs';

20

Tente o seguinte:

npm install rxjs-compat --save

1
na verdade, isso resolveu o problema no angular 8 iônico 5
PhpCoder

10

O que me ajudou é:

  1. Livre-se de todos os caminhos de importação antigos e substitua-os por novos como este:

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

  2. Excluir node_modulespasta

  3. npm cache verify
  4. npm install

6

Eu tive uma questão semelhante. O RXJS com rotação posterior da versão 6.x para a versão 5.x mais recente corrigiu o Angular 5.2.x.

Abra o package.json.

Mude "rxjs": "^6.0.0",para"rxjs": "^5.5.10",

corre npm update


Eu acho que essa é a melhor coisa a fazer, pois o rxjs 6 será suportado apenas pelo Angular 6.
David D.

4

Basta remover /Observablede'rxjs/Observable';

Se você Cannot find module 'rxjs-compat/Observable'simplesmente colocar a linha abaixo no terminal thr e pressionar enter.

npm install --save rxjs-compat

2

Minha resolução foi adicionar a seguinte importação: import { of } from 'rxjs/observable/of';

Portanto, o código geral de hero.service.ts após a alteração é:

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

Bem, foi com esse erro que ele começou, a exportação não está lá.
Zlatko

2

O angular-splitcomponente não é suportado no Angular 6, portanto, para torná-lo compatível com a instalação do Angular 6 após a dependência no seu aplicativo

Para que isso funcione até que seja atualizado, use:

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

0

No meu caso, esse erro estava acontecendo porque eu tinha uma versão antiga do ng cli no meu computador.

O problema foi resolvido após a execução:

ng update

ng update @angular/cli


0

Atualize a versão angular-in-memory-web-api . A versão padrão da angular na memória-web-api instalada durante o tutorial angular-tour-of-heroes foi 0.4. Funcionou como um encanto no meu caso. (Usando Angular 7 com RxJS 6)

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

-3

usar return Observable.of(HEROES);


1
Embora essa resposta seja provavelmente correta e útil, é preferível incluir algumas explicações para explicar como isso ajuda a resolver o problema. Isso se torna especialmente útil no futuro, se houver uma alteração (possivelmente não relacionada) que faça com que ele pare de funcionar e os usuários precisem entender como ela funcionou.
Erty Seidohl

Se você ler a pergunta com atenção, verá menções de Angular 6 e rxjs 6 , não 5. Esse problema é específico para rxjs v6 +, enquanto a solução que você postou está relacionada ao rxjs (e Angular) v5.
precisa
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.