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.