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 錯誤錯誤：未捕獲（承諾）：TypeError：無法讀取 null 的屬性 ' proto ' TypeError：無法讀取 s 處的 null 屬性 ' proto ' (webcomponents.min.js:11) at s (webcomponents.min.js:11) at s (webcomponents.min.js:11) at s (webcomponents.min.js:11) at T (webcomponents.min.js:11) at Function.C [as wrap] (webcomponents.min.js:11) 在新的 DomApi (polymer-mini.html.js:645) at Function.DomApi.factory (polymer-mini.html.js:739) at Function.Polymer.dom (polymer-mini .html.js:751) at l.toggleClass (polymer.html.js:1191) at resolvePromise (polyfills.bundle.js:5300) at resolvePromise (polyfills.bundle.js:5257) at polyfills.bundle.js:5359在 ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:4907)"

Please help me

Answer 1

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

如果您在 Angular 應用程序中使用 Polymer 2.0 元素，則需要 HTML 導入將這些元素導入您的應用程序，但 HTML 導入支持也已刪除： https : //www.chromestatus.com/feature/5144752345317376

您應該仍然可以在webcomponents.js包https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs提供的 HTML 導入的webcomponents.js的幫助下使用它們

看起來這個包沒有與你的 webpack 配置正確捆綁，所以我會去那里解決你的問題。

你可以試試這兩個選項：

選項一：npm + webpack

1. npm install @webcomponents/webcomponentsjs
2. 使用CopyWebpackPlugin將CopyWebpackPlugin中需要的文件復制到 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