Angular 2 beta.17: คุณสมบัติ 'map' ไม่มีอยู่ในประเภท 'Observable <Response>'


195

ฉันเพิ่งอัพเกรดจาก Angular 2 beta16เป็นbeta17ซึ่งจำเป็นต้องใช้ rxjs 5.0.0-beta.6 (เปลี่ยนที่นี่: https://github.com/angular/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28 ) ในรุ่นเบต้า 16 ทั้งหมดนั้นทำงานได้ดีเกี่ยวกับฟังก์ชันการสังเกต / แผนที่ ข้อผิดพลาดต่อไปนี้ปรากฏขึ้นหลังจากที่ฉันอัพเกรดและเกิดขึ้นเมื่อ typescript พยายามทำการ transpile:

  1. คุณสมบัติ 'map' ไม่มีอยู่ในประเภท 'Observable' (ที่ใดก็ตามที่ฉันใช้แผนที่พร้อมกับสังเกตได้)
  2. c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): ข้อผิดพลาด TS2435: โมดูล Ambient ไม่สามารถซ้อนในโมดูลหรือเนมสเปซอื่นได้
  3. c: /path/node_modules/rxjs/add/operator/map.d.ts (2,16): ข้อผิดพลาด TS2436: การประกาศโมดูล Ambient ไม่สามารถระบุชื่อโมดูลสัมพันธ์ได้

ฉันได้เห็นคำถาม / คำตอบนี้ แต่ไม่ได้แก้ปัญหา: ข้อผิดพลาดที่สังเกตได้กับ 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
]);

ไม่มีใครมีความคิดว่ามีอะไรกำลังยุ่งเหยิงหรือไม่?


สำเนาที่เป็นไปได้ของ'แผนที่'
polyp

คำตอบ:


284

คุณต้องนำเข้าmapโอเปอเรเตอร์:

import 'rxjs/add/operator/map'

3
ทีม Angular และทีม RxJS ทั้งคู่ไม่แนะนำวิธีการนำเข้า RX ทั้งหมดเช่นนี้ คุณไม่ควรทำอย่างนั้น มันใหญ่เกินไป คำตอบแรกข้างต้นนั้นใช้ได้ แต่คำตอบที่สองไม่มากนัก @ 0x1ad2 คุณสามารถอัปเดตคำตอบของคุณเพื่อไม่รวมการนำเข้าขนาดใหญ่นั้นเป็นตัวเลือกที่สองได้หรือไม่?
หนาวจัด

2
นี่ไม่ง่ายเลย เอกสารนี้อยู่ที่ไหนในฐานะที่เป็นการพึ่งพาการใช้งานสังเกตได้ในการพัฒนาเชิงมุม 2+?
Joe

มันใช้กับอิออน 3.20.0 ได้ไหม? ฉันได้รับปัญหาเดียวกันเพราะอิออนไม่ได้นำเข้าแผนที่โดยอัตโนมัติ การนำเข้าใช้งานได้อย่างชัดเจน แต่ฉันไม่แน่ใจว่าสิ่งนี้ถูกต้อง
LordDraagon

1
สิ่งนี้ไม่ได้แก้ไขปัญหาสำหรับฉันมากมายฉันต้องใช้ Pipe แทน rxjs / เพิ่ม / operator / แผนที่ฉันใช้ rxjs / โอเปอเรเตอร์ที่นำเข้าด้วยไพพ์และ. pipe (map (res => res.json ()));
codefreaK

ฉันมาถึงที่นี่หลังจากการค้นหาของ Google ในเวลาที่เราใช้ Angular 7 และ RXJS ได้ทำการเปลี่ยนแปลงบางอย่าง วิธีการใหม่คือimport { map } from 'rxjs/operators'แต่คำตอบอื่นมีรายละเอียดเพิ่มเติม
Colby Hunter

78

ฉันอัปเกรดปลั๊กอิน gulp-typescript เป็นเวอร์ชันล่าสุด (2.13.0) และตอนนี้ก็คอมไพล์โดยไม่ต้องผูกปม

UPDATE 1: ก่อนหน้านี้ฉันใช้ gulp-typescript เวอร์ชัน 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-typescript เวอร์ชัน 2.12.0
brando

