图表.js 3+、Firefox 68 和 Angular："ReferenceError： "ResizeObserver is not defined"

Question

我有一个使用Chart.js+的Angular应用程序，它需要在Firefox 68中运行。

Chart.js+在其代码中使用ResizeObserver，这是特定Firefox版本不支持的。

所以，当我尝试在Firefox中加载我的图表时，我得到以下错误:

ReferenceError: "ResizeObserver is not defined">

在其他浏览器或更新版本的Firefox中可以正常工作。

经过一些研究，我读到我可以为ResizeObserver安装一个填料，许多人建议如下:https://github.com/juggle/resize-observer

所以我通过输入npm i @juggle/resize-observer将它安装在我的项目中，然后将它添加到polyfill.ts文件中:

import '@juggle/resize-observer';
import 'zone.js/dist/zone'; 

但是错误仍然存在。我错过什么了吗?

提前感谢。

Answer 1

看看其他人是如何修复它的，似乎你仍然需要在使用chart.js做任何事情之前将其注册到浏览器，以便它可以使用它:

import {ResizeObserver as ResizeObserverPolyfill} from '@juggle/resize-observer';
if (typeof window !== 'undefined') {
window.ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
}

来自:https://github.com/jenkins-infra/plugin-site/pull/714

Answer 2

对旧浏览器的支持已经被取消了一段时间，所以你需要一个polyfill来保持chartJS的工作。如果你的浏览器很旧，无法导入，你可以从polyfill.io中添加一个脚本。这是相当沉重的，但这将是一个容易的修复，你可以很容易地添加其他多边形，如果你需要。

<script type="application/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver"></script>