Angular 5: JavaScript CustomEvent (Polyfill)

Question

Когда я добавил следующий код в main.ts, CustomEvent не был правильно добавлен в объект окна. Если я добавлю CustomEvent, используя консоль JavaScript, это произойдет. Между прочим, проблема возникает, когда я нажимаю кнопку, которая запускает мое пользовательское событие (называемое «выбор-щелчок»).

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

Ниже приведены два снимка экрана. Первый, main.ts добавляет CustomEvent. Во-вторых, я добавляю CustomEvent с помощью консоли JavaScript.

Примечание: $ .isFunction возвращает "true", когда я использую консоль JavaScript

Answer 1

Если вы используете Angular CLI, вы можете (в качестве альтернативы) установить «polyfill пользовательского события» с помощью npm i custom-event-polyfill и добавить его в ваши polyfills.ts: import 'custom-event-polyfill';

Answer 2

Понятия не имею, когда мне пришлось разместить полифилл в линию и после Angular, но это работает.

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