angular2 http.post method throws typeerror{} exception

Question

I tried to change the existing angularjs library to angular2 for my need. http.post method in the below code throws TypeError {} as exception. Someone please help as i am stuck on this.

login() {
  return new Promise((resolve, reject) => {
    if(typeof jsSHA !== "undefined") {
      var signatureObj = (new OauthUtility()).createSignature("POST", this.magentoOptions.baseUrl+"/oauth/initiate", this.oauthObject, {oauth_callback: "http://localhost/callback"}, this.magentoOptions.clientSecret, null);                                   
      let headersInitiate = new Headers();
      headersInitiate.append('Authorization',signatureObj.authorization_header);
      headersInitiate.append('Content-Type','application/x-www-form-urlencoded');
      let url = this.magentoOptions.baseUrl + "/oauth/initiate";
      let callback = "oauth_callback=http://localhost/callback";

      try{
        this.http.post(url, callback,{headers: headersInitiate})
         .subscribe(
          (result) => {
          console.log("i am inside");
          var rParameters = (result).split("&");
                            .....
      }
      catch(Exception){
        console.log(Exception)
      }

score 1 · Accepted Answer · answered Jan 28 '16 at 11:56

You should try something like that:

var signatureObj = (new OauthUtility()).createSignature("POST", 
     this.magentoOptions.baseUrl+"/oauth/initiate", this.oauthObject,
     {oauth_callback: "http://localhost/callback"},
     this.magentoOptions.clientSecret, null);    let headersInitiate = new Headers();

headersInitiate.append('Authorization',
          signatureObj.authorization_header);
headersInitiate.append('Content-Type',
          'application/x-www-form-urlencoded');
let url = this.magentoOptions.baseUrl + "/oauth/initiate";

let payload = ' ... ';
this.http.post(url, payload,{headers: headersInitiate})
    .subscribe(
      (result) => {
        console.log("i am inside");
        var rParameters = (result).split("&");
        (...)
      });

Here are the comments I would have on your code:

The second parameter of the post method should be a string corresponding to the payload not a callback. I see from your headers that you want to send url-encoded form, so you need to create it by your own
The try catch isn't necessary since executing an HTTP is asynchronous and errors can be "catched" within the second parameter (another callback) of the subscribe method.
You don't need at all a promise. For HTTP, Angular2 uses observables under the hood. They target asynchronous processing as well.

After fixing all of this, I think that you won't have error anymore...

Hope it helps you, Thierry

Thanks @Thierry for your reply. I have passed parameters through variable callback in my POST method. let callback = "oauth_callback=http://localhost/callback"; Sorry that i missed it in my previous code. I didnt get my errors catched in the second parameter of subscribe method. Thats the reason i have included try catch. May be i will try excluding promises. — AishApp, Jan 29 '16 at 06:50
I tried by removing promise and i am facing issue. The reason for the issue is http is undefined. I have included @Injectable as well, but still the issue remains same. Please help — AishApp, Jan 29 '16 at 12:01
Did you add `HTTP_PROVIDERS` within the second parameter of the `bootstrap` function? — Thierry Templier, Jan 29 '16 at 12:02

score 0 · Answer 2 · answered Feb 01 '16 at 04:46

0

I found to stuck even after proceeding with the above all steps. The complete solution is as follows. Remove try catch block and promise as suggested by Thierry. Use dependency injection of http inside the constructor as follows to define http.

import {Http,HTTP_PROVIDERS,Headers} from 'angular2/http';
import {Injector} from "angular2/core";
 constructor() {

        var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]);
        this.http = injector.get(Http);
}

answered Feb 01 '16 at 04:46

AishApp

4,142
2
29
33

Why don't you inject `Http` from constructor? This can be done when registering HTTP_PROVIDERS in the `bootstrap` function or in components that use the `http` object. This way you don't need to explicitly refer the `Injector`... – Thierry Templier Feb 01 '16 at 10:47
I am creating anguar2 library for my ionic2 application. Since this acts as a service, Http injected in constructor didnt work. It remains undefined. Thats the reason for error in my code. When i inject with injector, it works fine. – AishApp Feb 01 '16 at 10:57
Did you add the `@Injectable` decorator to your service? – Thierry Templier Feb 01 '16 at 10:58
Yes i did. But it didnt work. As well i tried using @Inject(HTTP) http: Http in my constructor. I have no idea about why it didnt work. – AishApp Feb 01 '16 at 11:21
I should ;-) Did you use this: `bootstrap(AppComponent, [ HTTP_PROVIDERS ]);`? – Thierry Templier Feb 01 '16 at 11:24
Okay I see. You should declare HTTP providers into the `providers` attribute of your app component. See these links: http://stackoverflow.com/questions/34760422/how-to-user-angular-2-service-with-ionic-2 and https://github.com/barbatus/ionic2-meteor/blob/master/bootstrap.ts#L39. I think the first one is enough... If you want to have more details about how hierarchical injectors of Angular2 works, you could have a look at this answer: http://stackoverflow.com/questions/34804298/whats-the-best-way-to-inject-one-service-into-another-in-angular-2-beta/34807397 – Thierry Templier Feb 01 '16 at 11:33

angular2 http.post method throws typeerror{} exception

2 Answers2