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.