1
น่ากลัว ฉันได้อัปเดตบทความเกี่ยวกับmapข้อความแสดงข้อผิดพลาดเพื่อรวมหมายเหตุสำหรับผู้ใช้ที่มีปัญหาที่คล้ายกัน ขอบคุณมาก :)
Meligy

1
@Meligy ฉันมีปัญหาเดียวกันนี้อีกครั้งเมื่อฉันอัพเกรดเป็น Angular2 RC ฉันอัปเดตคำตอบของฉันด้านบนเพื่อแสดงวิธีแก้ไข
brando

6
import 'rxjs/Rx'; // โหลดฟีเจอร์ทั้งหมด
VahidN

67

Rxjs 5.5“ Property 'map' ไม่มีอยู่ในประเภท Observable

ปัญหาเกี่ยวข้องกับความจริงที่ว่าคุณต้องเพิ่มไปป์รอบ ๆ ตัวดำเนินการทั้งหมด

เปลี่ยนสิ่งนี้

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

สำหรับสิ่งนี้

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

และ

นำเข้าแผนที่แบบนี้

import { map } from 'rxjs/operators';

มันจะแก้ปัญหาของคุณ


3
นอกจากนี้ยังใช้กับ Rxjs 6 ทุกบทช่วยสอนที่ฉันดูพวกเขามีฟังก์ชั่นแผนที่โดยไม่มีท่อ สิ่งนี้ไม่ได้ผลสำหรับฉันจนกว่าฉันจะเพิ่มไปป์และนำเข้าแผนที่จาก 'rxjs / โอเปอเรเตอร์' ตามที่ระบุในคำตอบ
Keyvan Sadralodabai

ใช่มันใช้กับ Rxjs 6 เช่นกัน
Hiran DA Walawage

41

ในกรณีของฉันมันไม่เพียงพอที่จะรวมเฉพาะแผนที่และสัญญา:

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

ฉันแก้ไขปัญหานี้โดยการนำเข้าส่วนประกอบ rxjs หลายอย่างเนื่องจากเอกสารแนะนำอย่างเป็นทางการแนะนำ:

1) นำเข้าข้อความสั่งในไฟล์ 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) นำเข้า rxjs-operator ในบริการของคุณ:

// 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ปัญหา นอกจากนี้ตรวจสอบให้แน่ใจว่าคุณมีเวอร์ชันของ typescript ด้านบน 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

การแทนที่ไฟล์ดังกล่าวทำงานให้ฉันด้วย
Krishnan

ยังไม่มีการอัพเดทจาก microsoft ... ทำไมพวกเขาถึงไม่แก้ไขมัน?
Piotrek

26

คำตอบสุดท้ายสำหรับผู้ที่ใช้ ANGULAR 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 พร้อม typescript V 2.3.4.0


ดูเหมือนว่าเราจะไม่สามารถนำเข้าใน app.module.ts อีกต่อไป ตอนนี้เราต้องนำเข้ามันในแต่ละบริการและส่วนประกอบ
Adam Mendoza


13

ในเชิงมุม 2x

ใน 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 แทน map โดยตรง?
Krish

10

อัปเดต 29 ก.ย. 2559 สำหรับ Angular 2.0 Final & VS 2015

วิธีแก้ปัญหาไม่มีความจำเป็นเพื่อแก้ไขคุณเพียงแค่ต้องติดตั้ง typescript เวอร์ชัน 2.0.3

Fix นำมาจากการแก้ไขบน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

ตามที่ Justin Scofield ได้แนะนำในคำตอบของเขาสำหรับ 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 ล่าสุดต้องการ typescript 1.8 ดังนั้น typescript 1.7 จึงรายงานข้อผิดพลาดด้านบน

ฉันแก้ไขปัญหานี้โดยอัปเกรดเป็นรุ่น typescript ล่าสุด


หากคุณใช้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 / เพิ่ม / ผู้ประกอบการ / แผนที่';

หากคุณกำลังใช้ angular5 / 6 ให้ใช้แผนที่ที่มีท่อและนำเข้าด้านล่าง

นำเข้า {map} จาก "rxjs / โอเปอเรเตอร์";


1

'แผนที่' ของอสังหาริมทรัพย์ไม่มีอยู่ในประเภท 'การตอบสนองที่สังเกตได้' มุม 6

โซลูชัน: อัปเดต Angular 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 
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.