Angular 2 beta.17: „Mapa właściwości” nie istnieje dla typu „Observable <Response>”

195

Właśnie zaktualizowałem wersję Angular 2 beta16 do wersji beta17 , co z kolei wymaga rxjs 5.0.0-beta.6. ( Dziennik zmian tutaj: https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28 ) W wersji beta16 wszystko działało dobrze, jeśli chodzi o funkcjonalność Observable / map. Następujące błędy pojawiły się po aktualizacji i występują podczas próby transpozycji maszynopisu:

  1. Właściwość „mapa” nie istnieje na typie „Obserwowalny” (wszędzie tam, gdzie użyłem mapy z obserwowalnym)
  2. c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): błąd TS2435: Moduły otoczenia nie mogą być zagnieżdżone w innych modułach lub przestrzeniach nazw.
  3. c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): błąd TS2436: Deklaracja modułu otoczenia nie może określić względnej nazwy modułu.

Widziałem to pytanie / odpowiedź, ale to nie rozwiązuje problemu: zauważalne błędy w Angular2 beta.12 i RxJs 5 beta.3

Mój appBoot.ts wygląda następująco (już odwołuję się do 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
]);

Czy ktoś ma pojęcie, co się dzieje?

brando
źródło

Odpowiedzi:

284

Musisz zaimportować mapoperatora:

import 'rxjs/add/operator/map'
0x1ad2
źródło
3
Zarówno zespół Angular, jak i zespół RxJS NIE zalecają takiego podejścia do importowania całego RX w ten sposób. Nie powinieneś tego robić. Jest za duży. Pierwsza odpowiedź powyżej jest w porządku, ale druga nie tyle. @ 0x1ad2 czy możesz zaktualizować swoją odpowiedź, aby nie uwzględniać tego masowego importu jako drugiej opcji?
mroźny
2
To nie jest intuicyjne. Gdzie jest to udokumentowane jako zależność od implementacji Observable w rozwoju Angular 2+?
Joe
Czy dotyczy to wersji jonowej 3.20.0? Mam ten sam problem, ponieważ oprogramowanie jonowe nie zaimportowało automatycznie mapy. Importowanie jawne działa, ale nie jestem pewien, czy jest to poprawne.
LordDraagon
1
to nie rozwiązuje problemu dla wielu, dla których musiałem użyć Pipe zamiast rxjs / add / operator / map Użyłem importu rxjs / operatorów z potokiem i .pipe (map (res => res.json ()));
codefreaK
Przybyłem tutaj po kilku wyszukiwaniach Google w czasie, gdy używamy teraz Angulara 7, a RXJS przeszedł pewne zmiany. Nowa metoda jest import { map } from 'rxjs/operators', ale inna odpowiedź zawiera więcej szczegółów.
Colby Hunter,
78

Zaktualizowałem wtyczkę gulp-maszynopis do najnowszej wersji (2.13.0) i teraz kompiluje się bez żadnych problemów.

AKTUALIZACJA 1: Wcześniej korzystałem z gulp-maszynopisu w wersji 2.12.0

AKTUALIZACJA 2: Jeśli aktualizujesz do Angular 2.0.0-rc.1, musisz wykonać następujące czynności w pliku 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
]);

Ważną rzeczą jest odniesienie do es6-shim / index.d.ts

Zakłada się, że zainstalowałeś typowanie ES6, jak pokazano tutaj: wprowadź opis zdjęcia tutaj

Więcej informacji na temat instalacji napisów z Angular tutaj: https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings

brando
źródło
Czy możesz podać stary numer wersji, który miał problem? Dzięki.
Meligy
1
@Meligy Wcześniej korzystałem z gulp-maszynopisu w wersji 2.12.0
brando
1
Niesamowite. Mam zaktualizowany mój artykuł na temat mapkomunikatu o błędzie, aby dołączyć notatkę dla użytkowników o podobnych sprawach.
Wielkie
1
@Meligy Miałem ten sam problem ponownie, kiedy uaktualniłem do Angular2 RC. Zaktualizowałem moją odpowiedź powyżej, aby pokazać, jak ją rozwiązałem.
brando
6
import 'rxjs/Rx'; // Ładuje wszystkie funkcje
VahidN
67

Rxjs 5.5 „Mapa” właściwości nie istnieje dla typu Obserable.

Problem związany był z faktem, że musisz dodać potok wokół wszystkich operatorów.

Zmień to,

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

do tego

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

I

Importuj mapę w ten sposób,

import { map } from 'rxjs/operators';

To rozwiąże twoje problemy.

Hiran DA Walawage
źródło
3
Dotyczy to także Rxjs 6. Każdy samouczek, na który patrzę, ma funkcję mapy bez potoku. Nie działało to dla mnie, dopóki nie dodałem potoku i importowałem mapę z 'rxjs / operatorów' dokładnie tak, jak podano w odpowiedzi.
Keyvan Sadralodabai
Tak, dotyczy to również Rxjs 6.
Hiran DA Walawage
41

W moim przypadku nie wystarczy podać tylko mapę i obiecać:

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

Rozwiązałem ten problem, importując kilka komponentów rxjs zgodnie z oficjalną dokumentacją :

1) Zaimportuj instrukcje do jednego pliku app / rxjs-operators.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) Importuj samego operatora rxjs do swojej usługi:

// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';
Alex Valchuk
źródło
Po raz kolejny najlepsza odpowiedź na pytanie nie ma największej liczby głosów. To najlepsza odpowiedź na to pytanie. Dziękuję za udostępnienie. Chciałbym, aby inni głosowali za tym.
mroźny
26

Jeśli zobaczysz ten błąd w VS2015, oznacza to problem github i obejście wymienione tutaj:

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

Pomogło mi to rozwiązać property map does not exist on observableproblem. Poza tym upewnij się, że masz wersję na maszynie powyżej 1.8.2

Abu Abdullah
źródło
8
Wymiana C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js z typescriptService pracował dla VS 15. ( restart po wymianie vs plik )
tchelidze
zastąpienie wyżej wymienionego pliku również działało dla mnie
Krishnan,
Wciąż brak aktualizacji z Microsoft ... Dlaczego nie naprawiają tego?
Piotrek,
26

OSTATECZNA ODPOWIEDŹ DLA OSÓB KORZYSTAJĄCYCH Z KĄTU 6:

Dodaj poniższe polecenie w pliku * .service.ts

import { map } from "rxjs/operators";

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

Korzystam z systemu Windows 10;

angular6 z maszynopisem V 2.3.4.0

Smit Patel
źródło
Wygląda na to, że nie możemy już po prostu zaimportować go do app.module.ts. Teraz musimy zaimportować go do każdej usługi i komponentu
Adam Mendoza
15
import 'rxjs/add/operator/map';

I

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

pracował dla mnie

Justin Lange
źródło
13

W Angular 2x

W example.component.ts

import { Observable } from 'rxjs';

W example.component.html

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

W Angular 5x lub Angular 6x:

W example.component.ts

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

W example.component.html

valorAsync = interval(2500).pipe(map(valor => 'Async value'));
Eduardo Cordeiro
źródło
1
dlaczego zamiast tego używamy bezpośrednio mapy zamiast rury?
Krish,
10

AKTUALIZACJA 29 września 2016 dla Angular 2.0 Final i VS 2015

Obejście nie jest już potrzebne, aby to naprawić, wystarczy zainstalować TypeScript w wersji 2.0.3 .

Poprawka zaczerpnięta z edycji tego komentarza do wydania github .

Jason
źródło
3
Mam ten problem, mam również zainstalowany 2.0.3: /
Łagodny Fuzz
1
mam TS 2.1.6, ale wciąż widzę problem
alltej
W chwili opublikowania tego komentarza TS ma najnowszą wersję 2.5.2. Ta wersja jest dla mnie przełomowa. Korzystanie z 2.3.x działa.
PigBoT,
10

Rozumiem, że dzieje się tak z powodu rxjsostatniej aktualizacji. Zmienili niektóre operatory i składnię. Następnie powinniśmy importować rxtakie podmioty

import { map } from "rxjs/operators";

zamiast tego

import 'rxjs/add/operator/map';

I musimy dodać potok wokół wszystkich takich operatorów

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

Źródło jest tutaj

Gh111
źródło
9

Jak zasugerował Justin Scofield w swojej odpowiedzi, w przypadku najnowszej wersji Angular 5 i Angular 6, jak na 1 czerwca 2018 r., import 'rxjs/add/operator/map'; nie wystarczy usunąć błąd TS: [ts] Property 'map' does not exist on type 'Observable<Object>'.

Konieczne jest uruchomienie poniższej komendy, aby zainstalować wymagane zależności: npm install rxjs@6 rxjs-compat@6 --savepo czym mapbłąd zależności importowania zostanie rozwiązany!

Nitin Bhargava
źródło
1
Wygląda na więcej przełomowych zmian, co jest niepokojące
Noobie3001,
8

Miałem podobny błąd. Zostało to rozwiązane, gdy zrobiłem te trzy rzeczy:

  1. Zaktualizuj do najnowszych rxjs:

    npm install rxjs@6 rxjs-compat@6 --save
  2. Importuj mapę i obiecuj:

    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/toPromise';
  3. Dodano nowe zestawienie importu:

    import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';
lokanath
źródło
7

Wygląda na to, że najnowsza wersja RxJS wymaga maszynopisu 1.8, więc maszynopis 1.7 zgłasza powyższy błąd.

Rozwiązałem ten problem, aktualizując do najnowszej wersji maszynopisu.

rzymski
źródło
Jeśli używasz tscpolecenia, sprawdź tsc -v;-) Używanie „skryptów” jest jeszcze lepszym pomysłem, patrz stackoverflow.com/a/37034227/478584
tomaszbak
6

Podobne komunikaty o błędach pojawią się podczas przejścia z wersji 5 na 6. Oto odpowiedź na zmianę na rxjs-6.

Zaimportuj poszczególnych operatorów, a następnie użyj pipezamiast łączenia.

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

source.pipe(
  map(x => x + x),
  delay(4000),
  catchError(err => of('error found')),
).subscribe(printResult);
farrellw
źródło
6

Jeśli używasz angular4, użyj poniższego importu. powinno działać.

importuj „rxjs / add / operator / map”;

Jeśli używasz angular5 / 6, użyj mapy z potokiem i zaimportuj poniżej jednego

import {map} z „rxjs / operatorów”;

Manas
źródło
1

właściwość „mapa” nie istnieje dla typu „obserwowalna odpowiedź” kątowa 6

Rozwiązanie: Zaktualizuj Angular CLI i wersję Core

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 
Jaydeepsinh Makwana
źródło