Angular 2 beta.17: свойство 'map' не существует для типа 'Observable <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 все работало хорошо в отношении функциональности Observable / map. Следующие ошибки появились после того, как я обновился и появляются, когда машинопись пытается перенести:

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

Кто-нибудь имеет представление о том, что происходит с Haywire?

Брандо
источник

Ответы:

284

Вам необходимо импортировать mapоператора:

import 'rxjs/add/operator/map'
0x1ad2
источник
3
Команда Angular и команда RxJS НЕ РЕКОМЕНДУЮТ такой способ импорта всего RX, как этот. Вы не должны этого делать. Это слишком большой. Первый ответ выше, хорошо, но второй, не так много. @ 0x1ad2 Можете ли вы обновить свой ответ, чтобы не включать этот массовый импорт в качестве второго варианта?
морозно
2
Это не интуитивно понятно. Где это задокументировано как зависимость от реализации Observable в разработке 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-typcript до последней версии (2.13.0) и теперь он компилируется без проблем.

ОБНОВЛЕНИЕ 1: я ранее использовал gulp-typcript версии 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

Брандо
источник
Можете ли вы указать старый номер версии, в которой возникла проблема? Спасибо.
Meligy
1
@Meligy Я ранее использовал gulp-
typcript
1
Потрясающие. Я обновил свою статью о mapсообщении об ошибке, чтобы включить примечание для пользователей с похожими проблемами. Большое спасибо :)
Meligy
1
@Meligy У меня снова возникла такая же проблема, когда я перешел на Angular2 RC. Я обновил свой ответ выше, чтобы показать, как я решил это.
Брандо
6
import 'rxjs/Rx'; // Загружает все функции
VahidN
67

Rxjs 5.5 «Свойство map» не существует для типа Observable.

Проблема была связана с тем, что нужно добавить трубу вокруг всех операторов.

Измени это,

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

к этому

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

И

Импортировать карту, как это,

import { map } from 'rxjs/operators';

Это решит ваши проблемы.

Хиран Д.А.
источник
3
Это также относится к Rxjs 6. В каждом уроке, на который я смотрю, есть функция map без конвейера. Это не сработало для меня, пока я не добавил трубу и не импортировал карту из 'rxjs / operator', как указано в ответе.
Кейван Садралодабай
Да, это также относится к Rxjs 6.
Хиран Д.А., Валавейдж,
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/issues/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 с помощью typescriptService работала для VS 15. ( перезапустите vs после замены файла )
tchelidze
замена вышеупомянутого файла работала для меня тоже
Кришнан
Все еще нет обновления от 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. Теперь нам нужно импортировать его в каждый сервис и компонент
Адам Мендоса,
15
import 'rxjs/add/operator/map';

&

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

работал на меня

Джастин ланге
источник
13

В угловых 2х

В example.component.ts

import { Observable } from 'rxjs';

В example.component.html

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

В угловых 5x или угловых 6x:

В 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
почему мы должны использовать pipe вместо карты напрямую?
Криш
10

ОБНОВЛЕНИЕ 29 сентября 2016 для Angular 2.0 Final & 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 => {}))

Источник здесь

Gh111
источник
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
Похоже, больше
серьезных
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 требует машинописного текста 1.8, поэтому машинописный текст 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);
farrellw
источник
6

Если вы используете angular4, используйте ниже импорта. он должен работать .

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

Если вы используете angular5 / 6, тогда используйте карту с pipe и импортируйте ниже

import {map} из "rxjs / operator";

Manas
источник
1

свойство 'map' не существует для типа 'наблюдаемый отклик' angular 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 
Jaydeepsinh Makwana
источник