jwplayer在Angular Elements中表现不佳

Question

我有这个带有嵌入式jwplayer的Angular组件，可以正常工作。 当我尝试使用Angular Elements从中创建自定义元素或尝试使用“ encapsulation：ViewEncapsulation.Native”时，jwplayer将无法初始化。 jwplayer已加载，我可以在window对象中看到它。

core.js:1604 ERROR TypeError: jwplayer(id).setup is not a function
    at t.setupPlayer (jw-player.js.pre-build-optimizer.js:70)
    at HTMLScriptElement.S (zone.js:1188)
    at t.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4034)
    at t.invokeTask (zone.js:420)
    at e.runTask (zone.js:188)
    at e.invokeTask [as invoke] (zone.js:496)
    at k (zone.js:1540)
    at HTMLScriptElement._ (zone.js:1566)  

Answer 1

原因是已加载库（https://content.jwplatform.com/libraries/6gLLM4B1.js）。它使用document.getElementById(...)查找视频元素，有时也使用document.body。但是，视频元素是JwPlayerComponent，如果您在根组件上激活了Shadow DOM，则该元素将隐藏在Shadow DOM中。

另一方面，您可以使用ViewEncapsulation.Native将其提供为Angular Element / Custom Element。为了使这项工作有效，我必须对项目进行一些修改：

• 删除选择器b / c，它与自定义元素的名称（// selector: 'wu-player-element'）冲突
• 还删除模块（//bootstrap: [AppComponent]）的引导程序部分
• 修改tsconfig.app.json：添加"target": "es2015", b / c自定义元素不起作用，TypeScript将类降级到ES5

如果仍然需要ES5，则可以使用polyfill（native-shim.js），请参阅：https://www.softwarearchitekt.at/post/2018/07/13/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.aspx