Angular2 Http Request returns Observable without map method

Question

I have setup my application with HTTP_PROVIDERS

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  ROUTER_PROVIDERS,
  provide(LocationStrategy, { useClass: HashLocationStrategy }),
  PostService
]);

and my service like

@Injectable()
export class PostService {
  posts = [];

  constructor(http: Http) {
    this.http = http;
  }
}

but when i call

this.http.get('/posts')

It returns an Observable which has no map method, it drives me crazy for hours. Im using Babel to transpile my javascript code.

They removed most of the operations from the code, you need to import the part of the library that includes that method manually. Try this: `import 'rxjs/add/operator/map';` — Langley, Jan 26 '16 at 22:51
See this answer: http://stackoverflow.com/questions/34515173/angular-2-http-get-with-typescript-error-http-get-map-is-not-a-function-in/34515276#34515276 — Thierry Templier, Jan 27 '16 at 06:37
@ThierryTemplier, thanks, I closed it as a dup. (I think this question comes up about once a week.) — Mark Rajcok, Jan 27 '16 at 17:04

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

The newly minted Server Communication dev guide (finally) discusses/mentions/explains this:

The RxJS library is quite large. Size matters when we build a production application and deploy it to mobile devices. We should include only those features that we actually need.

Accordingly, Angular exposes a stripped down version of Observable in the rxjs/Observable module, a version that lacks almost all operators including the ones we'd like to use here such as the map method...

It's up to us to add the operators we need. We could add each operator, one-by-one, until we had a custom Observable implementation tuned precisely to our requirements.

E.g., as @Langley's comment above shows:

import 'rxjs/add/operator/map';

Or, if we're lazy we can just pull in the full set of operators:

import 'rxjs/Rx';

Angular2 Http Request returns Observable without map method

1 Answers1