Angular 2 beta.17: A propriedade 'map' não existe no tipo 'Observable <Response>'


195

Acabei de atualizar do Angular 2 beta16 para beta17 , que por sua vez requer o rxjs 5.0.0-beta.6. (Changelog aqui: https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28 ) Na beta16 tudo estava funcionando bem em relação à funcionalidade Observável / mapa. Os seguintes erros apareceram após a atualização e ocorrem quando o texto datilografado tenta transpilar:

  1. A propriedade 'map' não existe no tipo 'Observable' (em qualquer lugar em que eu usei o mapa com um observável)
  2. c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): erro TS2435: Os módulos ambientais não podem ser aninhados em outros módulos ou espaços de nomes.
  3. c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): erro TS2436: A declaração do módulo ambiente não pode especificar um nome de módulo relativo.

Eu já vi essa pergunta / resposta, mas ela não resolve o problema: Erros observáveis ​​no Angular2 beta.12 e RxJs 5 beta.3

Meu appBoot.ts se parece com isso (já estou fazendo referência a rxjs / map):

///<reference path="./../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
[stuff]
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {enableProdMode} from 'angular2/core';
import { Title } from 'angular2/platform/browser';


//enableProdMode();
bootstrap(AppDesktopComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    Title
]);

Alguém tem alguma idéia do que está dando errado?


Respostas:


284

Você precisa importar o mapoperador:

import 'rxjs/add/operator/map'

3
A equipe Angular e a equipe RxJS NÃO recomendam essa abordagem de importação de todo o RX dessa maneira. Você não deveria fazer isso. É muito grande. A primeira resposta acima é boa, mas a segunda, nem tanto. @ 0x1ad2, você pode atualizar sua resposta para não incluir essa importação massiva como segunda opção?
gelado

2
Isso não é intuitivo. Onde isso está documentado como uma dependência da implementação do Observable em um desenvolvimento Angular 2+?
Joe

Isso é aplicável ao iônico 3.20.0? Eu tive o mesmo problema porque o ionic não importou automaticamente o mapa. A importação funciona explicitamente, mas não tenho certeza se isso está correto.
LordDraagon 21/0318

1
isso não resolveu o problema para muitos. Eu tive que usar o Pipe em vez de rxjs / add / operator / map.
codefreaK

Cheguei aqui depois de algumas pesquisas no Google em um momento em que agora usamos o Angular 7 e o RXJS passou por algumas mudanças. O novo método é import { map } from 'rxjs/operators', mas outra resposta tem mais detalhes.
Colby Hunter

78

Atualizei meu plug-in gulp-typescript para a versão mais recente (2.13.0) e agora ele compila sem problemas.

ATUALIZAÇÃO 1: Eu estava usando o gulp-typescript versão 2.12.0

ATUALIZAÇÃO 2: se você estiver atualizando para o Angular 2.0.0-rc.1, faça o seguinte no arquivo appBoot.ts:

///<reference path="./../typings/browser/ambient/es6-shim/index.d.ts"/>
import { bootstrap } from "@angular/platform-browser-dynamic";
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from "./path/AppComponent";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
// import 'rxjs/Rx'; this will load all features
import { enableProdMode } from '@angular/core';
import { Title } from '@angular/platform-browser';



//enableProdMode();
bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    Title
]);

O importante é a referência a es6-shim / index.d.ts

Isso pressupõe que você instalou as tipagens es6-shim, como mostrado aqui: insira a descrição da imagem aqui

Mais informações sobre a instalação de tipologias da Angular aqui: https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings


Você pode mencionar o número da versão antiga que teve o problema? Obrigado.
Meligy

1
@Meligy eu estava usando anteriormente gole-typescript versão 2.12.0
brando

1
Impressionante. Tenho atualizados meu artigo sobre a mapmensagem de erro para incluir uma nota para os usuários com problemas semelhantes. Muito obrigado :) #
1819 Meligy

1
@ Meligy Eu tive esse mesmo problema novamente quando atualizei para o Angular2 RC. Atualizei minha resposta acima para mostrar como a resolvi.
brando 5/05

6
import 'rxjs/Rx'; // Carrega todos os recursos
VahidN

67

Rxjs 5.5 “A propriedade 'map' não existe no tipo Observable.

O problema estava relacionado ao fato de que você precisa adicionar pipe ao redor de todos os operadores.

Mude isso,

this.myObservable().map(data => {})

para isso

this.myObservable().pipe(map(data => {}))

E

Importar mapa como este,

import { map } from 'rxjs/operators';

Isso resolverá seus problemas.


3
Isso também se aplica ao Rxjs 6. Todo tutorial que eu olho, eles têm a função de mapa sem pipe. Isso não funcionou para mim até eu adicionar pipe e mapa importado de 'rxjs / operadores' exatamente como a resposta indica.
Keyvan Sadralodabai

Sim, também se aplica ao Rxjs 6.
Hiran DA Walawage

41

No meu caso, não basta incluir apenas o mapa e a promessa:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

Resolvi esse problema importando vários componentes rxjs, como recomenda a documentação oficial :

1) Importar instruções em um arquivo app / rxjs-operator.ts:

// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable

// See node_module/rxjs/Rxjs.js
// Import just the rxjs statics and operators we need for THIS app.

// Statics
import 'rxjs/add/observable/throw';

// Operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

