错误TypeError：i.createShadowRoot不是Angular Web组件上的函数吗？ [英] ERROR TypeError: i.createShadowRoot is not a function on Angular Web Component?

问题描述

我正在尝试一个基本的Angular Web组件。我创建了一个在此处显示该方法的github存储库：

I'm attempting a basic Angular Web Component. I created a github repository that shows the approach here:

https://github.com/fireflysemantics/fs-gist

这是组件：
https://github.com/fireflysemantics/fs -gist / blob / master / src / app / fs-gist / fs-gist.component.ts

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

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

  constructor() { }

  ngOnInit(): void {
  }

}

这是模块：
https://github.com/fireflysemantics/fs-gist/blob/master/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FsGistComponent } from './fs-gist/fs-gist.component';

import { Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

@NgModule({
  declarations: [
    FsGistComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  entryComponents: [FsGistComponent]
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(
      FsGistComponent, 
      { injector: this.injector });
    customElements.define('fs-gist', el);
  }
}

这些是<$ c $中的构建脚本c> package.json

https://github.com/fireflysemantics/fs-gist/blob/master/package.json

    "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/"

运行 npm run p 将创建Web组件 fs-gist 放在根文件夹中。

Running npm run p will create the web component fs-gist in the root folder.

然后我将其复制到 src / assets / js / 此测试项目的文件夹

I then copied that into the src/assets/js/ folder of this test project:

https://github.com / fireflysemantics / wc-test

在加载应用程序后，控制台日志：

When the application is loaded the the console logs:

fs-gist.js：1错误TypeError：i.createShadowRoot不是在新n处的函数
（fs-gist.js：1）
在e.value（fs -gist.js：1）fs-gist.js处的
：n.value处的
（fs-gist.js：1）e.value处的
（fs-gist.js ：1）e.value的
（fs-gist.js：1）HTMLElement.value的
（fs-gist.js：1）ZoneDelegate.invoke的
（常绿区域。 js：364）Object.onInvoke上的
（fs-gist.js：1）ZoneDelegate.invoke上的
（zone-evergreen.js：363）

fs-gist.js:1 ERROR TypeError: i.createShadowRoot is not a function at new n (fs-gist.js:1) at e.value (fs-gist.js:1) at fs-gist.js:1 at n.value (fs-gist.js:1) at e.value (fs-gist.js:1) at e.value (fs-gist.js:1) at HTMLElement.value (fs-gist.js:1) at ZoneDelegate.invoke (zone-evergreen.js:364) at Object.onInvoke (fs-gist.js:1) at ZoneDelegate.invoke (zone-evergreen.js:363)

我在 polyfills.js 中包括了用于Web组件的polyfills：

I've included polyfills for web components in polyfills.js:

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 ：

and I've added web component loading to 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 -->

有什么想法吗？

还要看看我是否可以在最小的环境中工作，我使用了第一个项目生成的 fs-gist Web组件，并使用它进行了最小的JavaScript stackblitz。

Also just to see whether I could get this working in a minimal environment I took the fs-gist web component that the first project produces and made a minimal javascript stackblitz with it.

演示程序从CDN导入Web组件polyfill。

The demo imports the web components polyfill from a CDN.

就是这样：

https://stackblitz.com/edit/ js-custome-element-test

会产生以下错误：

错误
错误：无法在'CustomElementRegistry'上执行'define'：此注册表已使用名称 fs-gist

ERROR Error: Failed to execute 'define' on 'CustomElementRegistry': the name "fs-gist" has already been used with this registry

错误报告

我认为Web组件的Angular编译中存在错误。

Bug Report

I think there is a bug in the Angular compilation of the web component.

https://github.com/angular/angular-cli/issues/17448

推荐答案

组件View封装需要为 ViewEncapsulation.ShadowDom （请参阅上述错误报告以供参考）：

The components View Encapsulation needs to be ViewEncapsulation.ShadowDom (See above mentioned bug report for reference):

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 {
  }

}

这篇关于错误TypeError：i.createShadowRoot不是Angular Web组件上的函数吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！