CODEWITHSUNDEEP
javascriptangulartypescriptweb-componentcustom-element
davidesp
davidesp

Reputation: 3972

Angular - Custom Elements not working on Firefox & Microsoft Edge & Internet Explorer

I tried this Angular Elements Demo

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:

"ReferenceError: customElements is not defined"

In the other hand, I tried on Google Chrome and !!! it works properly !!!

Maybe I need to include some Javascript file like a polyfill? I tried some of them recommended on internet with no success.

It also didn't work on Microsoft Edge and Internet Explorer.

Is there anyway to get the code running on Firefox without tweaking its default configuration?

I mean, on Firefox: about:config

dom.webcomponents.customelements.enabled: true
dom.webcomponents.shadowdom.enabled: true

I tried adding the following Javascript file:
https://github.com/webcomponents/webcomponentsjs/blob/v1/webcomponents-lite.js

as recommended here:
https://www.webcomponents.org/polyfills

but there was no success

Any idea on how to solve this?

Thanks for your help!

Upvotes: 1

Views: 6655

Answers (3)

hongbinc
hongbinc

Reputation: 1

Angular custom elements does not support IE. Here is a workaround to Customize Angular 4+ App Bootstrap and have it support with IE.

https://hongbinhb.blogspot.com/2019/02/how-to-deploy-two-or-more-angular-6.html

Upvotes: -1

Ulfius
Ulfius

Reputation: 617

I got my Custom Elements project to work in other browsers by removing encapsulation: ViewEncapsulation.Native

Upvotes: 3

Yerkon
Yerkon

Reputation: 4798

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...

Browser support for custom elements

Note: Custom elements are supported by default in Chrome and Opera. Firefox is very close; they are currently available if you set the preferences dom.webcomponents.enabled and dom.webcomponents.customelements.enabled to true. Firefox's implementation is planned to be enabled by default in version 60/61. Safari so far supports only autonomous custom elements, and Edge is working on an implementation as well.

Official Docs.

Upvotes: 1

Related Questions