Skip to content
This repository was archived by the owner on Feb 26, 2024. It is now read-only.
This repository was 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

@aabluedragon

Description

@aabluedragon

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions