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: <http://kaloyanmanev.com/edo-button.js> and <http://kaloyanmanev.com/edo-input.js>

Both of the elements include their own polyfills, main, runtime, scripts, and styles concatenated as shown here: <https://blog.angulartraining.com/tutorial-how-to-create-custom-angular-elements-55aea29d80c5>

I am trying to include those in a HTML file like this:

```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <edo-button></edo-button>
  <edo-input></edo-input>
  <edo-button></edo-button>
</body>
<script src="http://kaloyanmanev.com/edo-button.js"></script>
<script src="http://kaloyanmanev.com/edo-input.js"></script>
</html>

```

Basically what happens is that I get 2 buttons but no input between them and of course that nasty error: 

```
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.)

```

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?

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.

So how to use those elements?

**\*EDIT**

I remove the polyfills from the bundle and I am including zone.js from a CDN. Still, there is another error going on:

```
ERROR DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "`edo-button`" has already been used with this registry

```