Проблема с поддержкой Angular Element в chrome и IE11 одновременно - PullRequest
Новая
       60

Проблема с поддержкой Angular Element в chrome и IE11 одновременно

0 голосов
/ 19 февраля 2019

Я играю с Angular Elements и пытаюсь добиться максимальной совместимости браузера.Однако я, похоже, зашел в тупик, так как, когда я добавляю полизаполнение IE для Shadow DOM, он ломает элемент в chrome.

Первоначально у меня была ошибка 'Не удалось создать элемент HTML' , поэтому я изменил «target» в моем файле tsconfig.json на es2015 / es6.

tsconfig.json 

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Component 

// @dynamic
@Component({
    selector: 'flexybox-cardmanagement',
    templateUrl: './card-management.component.html',
    styleUrls: ['./card-management.component.scss'],
    encapsulation: ViewEncapsulation.ShadowDom
})

Изменение цели, как оказалось, сломало IE, поскольку es2015 / es6 + не поддерживается.Так что мне довелось найти адаптер custom-elements-es5 в пакете @webcomponents, который оборачивает ES5 для обеспечения необходимой функциональности ES6 браузерам, которым это необходимо.И затем мне также пришлось добавить поддержку пользовательских элементов.

polyfills.ts 

/*****************************************************************************************
 * APPLICATION IMPORTS
 */
 import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
 import '@webcomponents/custom-elements/custom-elements.min';

На данный момент это работает в Chrome, но я получаю следующую ошибкув IE

SCRIPT438: Объект не поддерживает свойство или метод 'attachShadow'

Поэтому я попытался добавить polyfill для Shadow DOM, добавив следующее в мои polyfills.ts: 

import '@webcomponents/shadydom';

Что, похоже, решает проблему в IE, но теперь выдает следующую ошибку в chrome:

Uncaught TypeError: Невозможно прочитать свойство 'defineProperties' из undefined

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Если я правильно понимаю, проблема связана с тем, что IE11 не поддерживает классы и что в Chrome должны быть классы для веб-компонентов.Существует обертка, которая позволяет вам иметь один пакет и затем оборачивать функциональный подход в класс для chrome, но я бы рекомендовал вместо этого иметь два отдельных пакета, а не компилировать в es5 для браузеров, которые понимают классы.

0 голосов
/ 20 февраля 2019

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

Я думаю, что вы сделали почти все правильно, я прошел те же самые шаги, но я использовал различные полифилы, так что, возможно, вы хотите попробовать эти:

angular.json 

"scripts": [
  // removed polyfill `document-register-element.js` that may be included with ng add @angular/elements
]

polyfills.ts 

import '@webcomponents/shadydom/shadydom.min.js';
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

Чтобы проверить, если этоможет быть проблема с версией:

package.json (соответствующие части) 

{
  "dependencies": {
    "@angular/**": "~7.2.1",
    "@webcomponents/custom-elements": "^1.2.1",
    "@webcomponents/shadydom": "^1.4.2",
    "core-js": "^2.5.4",
  }
}

Информация: в этой конфигурации пользовательский элемент работает в Chrome, Firefox и IE11для меня, но я не получаю выходные привязки для работы в IE11.Я не знаю, почему это вызвано, если вы заинтересованы в этом и нашли решение, вы можете предоставить его здесь .

Общий совет дляIE11:
Не ваша проблема сейчас, но если IE11 выдает одну из своих различных ошибок, мне очень помогло использование import 'core-js/shim' в polyfills.ts.Это импортирует все прокладки сразу, чтобы проверить, пропускает ли IE11 один из них.Если это так, вы можете заняться этим дальше, если не знаете, что вам нужно искать в другом месте.

Полифилл Angular Elements
Если вы хотите остаться с полифилом, используемым Angular,Вы можете попробовать использовать версию 1.8.1.Я где-то читал (но не могу вспомнить, где), что более поздние версии вызывают проблемы в IE на данный момент.

...