使用RxJS map()函数提示无法解析，替换HttpClientModule遇get()方法错误

Hey there! Let's tackle these two issues one by one—they're common pitfalls when working with Angular's HTTP clients and RxJS operators.

1. Fixing the "Unable to resolve function map()" Error #

It looks like your RxJS operator setup might be misaligned with your RxJS version. Here's how to fix it:

• Check your RxJS version compatibility:
  If you're using RxJS 6 or later, the old rxjs/add/operator/map import style is deprecated. Instead, use pipeable operators:
  1. Import map directly from rxjs/operators:

     import { map } from 'rxjs/operators';
     

  2. Wrap the map operator inside a pipe() method on your observable:

     this._http.get(yourUrl)
       .pipe(map(res => res.json()))
       .subscribe(...);
     

• Verify module imports:
  Ensure HttpModule is added to your AppModule's imports array (for Angular <4.3). If you're on Angular 4.3+, skip this and move to the second issue's HttpClientModule setup.

2. Fixing "Unable to resolve method get()" with HttpClientModule #

When switching from Http to HttpClient, there are critical changes to follow:

• Replace Http with HttpClient:
  Inject HttpClient instead of Http in your component/service, and update the import:

  import { HttpClient } from '@angular/common/http';
  
  constructor(private _http: HttpClient) { } // Use HttpClient, not Http
  

• Remove the map(res => res.json()) call:
  Unlike Http, HttpClient automatically parses JSON responses. This map operation is no longer needed.
• Import HttpClientModule in AppModule:
  Make sure your root module uses HttpClientModule instead of HttpModule:

  import { HttpClientModule } from '@angular/common/http';
  
  @NgModule({
    imports: [
      // ... other imports
      HttpClientModule
    ],
    // ...
  })
  export class AppModule { }
  

Updated getVenues() Method (Combined Fix) #

Here's your method rewritten with the correct HttpClient and RxJS 6+ syntax (I also used template literals for cleaner URL formatting):

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

// ...

getVenues() {
  if (this.placeValue && this.recipeValue) {
    const url = `https://api.foursquare.com/v2/venues/search?client_id=3PPNMTIKJJNDVYPFOBGSHHV2PR5A2P05PYHXDN2MKSKTTBSX&client_secret=0QPHT0F5RS043F4TB4KKPQSHKSAXKE5ZNOYGB5KL2MBDYAG4&v=20160215&limit=5&near=${this.placeValue}&query=${this.recipeValue}`;
    
    this._http.get(url)
      .subscribe(data => {
        this.data1 = data.results[0].key;
        console.log(this.data1);
      }, err => console.log(err));
  }
}

内容的提问来源于stack exchange，提问作者user9718365