如何使我的angular 4代码与firefox兼容?

问题描述

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

I have tested my angular 4 code in chrome browser but now when I open it in firefox, it is giving the below error

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.我得到的另一个解决方案是使用polyfills来避免此错误，但是我的index.html文件(在dist文件夹中生成)已经有了polyfills文件.

I have used ViewEncapsulation.Native in my code but I am not able to remove this ViewEncapsulation.Native. The other solution I have got is to use polyfills to avoid this error, but my index.html file (generated in dist folder) already have polyfills file.

请让我知道如何在Firefox中解决此问题.

Please let me know how to resolve this issue in firefox.

推荐答案

如果您正在使用(ViewEncapsulation.Native)封装本机阴影DOM，则必须知道它仅在chrome中可用，使用仿真或将其集成 https://www.webcomponents.org/polyfills/用于与其他浏览器的Web组件兼容性，不要以为你有其他选择您可以通过这种方式使用polyfills:

if you are using (ViewEncapsulation.Native) encapsulation native shadow DOM, you have to know that it is available only in chrome, use emulated or you can integrate this https://www.webcomponents.org/polyfills/ for web component compatibility with other browsers, i don't think that you have other optionsyou can use the polyfills that way :

  npm install @webcomponents/webcomponentsjs

，您可以使用webcomponents-sd-ce来自定义元素和阴影DOM:将其添加到您的polyfills.ts

and you can use the webcomponents-sd-ce to custom elements and shadow DOM:add it to your polyfills.ts

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

这篇关于如何使我的angular 4代码与firefox兼容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！