Do Angular Элементы с `ViewEncapsulation.ShadowDom работают` в IE11

Question

Может ли Angular Elements создавать веб-компоненты, которые могут работать в IE11, когда для инкапсуляции представления установлено значение ShadowDom? Требует ли он добавления полифилов вручную?

В документации указано, что вам просто нужно ng add @angular/elements и скомпилировать проект в ES2015 и ES5. https://angular.io/guide/elements#browser -support-for-custom-elements

Я пробовал это с Angular 9, и он не загружается в IE11.

Я могу получить стандартный веб-компонент для загрузки в IE11, используя https://www.webcomponents.org/polyfills Само собой разумеется, что если Angular генерирует истинный пользовательский элемент, он также может работать.

Кто-нибудь у вас есть Angular Element, ShadowDOM, версия IE11 или она просто невозможна.

Спасибо за любую помощь

Answer 1

Поскольку Inte rnet Explorer не поддерживает ECMAScript 2015 (ES6), сначала нам нужно настроить приложение Angular 9 для сборки в режиме ES5. Затем установите polyfill для Angular Elements.

Пожалуйста, выполните следующие действия:

1. Создайте новый tsconfig tsconfig-es5.app. json рядом с tsconfig.app. json со следующим содержимым:

   {
       "extends": "./tsconfig.json",
       "compilerOptions": {
           "target": "es5" 
       }
   }
   

2. В angular. json добавьте два новых раздела конфигурации под сборкой и укажите цель для предоставьте новый tsconfig (узел es5, пожалуйста, не забудьте изменить «yourAppName» на имя вашего приложения).

   "build": {
       "builder": "@angular-devkit/build-angular:browser",
       "options": {
           ...
       },
       "configurations": {
       "production": {
           ...
       },
       "es5": {
           "tsConfig": "./tsconfig.es5.json"
       }
       }
   },
   "serve": {
       "builder": "@angular-devkit/build-angular:dev-server",
       "options": {
           ...
       },
       "configurations": {
       "production": {
       ...
       },
       "es5": {
           "browserTarget": "yourAppName:build:es5"
       }
       }
   },
   

3. Используйте эту команду для установки Angular Elements polyfill

   `ng add @angular/elements `
   

4. Запустите подачу с этой конфигурацией, используя следующую команду.

   `ng serve --configuration es5`
   

Edit :

Применительно к этой теме кажется, что элемент angular все еще не поддерживает Shadow DOM в браузере IE. Я предлагаю вам сообщить об этой проблеме на Angular forum и wi sh их, чтобы добавить поддержку Shadow DOM с элементом Angular в IE browser