Angular Elements Output not working in IE11

问题

I try to get Angular Elements working in IE11. My custom element (simple button) is already displayed and the input binding is working as expected, but the output binding doesn't.

A click on my custom element button in IE 11 results in the error:

The object doesn't support this action

What I have done so far:

Remove polyfill for custom elements that was added with ng add @angular/elements (didn't work properly with IE)
Update all Angular packages to 7.2.1
Add the following polyfillls to polyfills.ts:

import 'core-js/shim'
import '@webcomponents/shadydom/shadydom.min.js';
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

Bootstrap the module manually
ng build --output-hashing=none and package all generated files into btn-element.js which is served with http-server for local testing (see index.html below).

Do I miss a specific polyfill or am I doing something wrong? Or is it just not possible yet?

app.module.ts:

@NgModule({
  declarations: [ ButtonComponent ],
  imports: [ BrowserModule ],
  entryComponents: [ ButtonComponent ]
})
export class AppModule {
  constructor(private injector: Injector) {
    const customBtn = createCustomElement(ButtonComponent, { injector });
    customElements.define('app-btn', customBtn);
  }
  ngDoBootstrap() { }
}

button.component.ts:

@Component({
  template: `<button (click)="handleClick()">{{ label }}</button>`,
  encapsulation: ViewEncapsulation.ShadowDom
})
export class ButtonComponent {
  @Input() label;
  @Output() myaction = new EventEmitter<number>();
  private clicksCt: number = 0;

  constructor() { }

  handleClick() {
    this.clicksCt++;
    this.myaction.emit(this.clicksCt);
  }
}

index.html

<html lang="en">
<head>  
  [...]
  <script type="text/javascript" src="btn-element.js"></script>
</head>
<body>
<app-btn label="Button Text"></app-btn>

<script>
    var button = document.querySelector('app-btn');
    button.addEventListener('myaction', function (event) {
         console.log('action emitted: ' + event.detail);          <!-- not working! -->
     });
     setTimeout(function () {
         button.label = 'Async value change happened...'   <!-- working! -->
     }, 2000);
    }
</script>
</body>
</html>

I also tried <app-btn label="Button Text" (myaction)="test($event)"></app-btn> without success.

Edit: Minimal Example

It seems not to be wokring in IE 11. To reproduce my reslut and see the same as if the StackBitz is run in Chrome, follow those steps:

Copy to local machine
run npm install
run npm run build && npm run package:win (for Windows)
serve the index.html and the generated btn-element.js with http-server

回答1:

From the official document we could see that:

The recently-developed custom elements Web Platform feature is currently supported natively in a number of browsers. Support is pending or planned in other browsers.

I also try to test the official document contain's demo, it works well in the Chrome browser, not working in IE/Edge browser.

In the IE browser it will show the syntax error, like this:

So, as the official document said, they are working on implementing custom element to support IE/Edge browser.

来源：https://stackoverflow.com/questions/54293615/angular-elements-output-not-working-in-ie11

标签

angular

internet-explorer-11

custom-element

angular-elements