8

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?

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?

Maxime Dupré
  • 5,319
  • 7
  • 38
  • 72
  • 1
    I have a basic working template that imports only `core-js/es6`, `core-js/es7/reflect` and `zone.js/dist/zone`. Can you try only with this please ? – ssougnez Mar 10 '17 at 18:36
  • @ssougnez It doesn't work :/ – Maxime Dupré Mar 10 '17 at 21:35
  • 1
    Do you have a working example that illustrates this issue? – yurzui Mar 13 '17 at 15:05
  • I tried to build a live demo to reproduce this, but failed. I built it with https://github.com/AngularClass/angular2-webpack-starter and insert "platform.js,midi.js,waveshaper.js,synth.js" into it. It works well. – blackmiaool Mar 18 '17 at 11:04

2 Answers2

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

Community
  • 1
  • 1
mlk
  • 388
  • 2
  • 10
0

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);
Maxime Dupré
  • 5,319
  • 7
  • 38
  • 72
  • you didn't mention how you did the detecting user agent as Firefox, which I don't know how to do and would like to know how to do, could you include that please? – tatsu Sep 14 '18 at 07:04
  • This will cause change detection to run every 0.1s, cause performance issues and lot of problems. Please do not do this, it ruins whole angular change detection paradigm – Marek Feb 27 '23 at 15:47