Firefox中未正确运行更改检测。

Question

在Chrome中，一切正常，但是在Firefox中，绑定从未更新。

看起来问题与core-js和/或zone.js有关：

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

这些问题已经得到解决，但我正在使用最新版本的Angular(v2.4.9), 但它无法正常工作。

我导入了polyfill.ts，其内容如下：

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';

在 main.ts 中，我尝试按照 Github 上的一张票建议的那样将 zone.js 导入放在 core-js 导入之前，但它并不起作用。

还有其他的 polyfill 需要我在 index.html 中包含或链接吗？

编辑 #1

看起来在 Firefox 中它实际上有 50% 的工作效果。如果我刷新页面，它会每隔一次正确地呈现页面。当它不起作用时，绑定完全不起作用；事件回调不执行，{{ ... }} 绑定不渲染等。

编辑 #2

这个bug实际上是由我在index.html中链接的Polymer的platform.js（Polymer的polyfills）引起的。如果我删除它，绑定就可以正常工作了。我在我的应用程序中实现了这个Midi synth，它使用了需要platform.js的Polymer。因此，在Firefox中，platform.js和Angular2之间存在冲突。有没有办法解决这个冲突？

- Maxime Dupré

---

我有一个基本的工作模板，仅导入core-js/es6，core-js/es7/reflect和zone.js/dist/zone。你能试试只用这个吗？ - ssougnez

@ssougnez 它不起作用 :/ - Maxime Dupré

你有一个能够说明这个问题的工作示例吗？ - yurzui

我尝试构建一个实时演示来重现这个问题，但失败了。我使用 https://github.com/AngularClass/angular2-webpack-starter 构建了它，并将 "platform.js,midi.js,waveshaper.js,synth.js" 插入其中。它运行良好。 - blackmiaool

Answer 1

我已经搜索了一些内容。

显然，Firefox会缓存数据，这就是你的问题所在。

很多人似乎对使用Firefox开发Angular感到烦恼。

我找到了这个 code，虽然它没有解决那个人的问题，但应该可以解决你的问题。

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

如果没有的话，我建议你查看缓存和Angular2。

- mlk

Answer 2

由于目前还没有找到解决方案，我现在只能手动触发更改检测（当用户代理为Firefox时）。

用法：

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

- Maxime Dupré

---

你没有提到如何检测用户代理为Firefox，我不知道该如何做，能否请您包含这部分内容？ - tatsu

这将导致变更检测每0.1秒运行一次，引起性能问题和许多问题。请不要这样做，它会破坏整个Angular变更检测范例。 - Marek