title: Angular Elements Error: Zone.js has detected that ZoneAwarePromise
body: <p>I've been testing out Angular Elements. Basically I created 2 angular elements: a simple button and a simple input. You can check them out here: <a href="http://kaloyanmanev.com/edo-button.js" rel="nofollow noreferrer">http://kaloyanmanev.com/edo-button.js</a> and <a href="http://kaloyanmanev.com/edo-input.js" rel="nofollow noreferrer">http://kaloyanmanev.com/edo-input.js</a></p>
  
  <p>Both of the elements include their own polyfills, main, runtime, scripts, and styles concatenated as shown here: <a href="https://blog.angulartraining.com/tutorial-how-to-create-custom-angular-elements-55aea29d80c5" rel="nofollow noreferrer">https://blog.angulartraining.com/tutorial-how-to-create-custom-angular-elements-55aea29d80c5</a></p>
  
  <p>I am trying to include those in a HTML file like this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;edo-button&gt;&lt;/edo-button&gt;
    &lt;edo-input&gt;&lt;/edo-input&gt;
    &lt;edo-button&gt;&lt;/edo-button&gt;
  &lt;/body&gt;
  &lt;script src="http://kaloyanmanev.com/edo-button.js"&gt;&lt;/script&gt;
  &lt;script src="http://kaloyanmanev.com/edo-input.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Basically what happens is that I get 2 buttons but no input between them and of course that nasty error: </p>
  
  <pre><code>Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
  The most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise API is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)
  </code></pre>
  
  <p>When I use the scripts separately it works... If I include them both it doesn't. I researched a bit but couldn't find any solution. Seriously there is no way using 2 angular elements in one page?</p>
  
  <p>Most likely the issue is caused by zone.js that Angular uses. I tried removing it from the polyfills of the elements but then I got an error that zone.js is required and none of the elements worked.</p>
  
  <p>So how to use those elements?</p>
  
  <p><strong>*EDIT</strong></p>
  
  <p>I remove the polyfills from the bundle and I am including zone.js from a CDN. Still, there is another error going on:</p>
  
  <pre><code>ERROR DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "`edo-button`" has already been used with this registry
  </code></pre>