Рекомендуемый подход к использованию угловых элементов в Internet Explorer 11

Question

Требуется руководство по использованию 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 (но не в хром). При этом я смог увидеть элемент, но действия и обнаружение изменений не работают.

Я попытался использовать этот подход здесь , но затем начал сталкиваться с ошибками внедрения зависимостей. Пока одна проблема ведет к другой.

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

Answer 1

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

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

После подписки при успешном получении данных:

Шаблон:

SetTimeout:

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

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

Chrome:

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

Answer 2

Поддержка всех браузеров, вам нужно изменить polyfill.ts файл

1. Для поддержки Internet Explorer 9, 10 или 11 и Chrome <55 требуются все следующие полифилы </p>

   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 требуется следующее для API Reflect.

   import 'core-js/es6/reflect';

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

Answer 3

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

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

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

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

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