jwplayer 在 Angular Elements 中表现不佳答案

【问题标题】：jwplayer doesn't play well in Angular Elementsjwplayer 在 Angular Elements 中表现不佳
【发布时间】：2018-08-10 02:25:24
【问题描述】：

我有这个带有嵌入式 jwplayer 的 Angular 组件，它运行良好。当我尝试使用 Angular Elements 从中创建自定义元素或尝试使用“封装：ViewEncapsulation.Native”时，jwplayer 将无法初始化。 jwplayer 已加载，我可以在窗口对象中看到它。

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

【问题讨论】：

标签： jwplayer shadow-dom custom-element

【解决方案1】：

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

另一方面，您可以使用 ViewEncapsulation.Native 将其作为 Angular 元素/自定义元素提供。为了完成这项工作，我不得不对项目进行一些修改：

删除选择器 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

【讨论】：

实际上这并不完全奏效，脚本以静默方式失败，因此它从未生成 js 文件，它是我已注释掉 ViewEncapsulation.Native 的旧文件。按照上面的说明，它在设置“target”时在构建时抛出这些错误：“es2015” ./src/main.ts 中的错误找不到模块：错误：无法解析'./app/app.module.ngfactory ' in '/angular-playground/projects/wu-player/src'
完全忽略了这一点。问题是否已解决，或者我还能以某种方式提供帮助吗？