title: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten in custom element
body: <p>I created a small app using angular custom elements feature (element.js), imported that element.js file into another angular(parent) app in index.html, in development server (ng serve) element feature works fine, but in production mode (ng build --prod) getting this error in element.js file.</p>
  
  <p>@angular/core": "~8.1.3",
  @angular/elements": "^8.1.3"</p>
  
  <pre><code>element (angular custom element code)
  polyfills.ts
  
  import 'zone.js/dist/zone';  // Included with Angular CLI.
  import "@webcomponents/custom-elements/src/native-shim";
  import "@webcomponents/custom-elements/custom-elements.min";
  
  app.module.ts
  export class AppModule {
    constructor(private injector: Injector) { }
  
    ngDoBootstrap() {
  
      const el = createCustomElement(NotificationElementComponent, {
        injector: this.injector
      });
      // using built in the browser to create your own custome element name
      customElements.define('test-card', el);
    }
  }
  
  
  </code></pre>
  
  <pre><code>angular (parent app)
  index.html
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;body&gt;
      &lt;app-root&gt;&lt;/app-root&gt;
      &lt;script src="./assets/elements.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <pre><code>polyfills.ts
  
  import 'core-js/es6/reflect';
  import 'core-js/es7/reflect';
  import 'zone.js/dist/zone';  // Included with Angular CLI.
  
  (window as any).global = window;
  </code></pre>
  
  <pre><code>
  app.component.html
   &lt;test-card [data]="{id:"foo"}"&gt;&lt;/test-card&gt;
  
  </code></pre>
  
  <p>Error Zone.js has detected that ZoneAwarePromise <code>(window|global).Promise</code> has been overwritten. 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.).</p>