When I added the following code to main.ts, CustomEvent is not added to window object correctly. If I add CustomEvent using the JavaScript console it does. Incidentally, the issue occurs when I click on a button that triggers my custom event (called: "choice-click").

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
}

CustomEvent.prototype = (<any>window).Event.prototype;

(<any>window).CustomEvent = CustomEvent;

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

Below are two screen shots. First one, main.ts adds CustomEvent. Second one, I add CustomEvent using the JavaScript console.

Note: $.isFunction returns "true" when I use the JavaScript console

When I added the following code to main.ts, CustomEvent is not added to window object correctly. If I add CustomEvent using the JavaScript console it does. Incidentally, the issue occurs when I click on a button that triggers my custom event (called: "choice-click").

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
}

CustomEvent.prototype = (<any>window).Event.prototype;

(<any>window).CustomEvent = CustomEvent;

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

Below are two screen shots. First one, main.ts adds CustomEvent. Second one, I add CustomEvent using the JavaScript console.

Note: $.isFunction returns "true" when I use the JavaScript console

• javascript
• angular
• typescript
• events

• I know there are polyfills available but I have the same issue using them. – Michael Niño Commented Jun 28, 2018 at 22:37
• It looks like you're using IE? Maybe Edge? Please clarify which browser you're experiencing this in. Also, the Angular documentation lists some required polyfills... – Heretic Monkey Commented Jun 28, 2018 at 23:22
• Yes, Internet Explorer 11. Edge works fine. – Michael Niño Commented Jun 28, 2018 at 23:57
• The function in main.ts was copied from a polyfill. It doesn't work when in main.ts but does work when I add CustomEvent using JavaScript console. Of course, I replace (<any>window) with window when in console because that is Typescript – Michael Niño Commented Jun 28, 2018 at 23:58
• You should take a look at Angular 4 app not working on IE11 and edge – Heretic Monkey Commented Jun 29, 2018 at 12:32

2 Answers 2

If you are using Angular CLI you can (as an alternative) install the "custom event polyfill" with npm i custom-event-polyfill and add it to your polyfills.ts: import 'custom-event-polyfill';

Haven't any clue when I had to place the polyfill in line and after Angular but it works.

<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script>
<script type="text/javascript">
    function CustomEvent ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent( 'CustomEvent' );
        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
    }

    CustomEvent.prototype = window.Event.prototype;

    window.CustomEvent = CustomEvent;
</script>