Рекомендуемый подход к использованию Angular Elements с Internet Explorer 11
Ищу руководство по использованию Angular Elements, которое будет работать в других браузерах, особенно с Internet Explore 11.
До сих пор следуя рекомендуемому соглашению об использовании ngDoBootstrap для определения пользовательского элемента (Angular Element). Он работает только в Chrome, но когда дело доходит до IE, тег элемента виден в DOM, но ничего не отображается в браузере. Архитектура следующая: Компоненты, сервисы, каналы... все они разделены на модули.
Затем с помощью customElements.define() определяется родительский компонент. Как только это применяется в DOM, такие действия, как обнаружение изменений событий щелчка... очень хорошо работают в Chrome (текущая версия: 72.0.3626.121), но в IE ничего не отображается. Я потратил несколько часов на изучение различных подходов к работе в IE. Я просмотрел некоторые вопросы и ответы, представленные здесь, особенно с использованием полифиллов, но безуспешно.
Затем я попытался определить по одному компоненту за раз в порядке родительский > дочерний, но снова столкнулся с разными проблемами, когда IE начал выдавать ошибки сценария, особенно связанные с zone.js и vendor.js (но не в chrome). При этом я смог увидеть элемент, но действия и обнаружение изменений не работают.
Я попробовал этот подход здесь, но затем начал сталкиваться с ошибками внедрения зависимостей. Пока одна проблема влечет за собой другую.
Причиной выбора использования AngularElements является попытка интегрировать его с существующим проектом, написанным в другом технологическом стеке.
Ответы 3
Из официальный документ мы могли видеть, что:
Недавно разработанная функция веб-платформы пользовательских элементов в настоящее время изначально поддерживается в ряде браузеров. Ожидается или планируется поддержка в других браузерах.
Я также пытаюсь протестировать официальный документ, содержащий демоверсию, он хорошо работает в браузере Chrome, но не работает в браузере IE/Edge.
В браузере IE будет отображаться синтаксическая ошибка, например:
Итак, как говорится в официальном документе, они работают над реализацией пользовательского элемента для поддержки браузера IE/Edge. Вы также можете сообщить об этой проблеме Угловые проблемы.
Он поддерживает все браузеры, вам нужно изменить polyfill.ts файл
Для поддержки Internet Explorer 9, 10 или 11 и Chrome <55 требуются все следующие полифилы.
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 и IE11 требуется следующее для поддержки NgClass в элементах SVG.
import 'classlist.js'Для IE10 и IE11 требуется следующее для Reflect API.
import 'core-js/es6/reflect';
поэтому перейдите в свой файл src/pollyfill.ts, чтобы включить эти зависимости Internet Explorer.
если какая-либо зависимость отсутствует, вы можете использовать их. и работает нормально.
Вы можете узнать больше о поддержке браузера angular здесь
В дополнение к добавлению полифиллов мне также нужно было объявить Zone_enable_cross_context_check. Затем я смог увидеть содержимое шаблона родительского компонента, отображаемое в DOM. С этого момента обнаружение изменений не работает должным образом для всех других компонентов, особенно в шаблоне. ngIf не работает, потому что шаблон никогда не обновляется. Я не знаю, почему это не работает, если у меня есть все полифилы и стратегия elements-zone используется для определения пользовательского элемента.
Ниже приведены несколько изображений, демонстрирующих это:
После подписки при успешном получении данных:
Шаблон:
Установить время ожидания:
Как вы можете видеть, обнаружение изменений в IE работает не так, как я ожидаю. В этом сценарии он работает только один раз, когда элемент (компонент) загружается, но для других событий это не так. Я попытался использовать changeDetectorRef для обнаружения изменений там, где это необходимо. Это не увенчалось успехом.
Скриншоты взяты из Internet Explorer 11. Ниже показан один из Chrome, показывающий, что обнаружение изменений работает, как и ожидалось, и в результате контент также успешно загружается.
Хром:
В заключение я скажу, что Angular Elements хорошо работают в Chrome, но не в IE, и если вы хотите, чтобы они работали в IE, вам нужно потратить много времени на поиск решений, почему это не работает. работай. Это время лучше использовать для работы с другой библиотекой/фреймворком.