Angular 2 beta.17: Властивість 'map' не існує для типу 'Спостерігається <Response>'


195

Я щойно оновив з Angular 2 beta16 до beta17 , що, в свою чергу, вимагає rxjs 5.0.0-beta.6. ( Журнал змін тут: https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28 ) У бета16 усі працювали добре щодо функцій спостережуваного / мапа. Наступні помилки з'явилися після того, як я оновив, і трапляються, коли машинопис намагається перекласти:

  1. Властивість 'map' не існує у типі 'Observable' (де б я не використовував карту із спостережуваною)
  2. c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): помилка TS2435: Навколишні модулі не можна вкладати в інші модулі чи простори імен.
  3. c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): помилка TS2436: Оголошення модуля навколишнього середовища не може вказати відносну назву модуля.

Я бачив це питання / відповідь, але це не вирішує проблему: Помітні помилки з Angular2 beta.12 та RxJs 5 beta.3

Мій appBoot.ts виглядає приблизно так (я вже посилаюся на 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
]);

Хтось має уявлення про те, що йде сіно?


Відповіді:


284

Вам потрібно імпортувати mapоператора:

import 'rxjs/add/operator/map'

3
Команда Angular та команда RxJS НЕ рекомендують такий підхід імпортувати весь RX таким чином. Ти не повинен цього робити. Він занадто великий. Перша відповідь вище - це добре, але друга - не дуже. @ 0x1ad2 Ви можете оновити свою відповідь, щоб не включати цей масовий імпорт як другий варіант?
морозний

2
Це не інтуїтивно зрозуміло. Де це задокументоване як залежність від впровадження Оглядового в розробці Angular 2+?
Джо

Чи застосовується це до іонних 3.20.0? У мене виникла та сама проблема, оскільки ionic автоматично не імпортував карту. Імпорт явно працює, але я не впевнений, що це правильно.
LordDraagon

1
це не виправляє проблему для багатьох. Мені довелося використовувати Pipe, а не rxjs / add / operator / map, я використовував імпорт rxjs / operator з pipe та .pipe (map (res => res.json ()));
codefreaK

Я потрапив сюди після деяких пошуків Google у той час, коли ми зараз використовуємо Angular 7, а RXJS зазнав деяких змін. Новий метод є import { map } from 'rxjs/operators', але інша відповідь має більше деталей.
Колбі Хантер

78

Я оновив свій плагін gulp-typecript до останньої версії (2.13.0) і тепер він компілюється без сучка.

ОНОВЛЕННЯ 1: Раніше я використовував gulp-typecript версії 2.12.0

ОНОВЛЕННЯ 2: Якщо ви переходите до версії Angular 2.0.0-rc.1, вам потрібно зробити наступне у вашому файлі 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
]);

Важливим є посилання на es6-shim / index.d.ts

Це передбачає, що ви встановили типінгу es6-shim, як показано тут: введіть тут опис зображення

Більше про типізацію, встановлену з Angular, тут: https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings


Чи можете ви згадайте старий номер версії, в якій виникли проблеми? Дякую.
Мелігія

1
@Meligy Раніше я використовував gulp-typecript версії 2.12.0
brando

1
Дивовижно. Я оновив свою статтю про mapповідомлення про помилку, щоб включити примітку для користувачів із подібними проблемами. Велике спасибі :)
Meligy

1
@Meligy У мене знову була така сама проблема, коли я перейшов до Angular2 RC. Я оновив свою відповідь вище, щоб показати, як я її вирішив.
brando

6
import 'rxjs/Rx'; // Завантажує всі функції
VahidN

67

Rxjs 5.5 "Карта" Властивості "не існує для типу Спостерігається.

Проблема була пов'язана з тим, що потрібно додати трубу навколо всіх операторів.

Змініть це,

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

до цього

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

І

Імпортувати таку карту,

import { map } from 'rxjs/operators';

Це вирішить ваші питання.


3
Це стосується і Rxjs 6. У кожному підручнику, який я дивлюся, вони функціонують з картою без труби. Це не спрацювало для мене, поки я не додав "pipe" та імпортовану карту з "rxjs / operator" саме так, як зазначено у відповіді.
Кейван Садралодабай

Так, це стосується і Rxjs 6.
Hiran DA Walawage

41

У моєму випадку було б недостатньо включити лише карту та обіцянку:

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

Я вирішив цю проблему, імпортуючи декілька компонентів rxjs, оскільки офіційна документація рекомендує:

1) Імпортувати заяви в одному файлі 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) Імпортуйте сам rxjs-оператор у вашу послугу:

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

Знову ж таки, найкраща відповідь на питання не має найбільше голосів. Це найкраща відповідь на це питання. Дякую, що поділились. Я хочу, щоб інші проголосували за це.
морозний

26

Якщо ви побачили цю помилку у VS2015, тут згадується проблема про github та вирішення цього питання:

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

Це допомогло мені вирішити property map does not exist on observableпроблему. Крім того, переконайтеся, що у вас версія версії машинопису вище 1.8.2


8
Заміна C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js на typecriptService працювала для VS 15. ( перезапуск vs після заміни файлу )
tchelidze

Заміна вищезгаданого файлу працювала і для мене
Krishnan

Ще немає оновлення від Microsoft ... Чому вони не виправляють це?
Піотрек

26

Заключний відповідь для тих, хто вживає 6-го числа:

Додайте команду нижче у свій файл * .service.ts "

import { map } from "rxjs/operators";

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

Я використовую Windows 10;

angular6 з машинописом V 2.3.4.0


Схоже, ми більше не можемо імпортувати його в app.module.ts. Тепер нам потрібно імпортувати його в кожній службі та складовій
Адам Мендоса,


13

У кутових 2х

У example.component.ts

import { Observable } from 'rxjs';

У example.component.html

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

У кутових 5х або кутових 6х:

У example.component.ts

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

У example.component.html

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

1
чому нам потрібно використовувати трубу замість карти безпосередньо?
Кріш

10

ОНОВЛЕННЯ 29 вересня 2016 року для кутових 2,0 фіналу та VS 2015

Вирішення проблеми більше не потрібне, для виправлення потрібно просто встановити TypeScript версії 2.0.3 .

Виправлення, взяте з редагування цього коментаря про випуск github .


3
У мене ця проблема, у мене також встановлено 2.0.3: /
Mild Fuzz

1
У мене TS 2.1.6, але все ще бачу проблему
alltej

На момент отримання цього коментаря, TS остання 2.5.2. Ця версія для мене зламається. Використання 2.3.x робіт.
PigBoT

10

Як я розумію, це через rxjsостаннє оновлення. Вони змінили деякі оператори та синтаксис. Після цього ми повинні імпортувати rxтаких операторів

import { map } from "rxjs/operators";

замість цього

import 'rxjs/add/operator/map';

І нам потрібно додати трубу навколо всіх таких операторів

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

Джерело тут


9

Як запропонував Джастін Скофілд у своїй відповіді, для останнього випуску програми Angular 5 та для Angular 6, як 1 червня 2018 року, просто import 'rxjs/add/operator/map';недостатньо для усунення помилки TS: [ts] Property 'map' does not exist on type 'Observable<Object>'.

Необхідно виконати команду нижче, щоб встановити необхідні залежності: npm install rxjs@6 rxjs-compat@6 --saveпісля чого mapпомилка імпортної залежності вирішується!


1
Схоже, що більше змін викликає занепокоєння
Noobie3001

8

Я зіткнувся з подібною помилкою. Це було вирішено, коли я зробив ці три речі:

  1. Оновлення до останнього rxjs:

    npm install rxjs@6 rxjs-compat@6 --save
  2. Імпорт карти та обіцянки:

    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/toPromise';
  3. Додано нову заяву про імпорт:

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

7

Схоже, останній RxJS вимагає typecript 1.8, тому typecript 1.7 повідомляє про вищевказану помилку.

Я вирішив це питання, оновивши до останньої версії машинопису.


Якщо ви використовуєте tscз команди , будь ласка , перевірте tsc -v;-) Використання «сценаріїв» ще краще ідея, см stackoverflow.com/a/37034227/478584
tomaszbak

6

Подібні повідомлення про помилки з’являться при переході від версії 5 до 6. Ось відповідь на зміну на rxjs-6.

Імпортуйте окремих операторів, а потім використовуйте pipeзамість ланцюжка.

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

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

6

Якщо ви використовуєте angular4, використовуйте імпорт нижче. це має працювати.

імпорт 'rxjs / add / operator / map';

Якщо ви використовуєте angular5 / 6, тоді використовуйте карту з трубою та імпортуйте нижче однієї

import {map} з "rxjs / операторів";


1

властивість "map" не існує у типі "спостерігається відповідь" кутовий 6

Рішення: Оновіть кутову версію CLI та основної версії

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 
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.