Chart.js 3+、Firefox 68 和 Angular：“ReferenceError：“ResizeObserver 未定义”答案

【问题标题】：Chart.js 3+, Firefox 68 and Angular: "ReferenceError: "ResizeObserver is not defined"Chart.js 3+、Firefox 68 和 Angular：“ReferenceError：“ResizeObserver 未定义”
【发布时间】：2021-10-08 04:52:43
【问题描述】：

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

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

所以，当我尝试在 Firefox 中加载图表时，我收到以下错误：

ReferenceError: "ResizeObserver 未定义"

在其他浏览器或较新版本的 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';

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

提前致谢。

【问题讨论】：

标签： angular chart.js polyfills

【解决方案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

【讨论】：

我在 iOS 上的 React.js 应用程序也遇到了这个问题，这救了我。谢谢！

【解决方案2】：

对旧浏览器的支持在不久前就被放弃了，所以你需要一个 polyfill 来保持 chartJS 的工作。如果您的浏览器非常旧并且无法导入，您可以从polyfill.io 添加一个脚本。它很重，但很容易修复，如果需要，您可以轻松添加其他 polyfill。

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

【讨论】：