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:
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?
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.
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?
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
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);