i trying setup rest api via google cloud functions send emails can consumed angular app hosted firebase. problem cannot angular code trigger google cloud function. can explain going wrong?
server-side google cloud function code
i have google cloud function within functions/index.js:
// index.js const functions = require('firebase-functions'); const sg = require('sendgrid')( process.env.sendgrid_api_key || '<my-api-key-placed-here>' ); exports.sendmail = functions.https.onrequest((req, res) => { sendmail(req.body); res.send("mail sent!"); }) function sendmail(formdata) { const mailrequest = sg.emptyrequest({ method: 'post', path: '/v3/mail/send', body: { personalizations: [{ to: [{ email: 'my.email@gmail.com' }], subject: 'greenwich test' }], from: { email: 'noreply@email-app.firebaseapp.com' }, content: [{ type: 'text/plain', value: 'hello joe! can hear me! line still getting through?' }] } }); sg.api(mailrequest, function (error, response) { if (error) { console.log('mail not sent; see error message below.'); } else { console.log('mail sent successfully!'); } console.log(response); }); }which can trigger in browser pasting in address bar:
https://us-central1-email-app.cloudfunctions.net/sendmail
i email within 5 minutes when entering in browser. however, cannot angular trigger function.
client-side angular code
below client-side code. contact-form.service.ts contains submit button's function.
<!-- contact-form.component.html --> <form [formgroup]="formservice.contactform" (ngsubmit)="formservice.onsubmitform()"> <input type="text" formcontrolname="userfirstname"> <label class="first-name-footer">first name</label> <input type="text" formcontrolname="userlastname"> <label class="last-name-footer">last name</label> <button type="submit">submit</button> </form>// contact-form.component.ts import { component } '@angular/core'; import { contactformservice } './contact-form.service'; @component({ selector: 'contact-form', templateurl: './contact-form.component.html', styleurls: ['./contact-content.component.css'], providers: [contactformservice] }) export class contactformcomponent { constructor(public formservice: contactformservice) { formservice.buildform(); } }// contact-form.service.ts import { injectable } '@angular/core'; import { formgroup, formbuilder, formcontrol, validators } '@angular/forms'; import { http } '@angular/http'; @injectable() export class contactformservice { constructor(public formbuilder: formbuilder, public http: http) { } contactform: formgroup; formsubmitted: boolean = false; mailurl = "https://us-central1-email-app.cloudfunctions.net/sendmail"; buildform() { this.contactform = this.formbuilder.group({ userfirstname: this.formbuilder.control(null, validators.required), userlastname: this.formbuilder.control(null, validators.required) }); } onsubmitform() { console.log(this.contactform.value); this.formsubmitted = true; this.http.post(this.mailurl, this.contactform.value); this.contactform.reset(); } }when click submit button, google cloud function fails trigger, this.contactform.value correctly display in console.
so in conclusion: how angular submit button trigger google cloud function? function fires when use url in browser, cannot angular app trigger same function.
you need subscribe http requests else call not raised
onsubmitform() { console.log(this.contactform.value); this.formsubmitted = true; /////////////////////////////////////////////////////////////////// this.http.post(this.mailurl, this.contactform.value).subscribe(); /////////////////////////////////////////////////////////////////// this.contactform.reset(); } 
Comments
Post a Comment