title: Angular 'Uncaught error: Zone already loaded'
body: <p><a href="https://i.stack.imgur.com/dJUIp.png" rel="nofollow noreferrer">Errors in console</a></p>
  
  <p>I am using a Mailchimp Ajax Submit jQuery Plugin to submit an email using a PHP file on a contact form in a website template I imported to my Angular app. When I go to enter my details on the form and submit, the page refreshes on the POST request.</p>
  
  <p>The console then throws the following two errors.</p>
  
  <p><strong>[Deprecation] Synchronous XMLHttpRequest</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>[Deprecation] Synchronous XMLHttpRequest 
  on the main thread is deprecated because of its detrimental effects to the 
  end user's experience. For more help, check https://xhr.spec.whatwg.org/.
  (anonymous) @ polyfills.c5fb4ffca9c225046d5a.js:1
  polyfills.c5fb4ffca9c225046d5a.js:1 
  </code></pre>
  
  <p><strong>Uncaught Error: Zone already loaded.</strong></p>
  
  <pre class="lang-python prettyprint-override"><code>Uncaught Error: Zone already loaded.
  at polyfills.c5fb4ffca9c225046d5a.js:1
  at polyfills.c5fb4ffca9c225046d5a.js:1
  at Object.0TWp (polyfills.c5fb4ffca9c225046d5a.js:1)
  at p (&lt;anonymous&gt;:1:507)
  at Object.hN/g (polyfills.c5fb4ffca9c225046d5a.js:1)
  at p (&lt;anonymous&gt;:1:507)
  at Object.5 (polyfills.c5fb4ffca9c225046d5a.js:1)
  at p (&lt;anonymous&gt;:1:507)
  at n (&lt;anonymous&gt;:1:376)
  at e (&lt;anonymous&gt;:1:248)
  </code></pre>
  
  <p>I am finding it difficult to understand the cause of the problem. I have tried to prevent the page from refreshing on submit using <code>&lt;button type="button"&gt;</code>, this does not do a page refresh however it does not call a POST request as expected.
  I have also tried un-commenting <code>import 'zone.js/dist/zone';</code> in <strong>polyfills.ts</strong></p>
  
  <p>I wish to accomplish sending the email on the same page without a refresh in the Angular app unless there is a better alternative. (I am learning)</p>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>var clContactForm = function() {
  
      /* local validation */
      $('#contactForm').validate({
  
          /* submit via ajax */
          submitHandler: function(form) {
  
              var sLoader = $('.submit-loader');
  
              $.ajax({
  
                  type: "POST",
                  url: "inc/sendEmail.php",
                  data: $(form).serialize(),
                  beforeSend: function() { 
  
                      sLoader.slideDown("slow");
  
                  },
                  success: function(msg) {
  
                      // Message was sent
                      if (msg == 'OK') {
                          sLoader.slideUp("slow"); 
                          $('.message-warning').fadeOut();
                          $('#contactForm').fadeOut();
                          $('.message-success').fadeIn();
                      }
                      // There was an error
                      else {
                          sLoader.slideUp("slow"); 
                          $('.message-warning').html(msg);
                          $('.message-warning').slideDown("slow");
                      }
  
                  },
                  error: function() {
  
                      sLoader.slideUp("slow"); 
                      $('.message-warning').html("Something went wrong. Please try again.");
                      $('.message-warning').slideDown("slow");
  
                  }
  
              });
          }
  
      });
  };
  </code></pre>
  
  <p><strong>sendEmail.php</strong></p>
  
  <pre><code>&lt;?php
  
  // Replace this with your own email address
  $siteOwnersEmail = 'my-email';
  
  
  if($_POST) {
  
  $name = trim(stripslashes($_POST['contactName']));
  $email = trim(stripslashes($_POST['contactEmail']));
  $subject = trim(stripslashes($_POST['contactSubject']));
  $contact_message = trim(stripslashes($_POST['contactMessage']));
  
  // Check Name
  if (strlen($name) &lt; 2) {
      $error['name'] = "Please enter your name.";
  }
  // Check Email
  if (!preg_match('/^[a-z0-9&amp;\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
      $error['email'] = "Please enter a valid email address.";
  }
  // Check Message
  if (strlen($contact_message) &lt; 15) {
      $error['message'] = "Please enter your message. It should have at least 15 characters.";
  }
  // Subject
  if ($subject == '') { $subject = "Contact Form Submission"; }
  
  
  // Set Message
  $message .= "Email from: " . $name . "&lt;br /&gt;";
  $message .= "Email address: " . $email . "&lt;br /&gt;";
  $message .= "Message: &lt;br /&gt;";
  $message .= $contact_message;
  $message .= "&lt;br /&gt; ----- &lt;br /&gt; This email was sent from your site's contact form. &lt;br /&gt;";
  
  // Set From: header
  $from =  $name . " &lt;" . $email . "&gt;";
  
  // Email Headers
  $headers = "From: " . $from . "\r\n";
  $headers .= "Reply-To: ". $email . "\r\n";
  $headers .= "MIME-Version: 1.0\r\n";
  $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
  
  
  if (!$error) {
  
      ini_set("sendmail_from", $siteOwnersEmail); // for windows server
      $mail = mail($siteOwnersEmail, $subject, $message, $headers);
  
      if ($mail) { echo "OK"; }
      else { echo "Something went wrong. Please try again."; }
  
  } # end if - no validation error
  
  else {
  
      $response = (isset($error['name'])) ? $error['name'] . "&lt;br /&gt; \n" : null;
      $response .= (isset($error['email'])) ? $error['email'] . "&lt;br /&gt; \n" : null;
      $response .= (isset($error['message'])) ? $error['message'] . "&lt;br /&gt;" : 
  null;
  
          echo $response;
  
      } # end if - there was a validation error
  
  }
  
  ?&gt;
  </code></pre>