1

I get the following error when I try to implement headers

enter image description here

The type" Headers "has no properties in common with the type" RequestOptionsArgs "

I was reading that apparently now we should use HttpHeaders but I can not implement it without avoiding the error

import { Component, OnInit } from '@angular/core';
import { Http, Headers, Response, URLSearchParams } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'app-contacto',
  templateUrl: './contacto.component.html',
  styleUrls: ['./contacto.component.scss']
})
export class ContactoComponent implements OnInit {

  constructor(private http: Http ) { }

  ngOnInit() {
  }

  sendMessage(){
   
    let url = `https://your-cloud-function-url/function`
    let params: URLSearchParams = new URLSearchParams();
    let headers = new Headers({'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });

    params.set('to', 'user@example.com');
    params.set('from', 'you@yoursupercoolapp.com');
    params.set('subject', 'test-email');
    params.set('content', 'Hello World');

    return this.http.post(url, params, headers)
      .toPromise()
      .then(res => {
        console.log(res)
      })
      .catch(err => {
        console.log(err)
      })

  }

}
Paco Zevallos
  • 2,165
  • 7
  • 30
  • 68
  • Possible duplicate of [Type 'Headers' has no properties in common with type 'RequestOptionsArgs'?](https://stackoverflow.com/questions/44728775/type-headers-has-no-properties-in-common-with-type-requestoptionsargs) – Daniel W Strimpel Mar 30 '18 at 18:04
  • If I saw it but for more than I modify, it keeps generating the error, I do not understand why – Paco Zevallos Mar 30 '18 at 18:26
  • Did you follow the instructions on the top answer for **Pre 4.3 / Http**? – Daniel W Strimpel Mar 30 '18 at 18:37
  • I have added the answer to your code, so it will be easier for you to understand. please take a look and see if it works for you. – BeeBee8 Mar 30 '18 at 18:51

2 Answers2

2

There are already few answers related to this.

Difference between HTTP and HTTPClient in angular 4?

Type 'Headers' has no properties in common with type 'RequestOptionsArgs'?

In your case (pre 4.3 angular version), working solution would be like below.

import {Headers, Http, RequestOptions} from "@angular/http";

...

let headers = new Headers({'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
let options = new RequestOptions({headers: headers});

...

return this.http.post(url, params, options)

...
BeeBee8
  • 2,944
  • 1
  • 27
  • 39
  • This avoids the error in the code but it generates an error in console when executing the function: Response to preflight request does not pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource I'm following this tutorial: https://angularfirebase.com/lessons/angular4-transactional-email-with-cloud-functions-and-sendgrid/ (#Trigger from a Component) – Paco Zevallos Mar 30 '18 at 21:11
  • @PacoZevallos maybe you are doing this from localhost, try using CORS plugin for chrome. – BeeBee8 Mar 31 '18 at 17:17
0

As per the official docs:

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*'
  }
};

return this.http.post(url, params, httpOptions)
    ...

This only works with the newer HttpClient implementation, which you should be able to easily switch to. Just import it like this:

import { HttpClient, HttpErrorResponse } from '@angular/common/http';

and change your constructor's signature to this:

constructor(private http: HttpClient) {}
Jeto
  • 14,596
  • 2
  • 32
  • 46
  • 2
    The OP appears to be using the old `Http` (@angular/http) and not the new `HttpClient` (@angular/common/http) – Daniel W Strimpel Mar 30 '18 at 18:07
  • @DanielWStrimpel Good catch. Updated my post accordingly. Thanks! – Jeto Mar 30 '18 at 18:21
  • This avoids the error in the code but it generates an error in console when executing the function: Response to preflight request does not pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource I'm following this tutorial: https://angularfirebase.com/lessons/angular4-transactional-email-with-cloud-functions-and-sendgrid/ (#Trigger from a Component) – Paco Zevallos Mar 30 '18 at 21:15
  • 1
    @PacoZevallos The `Access-Control-Allow-Origin` must be set on the server side, not on client side (I just copied them from your post). There seems to be a [more recent version of your tutorial](https://angularfirebase.com/lessons/angular4-transactional-email-with-cloud-functions-and-sendgrid/). And [here's an answer](https://stackoverflow.com/a/29548846/965834) that might give you a clue, but there's plenty of other online resources on it (e.g. [this one](https://www.html5rocks.com/en/tutorials/cors/)). – Jeto Mar 30 '18 at 21:21