Рекомендуемый подход к использованию 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 является попытка интегрировать его с существующим проектом, написанным в другом технологическом стеке.


angular polyfills internet-explorer-11 angular-elements
person Chief    schedule 22.03.2019    source источник
comment
ты решил все свои проблемы? Поддерживают ли элементы angular 10 IE11?   -  person daniel    schedule 22.09.2020
comment
Нет, я отказался от подхода. вам лучше написать свои собственные элементы, но это будет зависеть от того, чего вы хотите достичь @daniel   -  person Chief    schedule 27.10.2020

Ответы (3)


arrow_upward
6
arrow_downward

Помимо добавления полифиллов, мне также нужно было объявить Zone_enable_cross_context_check. Затем я смог увидеть содержимое шаблона родительского компонента, отображаемое в DOM. С этого момента обнаружение изменений не работает должным образом для всех других компонентов, особенно в шаблоне. ngIf не работает, потому что шаблон никогда не обновляется. Я не знаю, почему это не работает, если у меня есть все полифилы и стратегия elements-zone используется для определения пользовательского элемента.

Ниже приведены несколько изображений, демонстрирующих это:

После подписки, когда данные будут успешно получены: введите здесь описание изображения

Шаблон:

введите описание изображения здесь

Установить время ожидания:

введите описание изображения здесь

Как вы можете видеть, обнаружение изменений в IE работает не так, как я ожидаю. В этом сценарии он работает только один раз, когда элемент (компонент) загружается, но для других событий это не так. Я попытался использовать changeDetectorRef для обнаружения изменений там, где это необходимо. Это не увенчалось успехом.

Скриншоты взяты из Internet Explorer 11. Ниже показан один из Chrome, показывающий, что обнаружение изменений работает, как и ожидалось, и в результате контент также успешно загружается.

Хром:

введите описание изображения здесь

В заключение я скажу, что Angular Elements хорошо работают в Chrome, но в IE они не работают, и если вы хотите, чтобы они работали в IE, вам нужно потратить много времени на поиск решений, почему это не работает. Работа. Это время лучше использовать для работы с другой библиотекой/фреймворком.

person Chief    schedule 25.03.2019

arrow_upward
0
arrow_downward

Из официального документа видно, что:

Недавно разработанная функция веб-платформы пользовательских элементов в настоящее время изначально поддерживается в ряде браузеров. Ожидается или планируется поддержка в других браузерах.

введите здесь описание изображения

Я также пытаюсь протестировать официальный документ, содержащий демоверсию, он хорошо работает в браузере Chrome, но не работает в браузере IE/Edge.

В браузере IE будет отображаться синтаксическая ошибка, например:

введите здесь описание изображения

Итак, как говорится в официальном документе, они работают над реализацией пользовательского элемента для поддержки браузера IE/Edge. Вы также можете сообщить об этой проблеме в проблемы Angular.

person Zhi Lv    schedule 25.03.2019

arrow_upward
0
arrow_downward

Его поддерживают все браузеры, вам нужно изменить polyfill.ts файл

  1. Для поддержки 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';

  2. Для IE10 и IE11 требуется следующее для поддержки NgClass в элементах SVG.

    import 'classlist.js'

  3. Для IE10 и IE11 требуется следующее для Reflect API.

    import 'core-js/es6/reflect';

поэтому перейдите в свой файл src/pollyfill.ts и включите эти зависимости Internet Explorer. если какая-либо зависимость отсутствует, вы можете использовать их. и работает нормально.
Подробнее о поддержке браузера angular можно узнать здесь.

person Bhagwat Tupe    schedule 25.03.2019
comment
Вышеупомянутые полифиллы уже существуют. Я сузил его до проблем, возникающих при обнаружении изменений. Кроме формы добавления рекомендуемых полифилов. Я понял, что мне нужно пойти дальше и добавить другие реализации для Zone_enable_cross_context_check. Это предотвратило возникновение конкретной ошибки при загрузке элемента. С этого момента кажется, что обнаружение изменений не работает должным образом в ie. Вскоре последует ответ - person Chief; 25.03.2019
comment
Вы уверены, что обнаружение изменений не работает в ie? - person Bhagwat Tupe; 25.03.2019