Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bindings won't refresh in Firefox (presumably caused by core-js/es6/es6-promise) #709

Closed
borisvasilenko opened this issue Jun 18, 2016 · 8 comments

Comments

@borisvasilenko
Copy link

  • I'm submitting a ...
    [X] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository
  • What is the current behavior?

Bindings on the page won't refresh after the XHR/fetch completes.

  • the steps to reproduce

Call fetch and try to display something when the loading complete. Please, see an example here:
borisvasilenko@eaaf794

Browser: Firefox.

  • What is the expected behavior?

The page should display the text: 'THIS SHOULD BE DISPLAYED'

  • Please tell us about your environment:
    • Angular version: 2.0.0-rc.1, 2.0.0-rc.2
    • Browser: [Firefox 39.0]
  • Other information

We've updated our project to the angular2-webpack-starter with Angular RC1.
What I've found out by trial and error:

In Firefox

  1. NgZone.onStable and NgZone.onUnstable do not occur after the XHR/fetch completes.
  2. I've managed to work around this issue by excluding core-js/es6/promise. So, I suggest that this polyfill breaks angular.

You can see my fix here: borisvasilenko@da2ac79

@PatrickJS
Copy link
Owner

thanks, fixed via c1d8fd5

@PatrickJS
Copy link
Owner

PatrickJS commented Jun 21, 2016

cc @zloirock there seems to be a problem with the core-js promise polyfill within firefox or a conflict between zone.js, core-js, and firefox promise

@zloirock
Copy link

Very strange. Can you write a full reproducible example with all environment? I'll play with it when I'll have some time.

@DavideViolante
Copy link

DavideViolante commented Jun 22, 2016

@zloirock I experienced this bug too with Chrome and Angular rc.3. If I import 'core-js/es6/promise' the page doesn't load all the bindings. There are no errors in console at all. All others files in core-js/es6 folder can be imported without any issue. To reproduce it easly create a very basic project using webpack (you can clone my MEAN stack project) and into vendor.ts try to write "import 'core-js/es6';" or all the files individually, including promise.

Edit: seems solved.

@UnsupportedCallbackException

@borisvasilenko learn some angular before start coding.
If you need data from server best approach to use Http service from '@angular/http'. Because it has required change detection code.

But if you really need to use async code that located outside of angular app, you need to wrap it with NgZone.run(yourCode) or finalize it with ChangeDetectorRef.detectChanges()

http://stackoverflow.com/questions/34827334/triggering-angular2-change-detection-manually

http://stackoverflow.com/questions/32768854/using-promises-and-zones-in-angular2

Everything worked perfectly for me with import 'core-js/es6'; and now I have a bug and need manually change polyfills.ts to previous version

@borisvasilenko
Copy link
Author

@commfort

Thanks, i know about NgZone.run and detectChanges.
but,
http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html
"Angular [2] allows us to use native APIs directly."
So I believe, that you're not right, and that the NgZone.run or detectChanges are unnecessary.

I also believe, that your work-around is worse than removing the 'core-js/es6' import, because it pollutes the project code with unnecessary calls like NgZone.run or detectChanges.

And yes, I know about @angular/http, but issue is not about @angular/http. I still need to use raw fetch API at some places. And I need to use it directly, without NgZone.run or other work-arounds.

@linweiwei123
Copy link

linweiwei123 commented Nov 23, 2016

Is this issue solved? How to use es6-promise if do not import it?
image

@PatrickJS
Copy link
Owner

I think zone.js provides it's own promise polyfill so manually removing core-js's is what I've been doing

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

No branches or pull requests

6 participants