Я пытаюсь заставить Angular Elements работать в IE11.
Мой пользовательский элемент (простая кнопка) уже отображается, и привязка ввода работает, как и ожидалось, но привязка вывода не выполняется.
Нажатие на кнопку пользовательского элемента в IE 11 приводит к ошибке:
Объект не поддерживает это действие
Что я сделал до сих пор:
- Удалите polyfill для пользовательских элементов, которые были добавлены с
ng add @angular/elements (с IE не работал должным образом)
Обновить все пакеты Angular до 7.2.1
Добавьте следующие полифиллы к polyfills.ts:
import 'core-js/shim'
import '@webcomponents/shadydom/shadydom.min.js';
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';
Загрузите модуль вручную
ng build --output-hashing=none и упаковать все сгенерированные файлы в btn-element.js, который подается с http-server для локального тестирования (см. index.html ниже).
Мне не хватает определенного полифилла или я что-то не так делаю? Или это просто пока невозможно?
app.module.ts:
@NgModule({
declarations: [ ButtonComponent ],
imports: [ BrowserModule ],
entryComponents: [ ButtonComponent ]
})
export class AppModule {
constructor(private injector: Injector) {
const customBtn = createCustomElement(ButtonComponent, { injector });
customElements.define('app-btn', customBtn);
}
ngDoBootstrap() { }
}
button.component.ts:
@Component({
template: `<button (click)="handleClick()">{{ label }}</button>`,
encapsulation: ViewEncapsulation.ShadowDom
})
export class ButtonComponent {
@Input() label;
@Output() myaction = new EventEmitter<number>();
private clicksCt: number = 0;
constructor() { }
handleClick() {
this.clicksCt++;
this.myaction.emit(this.clicksCt);
}
}
index.html
<html lang="en">
<head>
[...]
<script type="text/javascript" src="btn-element.js"></script>
</head>
<body>
<app-btn label="Button Text"></app-btn>
<script>
var button = document.querySelector('app-btn');
button.addEventListener('myaction', function (event) {
console.log('action emitted: ' + event.detail); <!-- not working! -->
});
setTimeout(function () {
button.label = 'Async value change happened...' <!-- working! -->
}, 2000);
}
</script>
</body>
</html>
Я тоже безуспешно пытался <app-btn label="Button Text" (myaction)="test($event)"></app-btn>.
Редактировать: Минимальный пример
Кажется, это не работает в IE 11. Чтобы воспроизвести мой результат и увидеть то же самое, как если бы StackBitz запускался в Chrome, выполните следующие действия:
- Копирование на локальный компьютер
- пробег
npm install
- запустить
npm run build && npm run package:win (для Windows)
- служить
index.html и сгенерированным btn-element.js с http-server