Typescript Angular2 - complaining about missing types

Question

I have the following code:

  var headers = new Headers();
                            // headers.append('Content-Type', 'application/json');
                            headers.append('Content-Type', 'application/x-www-form-urlencoded');
                            this.http.post(
                                'http://192.168.1.45:3000/testrestapi',
                                {headers: headers}
                            ).map((res => res.json())
        .subscribe(data => {
          // we've got back the raw data, now generate the core schedule data
          // and save the data for later reference
          this.data = data;
      console.log('Friends Provider was a success!');
      console.log(JSON.stringify(data));
          resolve(this.data);
        },
    (err)=>{
        console.log('Error in Friends Provider!');
    },
    ()=>{
           console.log('Friends Provider network call has ended!');
    }
        )

       )
   });

The code compiles fine without error, but I get the following errors in my ide:

I am following this docs: https://angular.io/docs/js/latest/api/http/Http-class.html . It shows how to use HTTP for GET, but not for POST. It seems I am missing the type for my headers which I am unsure what to put here as well it complains about the type for the subscribe method and again I am unsure what to put here as I am following the docs and it does not seem to have anything different?

compiles fine without error and then you show a picture of compile errors? You import Http twice like the error says, for starters. Read the errors and fix the simplest ones at least first. — Sami Kuhmonen
– Sami Kuhmonen, Commented Mar 21, 2016 at 5:36

Evan Wieland · Accepted Answer · 2017-09-15 19:02:13Z

1

You have imported Http module 2 times in 2nd and 3rd lines of your code, one of them is redundant.

API for http post is:

post(url: string, body: string, options?: RequestOptionsArgs) : Observable<Response>

in https://angular.io/api/http/Http

it expects a JSON.stringified body as the second parameter but you are pushing the header options which should be the third parameter.

I also suggest using

headers.set('Content-Type', 'application/json');

instead of append.

Also you are missing the paranthesis in subscribe after data.

.subscribe(
    (data) => {
        console.log('Do something with data here \n',data);
    }
);

edited Sep 15, 2017 at 19:02

Evan Wieland

1,5181 gold badge22 silver badges36 bronze badges

answered Mar 21, 2016 at 8:36

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2924127 Over a year ago

Thanks! Is there a reason why set is better than append?

eko Over a year ago

Because if you use the method that your http request and header.append is in more than once, you will append the header 2 times :)

micronyks · Accepted Answer · 2016-03-21 05:19:58Z

 var headers = new Headers();
                            // headers.append('Content-Type', 'application/json');
       headers.append('Content-Type', 'application/x-www-form-urlencoded');
       this.http.post(
                       'http://192.168.1.45:3000/testrestapi',
                                {headers: headers}
                      )
        .map((res => res.json())
        .subscribe(data => 
         {

          this.data = data;
          console.log('Friends Provider was a success!');
          console.log(JSON.stringify(data));
          //resolve(this.data);
          },
        (err)=>{
        console.log('Error in Friends Provider!');
        },
        ()=>{
           console.log('Friends Provider network call has ended!');
        }

       );

basarat · Accepted Answer · 2016-03-21 05:20:08Z

0

The code compiles fine without error,

Just because you get valid JavaScript doesn't mean that it compiled without error. This is actually a TypeScript feature (see why typescript).

The errors you are seeing in the error are the compiler errrors

answered Mar 21, 2016 at 5:20

basarat

278k60 gold badges475 silver badges528 bronze badges

Collectives™ on Stack Overflow

Typescript Angular2 - complaining about missing types

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related