ОШИБКА TypeError: i.createShadow Root не является функцией Angular Веб-компонент? - PullRequest
Новая
       53

ОШИБКА TypeError: i.createShadow Root не является функцией Angular Веб-компонент?

0 голосов
/ 12 апреля 2020

Я пытаюсь использовать базовый c Angular веб-компонент. Я создал github-репозиторий, который показывает подход здесь:

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);
  }
}

А это скрипты сборки в 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 создаст веб-компонент fs-gist в папке root.

Затем я скопировал его в папку src/assets/js/ этого Тестовый проект:

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

Когда приложение загружено, журналы консоли:

fs-gist. js : 1 ОШИБКА TypeError: i.createShadow Root не является функцией для нового n (fs-gist. js: 1) в e.value (fs-gist. js: 1) в fs-gist. js: 1 в 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 (zone-evergreen. js: 364) в Object.onInvoke (fs-gist. js: 1) в ZoneDelegate.invoke (зона . -evergreen js: 3 63)

Я включил полифилы для веб-компонентов в polyfills.js: 

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

и добавил загрузку веб-компонента в 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, который производит первый проект, и сделал минимальный javascript стекблиц с it.

Демонстрационная версия импортирует полизаполнение веб-компонентов из CDN.

Вот оно:

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

Возникает следующая ошибка:

ОШИБКА Ошибка: не удалось выполнить 'define' для 'CustomElementRegistry': имя "fs-gist" уже использовалось с этим реестром

Отчет об ошибке

Я думаю, что есть ошибка в Angular компиляции веб-компонента.

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

1 Ответ

0 голосов
/ 13 апреля 2020

Компоненты View Encapsulation должны быть ViewEncapsulation.ShadowDom (см. Выше отчет об ошибке для справки): 

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

}
...