Question

我将我的角度应用程序从版本7升级到了8。我在该应用程序中使用了自定义Web组件，该组件现已损坏。

我在浏览器开发工具中遇到以下错误：

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
at new e (webcomponents.core.js:5)
at HTMLDocument.createElement (<anonymous>)
at EmulatedEncapsulationDomRenderer2.createElement (platform-browser.js:2791)
at EmulatedEncapsulationDomRenderer2.createElement (platform-browser.js:3036)
at AnimationRenderer.createElement (animations.js:473)
at DebugRenderer2.createElement (core.js:45747)
at createElement (core.js:42861)
at createViewNodes (core.js:44165)
at createEmbeddedView (core.js:44068)
at callWithDebugContext (core.js:45631)

我不确定如何解决此问题。

这是因为Angular升级删除了一些加载Web组件所需的polyfill（浏览器尚不支持）吗？我正在使用最新版本的Chrome-76

希望对此有任何帮助！

Answer 1

还要更新document-register-element包。

npm i document-register-element

Answer 2

根据 jessndaa

https://github.com/angular/angular/issues/24556#issuecomment-398920529

将tsconfig.json中的“ target”：“ es5”更改为“ target”：“ es2015” 这是我的tsconfig.json文件

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}`

将Angular从7升级到8后无法加载Web组件

2 个答案: