Ошибка при встраивании пользовательского элемента в угловой универсальный - PullRequest
Новая
       30

Ошибка при встраивании пользовательского элемента в угловой универсальный

0 голосов
/ 19 марта 2019

Виджет сделан по пользовательскому элементу (@ angular / elements) и встроен в angular universal.Как я это сделал, чтобы добавить тег script (angularElements.js) в index.html, а в компонент добавлен пользовательский тег.

Он хорошо работает в угловых не-ssr, но выдает исключение в ssr.Режим.Ошибка - конструктор модуля пользовательских элементов вызывается дважды, и генерируется DOMException.

Приведенный ниже код является примером кода модуля для пользовательского элемента. 

declare var require: any;
@NgModule({

})
export class WidgetModule implements DoBootstrap {
  constructor(
    private injector: Injector,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {

  }
  defineCustomElements(fn: any, name: string, component: Type<any>) {
    if ( isPlatformBrowser(this.platformId) ) {
      window.customElements.define(name, fn(component, {injector: this.injector}));
    }
  }
  ngDoBootstrap() {
    console.log('constructor of widget is called.....');
    if ( isPlatformBrowser(this.platformId) ) {
      const { createCustomElement }  = require('@angular/elements');

      this.defineCustomElements(createCustomElement, 'widget-main-schedule', MainScheduleComponent);
    }
  }
}

Это код emebed вangular universal. 

<body>
  <app-root></app-root>
  <script type="text/javascript" src="http://localhost/widgets/angularElements.js"></script>
</body>
</html>

Это пример виджета 

<div #main_schedule class="main-schedule">
      <h2>Competition Schedule</h2>
      <!-- this is widget -->
      <widget-main-schedule></widget-main-schedule>
    </div>

Ниже приведено сообщение об ошибке в консоли браузера. 

 ERROR DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
at CustomElementRegistry.e.(anonymous function) [as define] (http://localhost/widgets/angularElements.js:2:35267)
at t.defineCustomElements (http://localhost/widgets/angularElements.js:4:210330)
at t.ngDoBootstrap (http://localhost/widgets/angularElements.js:4:210525)
...