Skip to content
This repository has been archived by the owner on Feb 26, 2024. It is now read-only.

Using webcomponentsjs polyfill makes RxJS callbacks run outside NgZone on Safari #671

Closed
aabluedragon opened this issue Mar 11, 2017 · 3 comments · Fixed by #672
Closed

Comments

@aabluedragon
Copy link

aabluedragon commented Mar 11, 2017

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
Including the webcomponentsjs polyfill versions <=0.7.24 (for usage with Polymer1 paper-elements) makes RxJS callbacks (e.g subscribe, map) execute outside NgZone.

Expected behavior
RxJS callbacks should execute inside NgZone.

Minimal reproduction of the problem with instructions

  1. Install webcomponentsjs polyfill version <=0.7.24 (issue does not reproduce on 1.0.0-rc-6, but it can't be used with Polymer1).
  2. Add script in index.html: <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  3. Bootstrap angular2 after the WebComponentsReady event.
window.addEventListener('WebComponentsReady', () => {
  // bootstrap angular2 here
});
  1. Execute RxJS post, notice the callback is executed outside NgZone:
this.http.post('http://jsonplaceholder.typicode.com', {}).subscribe((res)=>{
      NgZone.assertInAngularZone(); // fail
    },(err)=>{
      NgZone.assertInAngularZone(); // fail
    });

I've prepared a sample project on github to demonstrate this issue: https://github.com/aabluedragon/safari-ngzone-issue

Also posted on stackoverflow: http://stackoverflow.com/q/42700937/230637

What is the motivation / use case for changing the behavior?
Usage with Polymer1 (for polymer elements, such as paper-elements).

Please tell us about your environment:
macOS Sierra 10.12.3, Webstorm, npm, Polymer1.

  • Angular version: 2.4.9

  • Browser:
    Works fine on Chrome, issue happens in Safari only.

  • Language:
    Typescript

  • Node (for AoT issues): node --version = v7.7.1

@JiaLiPassion
Copy link
Collaborator

JiaLiPassion commented Mar 12, 2017

@aabluedragon , thank you for posting the issue, and the reproduce repo. the reason seems to be in Safari, XMLHttpRequest define addEventListener in XMLHttpRequestEventTarget prototype without using EventTarget's.
I will try to fix it.

@JiaLiPassion
Copy link
Collaborator

dist.zip
@aabluedragon , you can try this one.

@aabluedragon
Copy link
Author

@JiaLiPassion Thanks, it works as expected 👍

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants