Свойство 'map' не существует для типа 'Observable <Response>'

Ответы:

371

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

import 'rxjs/add/operator/map'

Или в более общем плане:

import 'rxjs/Rx';

Примечание: для версий RxJS 6.x.xи выше вам придется использовать конвейерные операторы, как показано в фрагменте кода ниже:

import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

// ...
export class MyComponent {
  constructor(private http: HttpClient) { }
  getItems() {
    this.http.get('https://example.com/api/items').pipe(map(data => {})).subscribe(result => {
      console.log(result);
    });
  }
}

Это вызвано тем, что команда RxJS удалила поддержку для использования. Для получения дополнительной информации смотрите последние изменения в журнале изменений RxJS.

Из журнала изменений:

Операторы : Pipeable операторы теперь должны быть импортированы из rxjs нравится так: import { map, filter, switchMap } from 'rxjs/operators';. Нет глубокого импорта.

Тьерри Темплиер
источник
Неверное имя модуля в дополнении, модуль "../../Observable" не найден. Свойство 'map' не существует для типа 'Observable <Response>'.
Малик Кашмири
Как вы импортируете Observableкласс? Как это: import {Observable} from 'rxjs/Observable';или import {Observable} from 'rxjs/Rx';?
Тьерри Темплиер
я не импортирую этот класс до сих пор
Малик Кашмири
1
Я использую Angular 2 RC1 и rxjs 5.0.0-beta2. Я импортировал Observable как import {Observable} из 'rxjs / observable'; и импортированный оператор карты, такой как import 'rxjs / add / operator / map'; Это работало, когда я использовал Beta 7. Я только что обновился до RC1, и он сломался.
Даршан Пураник
4
Сначала напишите эту команду в кодовом терминале вашего проекта и перезапустите проект. npm install rxjs-compat, чем импортировать mapоператора.
Каран Райяни
162

Возвращаясь к этому, потому что мое решение не указано здесь.

Я использую Angular 6 с rxjs 6.0 и столкнулся с этой ошибкой.

Вот что я сделал, чтобы это исправить:

Я изменился

map((response: any) => response.json())

просто быть:

.pipe(map((response: any) => response.json()));

Я нашел исправление здесь:

https://github.com/angular/angular/issues/15548#issuecomment-387009186

Ник Ходжес
источник
1
Я не уверен, почему инструмент миграции rxjs-5-to-6-migrate не подхватывает это? Интересно, что это не касается переотображения do / tap, которое в моей среде до сих пор не решено, даже если инструмент импорта распознает его. 90% моего «непредвиденного впустую потраченного времени» на разработку Angular тратится на проблемы с документами и границами кода RxJS, это действительно расстраивает.
Джо
1
Спасибо! Вы спасатель! Кто бы ни заинтересовался, полная ссылка на это изменение доступна здесь: github.com/ReactiveX/rxjs/blob/master/…
malvadao
22
Это сработало для меня, мне также нужно было добавитьimport { map } from 'rxjs/operators';
Павел
Забавно, это именно то, как мы исправили это при угловом обновлении 6 - что также принесло последние версии rxjs.
Макс
2
@ paul Спасибо. Что касается .catch, мы можем использовать catchErrorкак .pipe(catchError(this.handleError))?
FindOutIslamNow
61

просто напишите эту команду в кодовом терминале вашего проекта и перезапустите проект.

npm install rxjs-compat

Вам нужно импортировать mapоператора, написав это:

import 'rxjs/add/operator/map';
Каран Райяни
источник
1
если это не работает, закройте все файлы и перезапустите vs studio.
Аджай Такур
1
Это сработало для меня, спасибо, что поделились.
thesamoanppprogrammer
30

Для угловых 7v

+ Изменить

import 'rxjs/add/operator/map';

к

import { map } from "rxjs/operators"; 

И

 return this.http.get('http://localhost/ionicapis/public/api/products')
 .pipe(map(res => res.json()));
Надим Касми
источник
@ Katana24 мне это помогло, так как я увидел правильный синтаксис с pipe.
панколог
25

У меня была такая же проблема с Angular 2.0.1, потому что я импортировал Observable из

import { Observable } from 'rxjs/Observable';

Вместо этого я решаю проблему импорта Observable по этому пути.

import { Observable } from 'rxjs';
S.Galarneau
источник
Эта практика считается несовместимой с размером пакета, поскольку этот оператор импортирует все операторы Observable(включая те, которые вы не используете) в пакет. Вместо этого вы должны импортировать каждого оператора в отдельности. Я рекомендую использовать «операторы lettable», которые были представлены в RxJS v5.5 для поддержки лучшего тряски деревьев.
Сарун Интаралаван
15

В rxjs 6 изменилось использование оператора карты, теперь вам нужно использовать его следующим образом.

import { map } from 'rxjs/operators';
myObservable
  .pipe(map(data => data * 2))
  .subscribe(...);

Для справки https://www.academind.com/learn/javascript/rxjs-6-what-changed/#operators-update-path

Хари Прасад Шарма
источник
Примите к сведению этот ответ, так как любой, кто делает RxJS v6это, должен будет использовать .pipe()оператор или ни один из операторов не будет работать напрямую с Observable. Вы увидите ошибку вроде:Property 'share' does not exist on type 'Observable<{}>'
atconway
8

просто установите rxjs-compat, набрав в терминале:

npm install --save rxjs-compat

затем импортировать:

import 'rxjs/Rx';
Amir.S
источник
8

В последней версии Angular 7. *. * Вы можете попробовать это просто так:

import { Observable, of } from "rxjs";
import { map, catchError } from "rxjs/operators";

И тогда вы можете использовать их methodsследующим образом:

   private getHtml(): Observable<any> {
    return this.http.get("../../assets/test-data/preview.html").pipe(
      map((res: any) => res.json()),
      catchError(<T>(error: any, result?: T) => {
        console.log(error);
        return of(result as T);
      })
    );
  }

Проверьте это демо для более подробной информации.

Hearen
источник
5

В моем случае недостаточно включить только карту и обещание:

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';
Алекс Вальчук
источник
Я считаю неправильным включать rxjs-операторы в каждую услугу. Он должен быть включен только в app.module.ts, но, к сожалению, ошибка ng test throws, если операторы не импортируются в определенные места
Мохан Рам
5
import { map } from "rxjs/operators";

getGetFunction(){
this.http.get('http://someapi')
.pipe(map(res => res));
}

getPostFunction(yourPara){
this.http.get('http://someapi',yourPara)
.pipe(map(res => res));
}

В приведенной выше функции вы можете видеть, что я не использовал res.json (), так как я использую HttpClient. Он применяет res.json () автоматически и возвращает Observable (HttpResponse <string>). Вам больше не нужно вызывать эту функцию самостоятельно после углового 4 в HttpClient.

Душан
источник
3

У меня была та же проблема, я использовал Visual Studio 2015, которая имела старую версию машинописи.

После обновления расширения проблема была решена.

Ссылка на скачивание

Нэвин
источник
3

Я использую Angular 5.2, и когда я import 'rxjs/Rx';его использую, я получаю следующую ошибку lint: TSLint: этот импорт занесен в черный список, вместо этого импортируется подмодуль (import-blacklist)

Смотрите скриншот ниже: Импорт rxjs / Rx занесен в черный список в Angular 5.2

РЕШЕНИЕ: Решил это, импортировав только те операторы, которые мне были нужны . Пример следует:

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

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

Devner
источник
@ AndrewBenjamin Я настоятельно рекомендую вам сделать это. Это избавит вас от многих неприятностей в переулке.
Девнер
3

Просто установите rxjs-compat для решения проблемы

npm i rxjs-compat --save-dev

И импортируйте это как ниже

import 'rxjs/Rx';
Анкит Бхатия
источник
3

Прежде всего, запустите установку, как показано ниже:

npm install --save rxjs-compat@6

Теперь вам нужно импортировать rxjsв service.ts:

import 'rxjs/Rx'; 

Вуаля! Проблема была исправлена.

Брахмесвара Рао Палепу
источник
3

просто запустите, npm install --save rxjs-compatчтобы исправить ошибку.

Рекомендуется здесь

trustidkid
источник
Пожалуйста, не забудьте импортировать 'rxjs / add / operator / map'
trustidkid
2

Я перепробовал все возможные ответы, опубликованные выше, но ни один из них не сработал,

Я решил это, просто перезапустив свою IDE, то есть код Visual Studio

Пусть это кому-нибудь поможет.

Шилендра Мадда
источник
2

Я тоже столкнулся с такой же ошибкой. Одно решение , которое работало для меня было добавить следующие строки в service.ts файл вместо из import 'rxjs/add/operator/map':

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

Например, мой app.service.ts после отладки был похож,

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class AppService {
    constructor(private http: HttpClient) {}
    getData(): Observable<any> {
        return this.http.get('https://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22')
        .pipe(map(result => result));
    }
}
Штеффи Керан Рани Дж
источник
2

Если после импорта import 'rxjs / add / operator / map' или импорта rxjs / Rx 'вы также получаете такую ​​же ошибку, то перезапустите ваш редактор кода Visual Studio, ошибка будет устранена.


источник
1

для всех тех пользователей Linux, у которых есть эта проблема, проверьте, заблокирована ли папка rxjs-compat. У меня была точно такая же проблема, и я зашел в терминал, использовал sudo su, чтобы дать разрешение всей папке rxjs-compat, и это было исправлено. Это при условии, что вы импортировали

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

в файле project.ts, где произошла исходная ошибка .map.

JavaJunior
источник
1

Используйте mapфункцию в pipeфункции, и она решит вашу проблему. Вы можете проверить документацию здесь .

this.items = this.afs.collection('blalal').snapshotChanges().pipe(map(changes => {
  return changes.map(a => {
    const data = a.payload.doc.data() as Items;
    data.id = a.payload.doc.id;
    return data;
  })
})
Мухаммед Кванит
источник
1

npm install rxjs @ 6 rxjs-compat @ 6 - сохранить

Аджай Такур
источник
0
  import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/map';

  @Injectable({
  providedIn: 'root'
  })
  export class RestfulService {

  constructor(public http: Http) { }

 //access apis Get Request 
 getUsers() {
 return this.http.get('http://jsonplaceholder.typicode.com/users')
  .map(res => res.json());
  }

 }

запустить команду

 npm install rxjs-compat 

Я просто импортирую

 import 'rxjs/add/operator/map';

перезапустите vs код, проблема решена.

Надим Касми
источник
-1

Новая версия angular не поддерживает .map, вы должны установить это с помощью cmd npm install --save rxjs-compat, который вы можете использовать со старой техникой. примечание: не забудьте импортировать эти строки.

import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
Шайлая Валивети
источник
1
Этот поздний ответ излишен.
Том Фалтесек