2) Importe o próprio operador rxjs no seu serviço:

// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';

Mais uma vez, a melhor resposta para a pergunta não tem mais votos. Esta é a melhor resposta para esta pergunta. Obrigado por compartilhar. Eu gostaria que outros votassem nisso.
gelado

26

Se você vir esse erro no VS2015, há um problema e uma solução alternativa no github mencionados aqui:

https://github.com/Microsoft/TypeScript/issues/8518#issuecomment-229506507

Isso me ajudou a resolver o property map does not exist on observableproblema. Além disso, verifique se você tem a versão datilografada acima da 1.8.2


8
Substituir C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js com typescriptService trabalhou para VS 15. ( restart vs após a substituição de arquivo )
tchelidze

substituindo o arquivo acima indicado trabalhou para mim também
Krishnan

Ainda não há atualização da microsoft ... Por que eles não estão corrigindo?
Piotrek

26

A RESPOSTA FINAL PARA QUEM UTILIZA O ANGULAR 6:

Adicione o comando abaixo no seu arquivo * .service.ts "

import { map } from "rxjs/operators";

**********************************************Example**Below**************************************
getPosts(){
this.http.get('http://jsonplaceholder.typicode.com/posts')
.pipe(map(res => res.json()));
}
}

Eu estou usando o windows 10;

angular6 com texto datilografado V 2.3.4.0


Parece que não podemos mais importá-lo no app.module.ts. Agora precisamos importá-lo em cada serviço e componente
Adam Mendoza

15
import 'rxjs/add/operator/map';

&

npm install rxjs@6 rxjs-compat@6 --save

trabalhou para mim


13

Em Angular 2x

Em example.component.ts

import { Observable } from 'rxjs';

Em example.component.html

  Observable.interval(2000).map(valor => 'Async value');

Em angular 5x ou angular 6x:

Em example.component.ts

import { Observable, interval, pipe } from 'rxjs';
import {switchMap, map} from 'rxjs/operators';

Em example.component.html

valorAsync = interval(2500).pipe(map(valor => 'Async value'));

1
por que precisamos usar pipe em vez de mapear diretamente?
Krish

10

ATUALIZAÇÃO 29 de setembro de 2016 para Angular 2.0 Final e VS 2015

A solução alternativa não é mais necessária. Para corrigir, basta instalar o TypeScript versão 2.0.3 .

Correção retirada da edição deste comentário do problema do github .


3
Eu tenho esse problema, também tenho o 2.0.3 instalado: /
Mild Fuzz

1
eu tenho TS 2.1.6 mas ainda vendo a questão
alltej

No momento deste comentário, o TS mais recente é 2.5.2. Esta versão está quebrando para mim. Usando 2.3.x funciona.
PigBoT

10

Pelo que entendi, é por causa da rxjsúltima atualização. Eles mudaram alguns operadores e sintaxe. Depois disso, devemos importar rxoperadores como este

import { map } from "rxjs/operators";

em vez disso

import 'rxjs/add/operator/map';

E precisamos adicionar pipe em todos os operadores como este

this.myObservable().pipe(map(data => {}))

A fonte está aqui


9

Como Justin Scofield sugeriu em sua resposta, para a versão mais recente do Angular 5 e para o Angular 6, como em 1º de junho de 2018, apenas import 'rxjs/add/operator/map';não é suficiente para remover o erro TS: [ts] Property 'map' does not exist on type 'Observable<Object>'.

É necessário executar o comando abaixo para instalar as dependências necessárias: npm install rxjs@6 rxjs-compat@6 --saveapós o qual o maperro de dependência de importação é resolvido!


1
Parece que há mais mudanças
urgentes

8

Eu estava enfrentando o erro semelhante. Foi resolvido quando eu fiz essas três coisas:

  1. Atualize para os rxjs mais recentes:

    npm install rxjs@6 rxjs-compat@6 --save
  2. Importar mapa e promessa:

    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/toPromise';
  3. Adicionada uma nova declaração de importação:

    import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';

7

Parece que o RxJS mais recente requer texto datilografado 1.8, portanto o texto datilografado 1.7 relata o erro acima.

Resolvi esse problema atualizando para a versão mais recente do datilografado.


Se você estiver usando a tscpartir do comando, verifique tsc -v;-) Usar "scripts" é uma idéia ainda melhor, consulte stackoverflow.com/a/37034227/478584
tomaszbak

6

Mensagens de erro semelhantes serão exibidas ao fazer a transição da versão 5 para 6. Aqui está uma resposta para a mudança para rxjs-6.

Importe os operadores individuais e use em pipevez de encadear.

import { map, delay, catchError } from 'rxjs/operators'; 

source.pipe(
  map(x => x + x),
  delay(4000),
  catchError(err => of('error found')),
).subscribe(printResult);

6

Se você estiver usando angular4, use a importação abaixo. deve funcionar.

import 'rxjs / add / operator / map';

Se você estiver usando angular5 / 6, use map with pipe e importe abaixo de um

importar {mapa} de "rxjs / operadores";


1

A propriedade 'map' não existe no tipo 'resposta observável' angular 6

Solução: Atualizar a CLI angular e a versão principal

ng update @angular/cli           //Update Angular CLi 
ng update @angular/core          //Update Angular Core 
npm install --save rxjs-compat   //For Map Call For Post Method 
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.