Change detection isn't run properly in Firefox

Question

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

It seems like the problem has to do with core-js and/or zone.js:

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

These issues are fixed, but I'm at the latest version of angular (v2.4.9) and it doesn't work.

I import polyfill.ts, which is:

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 putting the zone.js import before the core-js imports as suggested in one of the Github tickets, but it does not work.

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

Edit #1

It seems like it's actually working 50% of the time in Firefox. If I refresh the page, it will render the page correctly every other time. When it doesn't work, absolutely no bindings are working; event callbacks are not executed, {{ ... }} bindings are not rendered, etc.

Edit #2

This bug is actually caused by Polymer's platform.js (polyfills for Polymer) which I am linking in my index.html. If I remove it, the bindings start to work again. I have implemented this Midi synth in my application and it uses Polymer, which requires platform.js. So it seems that there is a conflict between platform.js and Angular2 in Firefox. Is there a way I can resolve this conflict?

Answer 1

I have been searching a little.

Apparently, Firefox caches data, hence your problem.

A lot of people seem to be annoyed developing Angular w/ Firefox.

I found this code, it didn't solve the guy's problem but it should solve yours:

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

If not, I advise you looking around cache and Angular2

Answer 2

Since no solutions have been found yet, I have resorted to triggering the change detections manually (when user agent is Firefox) for now.

Usage:

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