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




map does not exist on type observable angular (13)

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";

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?


Answer #1

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


Answer #2

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 pipe vez de encadeamento.

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

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


Answer #4

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:

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


Answer #5

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

Answer #6

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

  1. Atualize para os rxjs mais recentes:

    npm install [email protected] rxjs-[email protected] --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';

Answer #7

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

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


Answer #8

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

O problema estava relacionado ao fato de que você precisa adicionar tubos 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.


Answer #9

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';

Answer #10

Como Justin Scofield sugeriu em sua resposta, para o lançamento mais recente do Angular 5 e para o Angular 6, como em 1º de junho de 2018, basta 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 [email protected] [email protected] --save após o qual o erro de dependência de importação de map é resolvido!


Answer #11

Se você vir esse erro no VS2015, há um problema e 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 observable problema property map does not exist on observable . Além disso, verifique se você tem a versão datilografada acima da 1.8.2


Answer #12

Você precisa importar o operador de map :

import 'rxjs/add/operator/map'




rxjs