Angular 5: JavaScript CustomEvent (Polyfill)

Question

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

I know there are polyfills available but I have the same issue using them. — Michael Niño, Jun 28 '18 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](https://angular.io/guide/browser-support#polyfill-libs)... — Heretic Monkey, Jun 28 '18 at 23:22
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 `(window)` with `window` when in console because that is Typescript — Michael Niño, Jun 28 '18 at 23:58
You should take a look at [Angular 4 app not working on IE11 and edge](https://stackoverflow.com/q/46291102) — Heretic Monkey, Jun 29 '18 at 12:32
The resolution required that I place CustomEvent *after* Angular 5 script bundling — Michael Niño, Jul 14 '18 at 13:54

score 6 · Answer 1 · answered Jul 17 '18 at 16:19

6

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';

answered Jul 17 '18 at 16:19

mare

402
6
14

The resolution required that I place CustomEvent after Angular 5 script bundling – – Michael Niño Jul 23 '18 at 03:55
I did this approach and added it to the component. Getting an empty object back. I can see everything in my node_modules. Wondering if there is another file. – Winnemucca Jun 25 '19 at 21:39

score 3 · Answer 2 · answered Jun 29 '18 at 00:38

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>

Angular 5: JavaScript CustomEvent (Polyfill)

2 Answers2