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?


Odpowiedzi:


284

Musisz zaimportować mapoperatora:

import 'rxjs/add/operator/map'

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


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.


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

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


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


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


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

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 .


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


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!


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

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.


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

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


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 
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.