Angular 6.0.0与RxJS 6.1.0中Observable<Object>无map方法问题

Hey there, I totally get why you're stuck here—RxJS 6 brought some big breaking changes compared to the version paired with Angular CLI 1.3.2, and the .map() method you’re used to isn’t where it used to be. Let’s break down what’s going on and fix this step by step:

The Root Cause #

In RxJS 5 and earlier, operators like map were attached directly to the Observable prototype, so you could chain them like observable.map(...). But RxJS 6 shifted all these operators to pipeable functions—meaning you can’t call them directly on the Observable anymore. Instead, you use the pipe() method to pass in the operators you need.

Step-by-Step Fix #

1. Import the map operator correctly
   You’ll need to import map from rxjs/operators (not the main rxjs module like before):

   import { map } from 'rxjs/operators';
   

2. Rewrite your code to use pipe()
   Replace your old chained .map() call with the pipe() method, passing map as an argument:
   Before (RxJS 5 style—will throw an error in RxJS 6):

   // This won't work in your current setup
   this.yourApiCall().map(data => {
     // Your data transformation logic here
     return transformedData;
   });
   

   After (RxJS 6 style):

   this.yourApiCall().pipe(
     map(data => {
       // Your data transformation logic here
       return transformedData;
     })
   );
   

Bonus: Temporary Transition Option (Not Recommended Long-Term) #

If you don’t want to rewrite all your old code right away, you can install the rxjs-compat package, which adds back the old prototype-based operators for compatibility:

npm install rxjs-compat --save

Just note this is a short-term fix—eventually, you’ll want to switch to pipeable operators since rxjs-compat is only meant for migration purposes.

Extra Angular 6 Tip #

Since you’re using Angular 6’s HttpClient (instead of the old Http module), it automatically parses JSON responses for you. That means you might not even need the map(response => response.json()) call anymore—you can use the returned data directly!

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