Angular-自定义元素在Firefox＆Microsoft Edge＆Internet Explorer上不起作用
[英]Angular - Custom Elements not working on Firefox & Microsoft Edge & Internet Explorer
问题描述
I tried this Angular Elements Demo 
我尝试了这个Angular Elements演示
I downloaded, installed, and built that demo on local. 我在本地下载，安装并构建了该演示。
Then, used the following code: 然后，使用以下代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular Elements Demo</title>
</head>
<body>
<hello-world name="Anna"></hello-world>
<script src="dist/main.js"></script>
<script>
const helloCp = document.querySelector('hello-world');
helloCp.addEventListener('hi', (data) => {
console.log(data.detail);
});
setTimeout(() => {
helloCp.setAttribute('name', 'Marc');
}, 1000);
</script>
</body>
</html>
Then I tried on Mozilla Firefox but getting the following error: 然后我尝试在Mozilla Firefox但出现以下错误：
"ReferenceError: customElements is not defined"
In the other hand, I tried on Google Chrome and !!! 另一方面，我尝试使用Google Chrome和!!! it works properly !!! 它正常工作！
Maybe I need to include some Javascript file like a polyfill ? 也许我需要包括诸如polyfill类的Javascript文件？ I tried some of them recommended on internet with no success. 我尝试了其中一些在互联网上推荐的方法，但没有成功。
It also didn't work on Microsoft Edge and Internet Explorer . 它也不能在Microsoft Edge和Internet Explorer 。
Is there anyway to get the code running on Firefox without tweaking its default configuration? 是否可以在不调整默认配置的情况下使代码在Firefox上运行？
I mean, on Firefox: about:config 我的意思是，在Firefox上： about:config
dom.webcomponents.customelements.enabled: true
dom.webcomponents.shadowdom.enabled: true
I tried adding the following Javascript file: 我尝试添加以下Javascript文件：
https://github.com/webcomponents/webcomponentsjs/blob/v1/webcomponents-lite.js https://github.com/webcomponents/webcomponentsjs/blob/v1/webcomponents-lite.js
as recommended here: 如此处推荐：
https://www.webcomponents.org/polyfills https://www.webcomponents.org/polyfills
but there was no success 但是没有成功
Any idea on how to solve this? 关于如何解决这个问题的任何想法？
Thanks for your help! 谢谢你的帮助！
3 个解决方案
解决方案1
2 2018-08-16 19:05:56
通过删除encapsulation: ViewEncapsulation.Native我使Custom Elements项目可以在其他浏览器中工作encapsulation: ViewEncapsulation.Native
解决方案2
1 2018-05-13 05:52:49
Custom elements are a Web Platform feature currently supported by Chrome, Opera, and Safari, and available in other browsers through polyfills (see Browser Support).
So, you should add polyfills to work with Firefox, Edge... 因此，您应该添加polyfills以与Firefox， Edge ...
Browser support for custom elements 浏览器对自定义元素的支持
Note: Custom elements are supported by default in Chrome and Opera.
解决方案3
-1 2019-02-03 20:23:57
Angular custom elements does not support IE. 角度自定义元素不支持IE。 Here is a workaround to Customize Angular 4+ App Bootstrap and have it support with IE. 这是自定义Angular 4+ App Bootstrap并支持IE的解决方法。
https://hongbinhb.blogspot.com/2019/02/how-to-deploy-two-or-more-angular-6.html https://hongbinhb.blogspot.com/2019/02/how-to-deploy-two-or-more-angular-6.html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.