神刀安全网

Angular2 Http: Solving Common Problems With map() & HTTP_PROVIDERS

Link opens in new tab

Thanks for your support — It does make a difference

I had so much fun helping mentoring a couple dozen of developers yesterday in SSW’s Angular Hack Day here in Sydney. It was an awesome day from organizers to students.

This post is about the Number 1 problem all students seemed to have, and how to solve it.

The Most Common Problem: map Not A Function

When you make an HTTP request to a JSON end point, you map the response text ao a JSON object, like this:

getList (): Observable<ListItem[]> {       return this.http.get(this._listUrl)                       .map(response => response.json())                       .catch(this.handleError); } 

When the students ran their own code, which more or less looked like the segment here, they got an exception like this:

angular2.dev.js:23925 EXCEPTION: TypeError: this._http.get(...).mapis not a function in [null] 

Angular2 Http: Solving Common Problems With map() &amp; HTTP_PROVIDERS

The reason for this is that the result of the HTTP call is an Observable . An Observable has nothing defined by default except subscribe . You need to import any other operator manually like

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

If you rely on autocomplete in your editor, and it shows a couple of versions for every operator, remember to choose the with with “/add/” in it. As this is the file that add the operator to the Observable definition.

You cannot add * unfortunately. But you can move the import s from every TypeScript file to the main entry point of your app, likely the file with the bootstrap() call.

A few caveats about putting it in main file is that, depending on how you set your compiler and/or module loader, it might not work – it still with the SystemJS use you see it in the official Angular 2 quick start though. Also, some people think this is a hacky way, if you do, just add the import s on top of the each file that uses them.

Another Problem: No Providers for Http

Some students also were getting a different error:

angular2.dev.js:23925 EXCEPTION: Error: Uncaught (in promise): Noproviderfor Http! (CustomersComponent -> DataService -> Http) 

Angular2 Http: Solving Common Problems With map() &amp; HTTP_PROVIDERS

The forgotten part this time was adding the Http providers to the bootstrap. Something like this:

import { bootstrap } from 'angular2/platform/browser'; import { HTTP_PROVIDERS } from 'angular2/http'; import { AppComponent } from './app.component';   bootstrap(AppComponent, [HTTP_PROVIDERS]); 

One last tip: Make sure you included the Http file in your scripts if you are starting from a quickstart start or so. As the Http module is included in a separate file in Angular 2.

A Quick Shoutout to Dan Wahlin

During the hack day, students asked me for a good example that shows the solution above. It was not in the official examples (the 5 minutes quickstart, and the Tour of Heroes).

The best I have found on Github is Dan Wahlin’s Angular 2 JumpStart .

Go chec it out. He shows how to build everything in his (suprisingly cheap, only $30) Udemy course with the same name . I remember his AngularJS in 60-ish minutes video was a key block in my Angular 1 learning when I first started it back in 2013.

Thanks for everything, Dan :)

What Were Your Own Problems?

I’m pretty curious, what was the biggest blocker you had when trying to play with code in Angular 2?

For some people, just setting up Node was more challenging than it should be.

Some others had issues with the sample APIs they chose, because they didn’t have cross domain support (CORS), or returned XML by default and they needed to add an Accept header explicitly.

Some were wondering how to use RxJS to combine results form 2 separate HTTP requests (getting city weather from one, and information about it, or an image URL from another).

What were your own challenges?

Mention them to me on Twitter (I’m @Meligy), or just in a comment below. I can’t wait!

Share With Friends:

P.S. Please help me out by checking this offer, then look below it for a special gift

Your Offer

Links open in new tabs

Thanks for your support — It does make a difference

Your Gift

As a bonus for coming here, I’m giving away a free newsletter for web developers that you can sign up forfrom here or the form below.

It’s not an anything-and-everything link list. It’s thoughtfully collected picks of articles and tools, that focus on Angular 2, ASP.NET 5, and other fullstack developer needs.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Angular2 Http: Solving Common Problems With map() & HTTP_PROVIDERS

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址