Does anybody know if there's been any breaking changes to the http between alpha 45 and alpha 48? I've been searching around and I didn't find anything. My problem is that the code below was working perfectly on Alpha 45. But now that I've upgraded to Alpha 48 I am getting a _this.http.post(...).map is not a function
error message when I try to run the application. The strange thing is that IntelliSense shows that http.post is returning an observable. Which means that the map function should be available. Any help would be appreciated. Thanks!
public Authenticate(username: string, password: string): Observable<boolean> {
this.ResetAuthenticationValues();
return Observable.create((subscriber: EventEmitter<string>) => {
let body: string = 'grant_type=password&username=' + username + '&password=' + password;
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
this.http.post('http://example.com', body, {headers: headers})
.map(res => res.json())
.subscribe(
(data: DataResponse) => {
if (!data.error) {
this.accessToken = {access_token: data.access_token, token_type: data.token_type};
subscriber.next(this.isAuthenticated = true);
}
else
subscriber.error(this.isAuthenticated = false);
},
(err) => subscriber.error(err),
() => subscriber.complete()
);
return () => { };
});
}
Another update (cough, sorry about that, forgot this option)
If you want to avoid adding individually the operators you can import the full Rx by doing
import {Observable, Subject, ReplaySubject, etc...} from 'rxjs/Rx';
You'll have all the operators :)
Update alpha 50 (08/12/2015)
Shortly after alpha 49 was released, they released alpha 50. This version upgraded rxjs to alpha 14. So you'll good to go by doing
npm install angular2@latest
npm install [email protected]
Update alpha 49 (08/12/2015)
As of now alpha 49 was released and this didn't change, which means this will remain in time. The original answer is still valid with a few changes, paths changed for rjxs, so it should be as follows :
System.config({
paths: {
'rxjs/add/observable/*' : 'node_modules/rxjs/add/observable/*.js',
'rxjs/add/operator/*' : 'node_modules/rxjs/add/operator/*.js',
'rxjs/*' : 'node_modules/rxjs/*.js'
}
});
import 'rxjs/add/operator/map';
Note
This version requires exactly the alpha 13
version, so if in your package.json
you have already another version, you'll have to remove it, install angular2, and then install rjxs.
Update
The CHANGELOG was updated to show this breaking change. There's a comment from @jeffbcross in issue #5642 that clarifies a LOT in this matter.
Quoting part of that comment
Modularity was a goal of the new RxJS project from the start, and it wasn't until recently that we started really getting serious about composing operators instead of relying on tiered distributions of Rx.
Original answer
There was actually a breaking change regarding RxJS and Angular2. So now to use operators like map
you have to import them separately. You can see the change in this pull request. And there's already an issue about your question.
I recommend you to stick to alpha 47. But to everyone who needs and want to know what the solution is, like in the pull request is specified, to add the operator separately.
You must have something like this
import {Http, ...} ...;
// Component
constructor(http: Http) {
http.get(...).map() // 'map' doesn't exist! Ouch!
}
To fix it, add the operator (sorry for repeating it so many times) and configure the paths to rxjs
Note
This must be done with RxJS alpha 11, or alpha 12 (don't confuse it with @reactivex/rxjs
, now it's just rxjs
). So install it with
npm install [email protected]
Or just npm install rxjs
if you want the latest, although they lock it to be alpha 11.
Configure the paths in your System.config (note that this is my config, not necessarily the best and I'm assuming you installed alpha 11)
System.config({
paths: {
'rxjs/observable/*' : 'node_modules/rxjs/observable/*.js',
'rxjs/operators/*' : 'node_modules/rxjs/operators/*.js',
'rxjs/*' : 'node_modules/rxjs/*.js'
}
});
After you are done with the configuration, you can import the operator as follows
import 'rxjs/operators/map';
And that's all. You'll have to do that with every operator. So I repeat, I recommend you to stick to alpha 47, like I told you in the comment. I will try to update the answer later with a plnkr.
If you want to use the Beta versions of Angular 2 or the future real production releases, then you need to do two things to get this to work.
1) You'll first need to update your System.config() configuration in index.html to include references to RxJS:
System.config({
map: {
'rxjs': 'node_modules/rxjs'
},
packages: {
'app': {defaultExtension: 'js'}, // assumes your code sites in `src/app`
'rxjs': {defaultExtension: 'js'}
}
});
System.import('app/app'); // this assumes your main file is `app.ts` and it sits in the `app` folder.
2) Then you can import map()
and other (or all) RxJS operators into your application with import
lines in your main file (app.ts in my case):
import 'rxjs/Rx'; // this would import all RxJS operators
If you rather import just map()
to keep the size down, you would do this instead:
import 'rxjs/add/operator/map';
You do not need to import these into each class file. Just import them into your main file to make them accessible to all your other components/services/directives.
You need to import the Rx map operator in your component like
import 'rxjs/add/operator/map';
Cheers!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With