Repository navigation
Bindings won't refresh in Firefox (presumably caused by core-js/es6/es6-promise) #709
Description
- 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
- NgZone.onStable and NgZone.onUnstable do not occur after the XHR/fetch completes.
- 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
Activity
PatrickJS commentedon Jun 19, 2016
thanks, fixed via c1d8fd5
PatrickJS commentedon Jun 21, 2016
cc @zloirock there seems to be a problem with the
core-jspromise polyfill within firefox or a conflict betweenzone.js,core-js, and firefox promisezloirock commentedon Jun 21, 2016
Very strange. Can you write a full reproducible example with all environment? I'll play with it when I'll have some time.
DavideViolante commentedon 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 commentedon Jul 18, 2016
@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 commentedon Jul 18, 2016
@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 commentedon Nov 23, 2016
Is this issue solved? How to use es6-promise if do not import it?
PatrickJS commentedon Nov 23, 2016
I think zone.js provides it's own promise polyfill so manually removing
core-js's is what I've been doing