I've been incorporating Mailchimp integration into an Angular application. For using it in pure JS, I retrieved the code from the embedded form on the Mailchimp site:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://gmail.us10.list-manage.com/subscribe/post?u=aaa7182511d7bd278fb9d510d&id=01681f1b55" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_aaa7182511d7bd278fb9d510d_01681f1b55" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->The above code functions correctly without any issues. However, when attempting to include the same functionality in an Angular application, there are some challenges:
Reference Source: https://gist.github.com/inorganik/846c52550db97454646054270e4f1270
Here is a snippet of the implementation:
app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { HttpClient, HttpParams } from '@angular/common/http';
interface MailChimpResponse {
result: string;
msg: string;
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
submitted = false;
mailChimpEndpoint =
'https://gmail.us10.list-manage.com/subscribe/post?u=aaa7182511d7bd278fb9d510d&id=01681f1b55';
error = '';
constructor(private http: HttpClient) {}
userForm: FormGroup;
ngOnInit(): void {
this.userForm = new FormGroup({
email: new FormControl('', [
Validators.required,
Validators.email,
]),
});
}
subscribeEmail() {
this.error = '';
if (this.userForm.controls.email.status === 'VALID') {
const params = new HttpParams()
.set('EMAIL', this.userForm.controls.email.value)
console.log(params);
const mailChimpUrl = this.mailChimpEndpoint + params.toString();
this.http.jsonp<MailChimpResponse>(mailChimpUrl, 'callback').subscribe(response => {
console.log('response ', response)
if (response.result && response.result !== 'error') {
this.submitted = true;
}
else {
this.error = response.msg;
}
}, error => {
console.error(error);
this.error = 'Sorry, an error occurred.';
});
}
}
}
View Working StackBlitz here..
The issue arises when implementing the above code in an Angular application, resulting in a 404 error.
Please refer to the network/console tab in the developer tool for more information on the 404 error.
I also noticed that the parameter passed in the URL does not reflect in the query parameters of the network call.
Kindly assist me in making the API URL work seamlessly in the Angular application by clicking the subscribe button.
Take a look at the StackBlitz provided: https://stackblitz.com/edit/angular-jsonp-gfzdr1