'Observable <Response>'유형에 'map'특성이 없습니다.

Angular에서 API를 호출하려고 하는데이 오류가 발생합니다.

Property 'map' does not exist on type 'Observable<Response>'

이 비슷한 질문에 대한 답변이 내 문제를 해결하지 못했습니다 : Angular 2 베타 17 : 'Observable <Response>'유형에 'map'속성이 없습니다 .

Angular 2.0.0-beta.17을 사용하고 있습니다.

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 변경 로그 의 주요 변경 사항 을 참조하십시오 .

변경 로그에서 :

operator : 파이프 가능한 연산자는 다음과 같이 rxjs에서 가져와야 import { map, filter, switchMap } from 'rxjs/operators';합니다. 수입품이 없습니다.

내 솔루션이 여기에 없기 때문에 이것을 다시 방문하십시오.

rxjs 6.0과 함께 Angular 6을 실행 중이며이 오류가 발생했습니다.

내가 고치기 위해 한 일은 다음과 같습니다.

나는 바꿨다

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

단순히 :

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

여기에서 수정 사항을 찾았습니다.

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

프로젝트의 코드 대 터미널 에이 명령을 쓰고 프로젝트를 다시 시작하십시오.

npm install rxjs-compat

다음 map을 작성 하여 연산자 를 가져와야합니다 .

import 'rxjs/add/operator/map';

각도 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()));

Observable을 가져 오기 때문에 Angular 2.0.1과 동일한 문제가 발생했습니다.

import { Observable } from 'rxjs/Observable';

대신이 경로에서 Observable을 가져올 때 발생하는 문제를 해결합니다.

import { Observable } from 'rxjs';

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-compat를 설치하십시오.

npm install --save rxjs-compat

그런 다음 가져 오기 :

import 'rxjs/Rx';

최신 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);
      })
    );
  }

자세한 내용은 이 데모 를 확인 하십시오.

제 경우에는지도와 약속 만 포함하면 충분하지 않습니다.

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';

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

위의 함수에서 HttpClient를 사용하기 때문에 res.json ()을 사용하지 않은 것을 볼 수 있습니다. res.json ()을 자동으로 적용하고 Observable (HttpResponse <string>)을 반환합니다. HttpClient에서 각도 4 후에 더 이상이 함수를 직접 호출 할 필요가 없습니다.

나는 같은 문제가 있었고, 이전 버전의 typescript가있는 Visual studio 2015를 사용하고있었습니다.

확장을 업그레이드 한 후 문제가 해결되었습니다.

다운로드 링크

Angular 5.2를 사용 import 'rxjs/Rx';하고 있는데 사용할 때 다음과 같은 린트 오류가 발생합니다. TSLint :이 가져 오기는 블랙리스트에 있습니다.

아래 스크린 샷을 참조하십시오 :

솔루션 : 필요한 연산자 만 가져 와서 해결했습니다 . 예는 다음과 같습니다.

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

따라서 필요한 연산자 만 구체적으로 가져 오는 것이 수정되었습니다.

rxjs-compat 를 설치하기 만하면 문제가 해결됩니다.

npm i rxjs-compat --save-dev

아래와 같이 가져옵니다

import 'rxjs/Rx';

먼저 다음과 같이 설치를 실행하십시오.

npm install --save rxjs-compat@6

이제 가져와야 rxjs에서 service.ts:

import 'rxjs/Rx'; 

짜잔! 문제가 해결되었습니다.

간단히 실행 npm install --save rxjs-compat하면 오류가 해결됩니다.

여기에 추천

위에 게시 된 가능한 모든 답변을 시도했지만 아무도 효과가 없었습니다.

IDE, 즉 Visual Studio Code를 다시 시작하여 문제를 해결했습니다.

누군가를 도울 수 있습니다.

나도 같은 오류에 직면했다. 나를 위해 일한 한 가지 해결책은 당신의 다음 줄을 추가했다 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));
    }
}

가져 오기 'rxjs / add / operator / map'또는 가져 오기 'rxjs / Rx'를 가져온 후에도 동일한 오류가 발생하면 Visual Studio 코드 편집기를 다시 시작하면 오류가 해결됩니다.

이 문제가 발생하는 모든 Linux 사용자의 경우 rxjs-compat 폴더가 잠겨 있는지 확인하십시오. 나는이 똑같은 문제가 있었고 터미널에 들어가서 sudo su를 사용하여 전체 rxjs-compat 폴더에 권한을 부여했으며 수정되었습니다. 가져 왔을 때

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

원본 .map 오류가 발생한 project.ts 파일에서

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

npm install rxjs @ 6 rxjs-compat @ 6-저장

  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 코드를 다시 시작하면 문제가 해결되었습니다.

angular new 버전은 .map을 지원하지 않습니다. cmd npm install --save rxjs-compat를 통해 이것을 설치해야합니다. 참고 :이 행을 가져 오는 것을 잊지 마십시오.

import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';