Angular 错误类型错误：i.createShadowRoot不是角度Web组件上的函数？

我正在尝试一个基本的角度Web组件。我创建了一个github存储库，在这里展示了该方法：

这是一个组件：

这些是

package.json

运行

npm run p

将在根文件夹中创建web组件

fs gist

然后我将其复制到该测试项目的

src/assets/js/

文件夹中：

加载应用程序时，控制台会记录：

fs gist.js:1错误类型错误：i.createShadowRoot不是函数 在新n（fs gist.js:1） 在e.value（fs gist.js:1） 在fs gist.js:1 在n.值（fs gist.js:1） 在e.value（fs gist.js:1） 在e.value（fs gist.js:1） 在HTMLElement.value（fs gist.js:1） 在ZoneDelegate.invoke（zone evergreen.js:364） 在Object.onInvoke（fs gist.js:1） 在ZoneDelegate.invoke（zone evergreen.js:363）

我在

polyfills.js

中包含了web组件的polyfills：

import "@webcomponents/custom-elements/src/native-shim";
import "@webcomponents/custom-elements/custom-elements.min";
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'

我已经将web组件加载添加到

index.html

：

  <script src="webcomponents/webcomponents-loader.js"></script>
  <script>   
  if ( !window.customElements ) 
  { document.write('<!--') } 
  </script>
  <script src="webcomponents/custom-elements-es5-adapter.js"></script> 
  <!-- ! KEEP ME -->

如果（！window.customElements）
{document.write（'

有什么想法吗

另外，为了看看我是否能在最小的环境下工作，我使用了第一个项目生成的

fsgist

web组件，并用它进行了一次最小的javascript stackblitz

演示从CDN导入web组件polyfill

就是这样：

产生以下错误：

错误 错误：未能对“CustomElementRegistry”执行“define”：名称“fs gist”已用于此注册表

错误报告 我认为web组件的角度编译中有一个bug

---

组件视图封装需要是

视图封装.ShadowDom

（参考上述bug报告）：

从'@angular/core'导入{Component，OnInit，viewenclosuration}；
@组成部分({
选择器：“fs gist”，
模板：`

财政司司长的工作要点！

`,
风格：[
],
封装：viewEn封装.ShadowDom
})
导出类FsGistComponent实现OnInit{
构造函数（）{}
ngOnInit（）：void{
}
}

    "b": "ng build --prod --output-hashing=none",
    "c": "bash -c 'cat dist/fs-gist/{runtime-es5,polyfills-es5,main-es5}.js > fs-gist.js'",
    "c1": "bash -c 'cat dist/fs-gist/{runtime-es2015,polyfills-es2015,main-es2015}.js > fs-gist2015.js'",
    "p": "npm run b && npm run c",
    "p1": "npm run b && npm run c1",
    "cp-fs-gist": "cp fs-gist.js ../wctest/src/assets/js/"

import "@webcomponents/custom-elements/src/native-shim";
import "@webcomponents/custom-elements/custom-elements.min";
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'

  <script src="webcomponents/webcomponents-loader.js"></script>
  <script>   
  if ( !window.customElements ) 
  { document.write('<!--') } 
  </script>
  <script src="webcomponents/custom-elements-es5-adapter.js"></script> 
  <!-- ! KEEP ME -->

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'fs-gist',
  template: `
    <p>
      fs-gist works!
    </p>
  `,
  styles: [
  ],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class FsGistComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}