Change detection does not work properly in Firefox

Question

Everything works in Chrome, but the bindings are never updated in Firefox.

The problem seems to be related to core-js and / or zone.js :

• https://github.com/AngularClass/angular2-webpack-starter/issues/709
• https://github.com/angular/angular/issues/9385

These problems have been fixed, but I am in the latest version of angular ( v2.4.9 ) and it does not work.

I import polyfill.ts , which:

 import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/set'; import 'core-js/es6/reflect'; import 'core-js/es7/reflect'; import 'zone.js/dist/zone'; 

In main.ts I tried importing zone.js before importing core-js , as suggested in one of the Github tickets, but this will not work.

Is there another polyfill that I need to include or link in my index.html ?

Edit # 1

It seems like it actually works 50% of the time in Firefox. If I refresh the page, it will display the page correctly at another time. When this does not work, absolutely no bindings work; events are not executed, {{ ... }} bindings are not displayed, etc.

Edit # 2

This error is actually caused by Polymer platform.js (polyfills for Polymer), which I link in my index.html. If I remove it, the bindings will start working again. I applied this Midi synth in my application and uses Polymer, which requires platform.js . There seems to be a conflict between platform.js and Angular2 in Firefox . Is there any way to resolve this conflict?

Answer 1

Since no solutions have yet been found, I resorted to running change detection manually (when the user agent is Firefox) at the moment.

Using:

 import { ApplicationRef } from '@angular/core'; ... constructor(private applicationRef: ApplicationRef) {} ... setInterval(() => this.applicationRef.tick(), 100); 

Answer 2

I was looking a bit.

Firefox seems to cache data, hence your problem.

Many people seem to annoy the development of Angular w / Firefox.

I found this code , it did not solve the guy's problem, but it should solve your problem:

 $rootScope.$on('$viewContentLoaded', function() { $templateCache.removeAll(); }); 

If not, I advise you to look back at the cache and Angular2