Question

我已经在chrome浏览器中测试了我的角度4代码但现在当我在firefox中打开它时，它会给出以下错误

ERROR TypeError: hostEl.createShadowRoot is not a function
Stack trace:
ShadowDomRenderer@http://localhost:4200/vendor.bundle.js:166030:28
../../../platform-browser/@angular/platform-browser.es5.js/DomRendererFactory2.prototype.createRenderer@http://localhost:4200/vendor.bundle.js:165743:24
../../../platform-browser/@angular/platform-browser/animations.es5.js/AnimationRendererFactory.prototype.createRenderer@http://localhost:4200/vendor.bundle.js:167745:41
../../../core/@angular/core.es5.js/</DebugRendererFactory2.prototype.createRenderer@http://localhost:4200/vendor.bundle.js:127912:35
createComponentView@http://localhost:4200/vendor.bundle.js:126511:24
callWithDebugContext@http://localhost:4200/vendor.bundle.js:127880:39
debugCreateComponentView@http://localhost:4200/vendor.bundle.js:127237:12
createViewNodes@http://localhost:4200/vendor.bundle.js:126569:37
createRootView@http://localhost:4200/vendor.bundle.js:126494:5
callWithDebugContext@http://localhost:4200/vendor.bundle.js:127880:39
debugCreateRootView@http://localhost:4200/vendor.bundle.js:127197:12

我在我的代码中使用了ViewEncapsulation.Native，但我无法删除此ViewEncapsulation.Native。我得到的另一个解决方案是使用polyfill来避免此错误，但我的index.html文件（在dist文件夹中生成）已经有polyfills文件。

请告诉我如何在firefox中解决此问题。

Answer 1

如果您正在使用（ViewEncapsulation.Native）封装原生阴影DOM，您必须知道它仅在chrome中可用，使用模拟或您可以集成此https://www.webcomponents.org/polyfills/以便与其他浏览器兼容Web组件，不要以为你有别的选择你可以这样使用polyfills：

  npm install @webcomponents/webcomponentsjs

你可以使用webcomponents-sd-ce来自定义元素和shadow DOM：将它添加到你的polyfills.ts

import '@webcomponents/webcomponentsjs/webcomponents-sd-ce.js';

Answer 2

有效的解决方案来自链接

https://github.com/angular/angular/issues/6531

即。从所有打字稿文件中删除ViewEncapsulation.None或ViewEncapsulation.Native。

并将任何css文件添加到index.html文件中。

使用polyfill的其他解决方案无法解决问题，并开始从jquery-2.1.3.min.js文件中获取相同的错误。

如何让我的angular 4代码与firefox兼容？

2 个答案: