Chrome 80 聚合物类型错误：无法读取 null 的属性“__proto__”

Question

My Chrome is updated to Chrome 80 version.Then My site doesnot work gives below error:
My app use Angular 5, 

我的 bower.json： "webcomponentsjs": "webcomponents/webcomponentsjs#0.7.0",

" vendor.bundle.js:65175 ERROR 错误：未捕获（在承诺中）：TypeError：无法读取属性 'proto' of null TypeError：无法读取 null 的属性“proto” 在 s (webcomponents.min.js:11) 在 s (webcomponents.min.js:11) 在 s (webcomponents.min.js:11) 在 s (webcomponents.min.js:11) 在 T (webcomponents.min.js:11) 在 Function.C [as wrap] (webcomponents.min.js:11) 在新的 DomApi (polymer-mini.html.js:645) 在 Function.DomApi.factory (polymer-mini.html.js:739) 在 Function.Polymer.dom (polymer-mini.html.js:751) 在 l.toggleClass (polymer.html.js:1191) 在 resolvePromise (polyfills.bundle.js:5300) 在 resolvePromise (polyfills.bundle.js:5257) 在 polyfills.bundle.js:5359 在 ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:4907)"

Please help me

Answer 1

Web Components v0 API 在 Chrome m80 中被移除： https://developers.google.com/web/updates/2019/12/chrome-80-deps-rems#web_components_v0_removed

如果您在 Angular 应用程序中使用 Polymer 2.0 元素，则需要 HTML Imports 将这些元素导入您的应用程序，但 HTML Imports 支持也被删除：https://www.chromestatus.com/feature/5144752345317376

借助 webcomponents.js 包 https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs 提供的用于 HTML 导入的 polyfill，您应该仍然可以使用它们

看起来这个包没有与你的 webpack 配置正确捆绑，所以我会在那里解决你的问题。

你可以试试这两个选项：

选项 1：npm + webpack

1. npm install @webcomponents/webcomponentsjs
2. 使用CopyWebpackPlugin 将您需要的文件从node_modules 复制到您的webpack 输出文件夹所在的位置
3. 使用步骤 2 中使用的输出路径更新 index.html

选项 2：UNPKG

1. 将https://unpkg.com/@webcomponents/webcomponentsjs@2.0.4/webcomponents-bundle.js 添加到您的index.html

我将从选项 2 开始。

https://github.com/webcomponents/polyfills/issues/63#issuecomment-412302377