Chart.js 3+, Firefox 68 and Angular: "ReferenceError: "ResizeObserver is not defined"

Question

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

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

因此，当我尝试在 Firefox 中加载我的图表时，出现以下错误：

ReferenceError: "ResizeObserver is not defined"

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

经过一些研究，我了解到我可以为 ResizeObserver 安装一个 polyfill，许多人建议如下：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 添加脚本。它很重，但很容易修复，如果需要，您可以轻松添加其他 polyfill。

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

Chart.js 3+, Firefox 68 and Angular: "ReferenceError: "ResizeObserver is not defined"

Chart.js 3+, Firefox 68 and Angular: "ReferenceError: "ResizeObserver is not defined"

polyfills

chart.js

angular