Почему Angular (5) событие HostListener работает в Chrome, а не IE?

Question

У меня есть текстовая директива "popover" / справка, которая работает в Chrome и IE11. Непосредственная проблема заключается в том, что IE, похоже, не запускает событие mouseenter, из-за которого текст справки становится видимым. Строка отладчика в этой функции никогда не достигается в IE11 (но в Chrome). Вот некоторый соответствующий код в директиве:

public  ngAfterViewInit(): void {
    this.createPopover();
}

@HostBinding('class.visible') private visible: boolean;

@HostListener('mouseenter')
onMouseEnter(): void {
    debugger;
    this.visible = true;
    this.detectElementInViewport();
}

public createPopover(): void {
    this.popover = this.renderer.createElement("div");
    this.popover.innerHTML = this.config.text;
    this.popover.className += 'popover-content';

    //if config as a position set it, otherwise default it to top
    if(this.config.position) {
        this.renderer.addClass(this.el.nativeElement, this.config.position);
    } else {
        this.renderer.addClass(this.el.nativeElement, 'top');
    }

    //add popover container class for styling purposes
    this.renderer.addClass(this.el.nativeElement, 'popover-container');
    this.renderer.appendChild(this.el.nativeElement, this.popover);
}

Проведенное мною исследование показало, что следующие строки в polyfills.ts важны для IE, и, как вы можете видеть из этой вставки, они не комментированы. Я также сделал рекомендуемую установку classlist.js.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import "core-js/es6/symbol";
import "core-js/es6/object";
import "core-js/es6/function";
import "core-js/es6/parse-int";
import "core-js/es6/parse-float";
import "core-js/es6/number";
import "core-js/es6/math";
import "core-js/es6/string";
import "core-js/es6/date";
import "core-js/es6/array";
import "core-js/es6/regexp";
import "core-js/es6/map";
import "core-js/es6/weak-map";
import "core-js/es6/set";

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import "classlist.js";  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import "core-js/es6/reflect";

Еще одна вещь, которую я включу, это сгенерированный HTML из инструментов разработчика в обоих браузерах. Выглядит идентично, за исключением порядка атрибутов на элементах:

<!-- Chrome -->

<help-text _ngcontent-c11="" _nghost-c12="" ng-reflect-question="[object Object]" ng-reflect-position="top">
    <!--bindings={
    "ng-reflect-ng-if": "<p>Here is a help text</p>"
}-->
    <div _ngcontent-c12="" class="float-right">
        <svg-icon _ngcontent-c12="" icon="icon-info" ng-reflect-icon="icon-info" ng-reflect-config="[object Object]" class="top popover-container">
            <!--bindings={
    "ng-reflect-ng-if": "true"
}--><svg class="icon" focusable="false">
                <use xlink:href="#icon-info"></use>
            </svg><div _ngcontent-c12="" class="popover-content">
                <p>Here is a help text</p>
            </div>
        </svg-icon>
    </div>
</help-text>

<!-- IE -->

<help-text _ngcontent-c11="" _nghost-c12="" ng-reflect-question="[object Object]" ng-reflect-position="top">
    <!--bindings={
    "ng-reflect-ng-if": "<p>Here is a help text</p>"
}-->
    <div class="float-right" _ngcontent-c12="">
        <svg-icon class="top popover-container" icon="icon-info" ng-reflect-icon="icon-info" _ngcontent-c12="" ng-reflect-config="[object Object]">
            <!--bindings={
    "ng-reflect-ng-if": "true"
}--><svg xmlns="http://www.w3.org/2000/svg" class="icon" focusable="false">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info" />
            </svg><div class="popover-content" _ngcontent-c12="">
                <p>Here is a help text</p>
            </div>
        </svg-icon>
    </div>
</help-text>

Answer 1

Несмотря на полифиллы, кажется, что IE все еще не может справиться с SVG. Перемещена директива в окружающий div. Это немного портит стиль, но, надеюсь, не станет нарушителем.

Старый:

<div class="float-right" *ngIf="question.helpText">
    <svg-icon icon="icon-info" [popover]="{ text: question.helpText, position: position }"></svg-icon>
</div>

Новое:

<div class="float-right no-margin no-padding" *ngIf="question.helpText" [popover]="{ text: question.helpText, position: position }">
    <svg-icon icon="icon-info"></svg-icon>
</div>