Использование веб-компонентов Angular 6

У меня следующая проблема. У меня есть приложение, созданное с использованием Angular 6 с системой маршрутизации. Я хочу создать веб-компонент, который будет содержать это приложение и иметь возможность использовать его как часть другого веб-приложения. Я следовал этому руководству и изменил его в соответствии со своими потребностями: https://codingthesmartway.com/angular-elements-a-practical-introduction-to-web-components-with-angular-6/

В результате на экране ничего не отображается, и теперь в браузере существует ошибка Error: The selector "app-root" did not match any elements.

В исходных файлах браузера я могу подтвердить, что файл js, содержащий мой веб-компонент, успешно загружен.

Вот что у меня есть:

В app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    VideoRoomComponent,
    DashboardComponent,
    StreamComponent,
    DialogNicknameComponent,
    ChatComponent,
    DialogExtensionComponent,
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    MatInputModule,
    MatFormFieldModule,
    MatDialogModule,
    MatTooltipModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  entryComponents: [
    AppComponent,
    DialogNicknameComponent,
    DialogExtensionComponent,
  ],
  providers: [{provide: APP_BASE_HREF, useValue: '/'}, MyService],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('myElement', el);
  }
}

Вот мой index.html для проверки пользовательского элемента

   <!DOCTYPE html>
<html>

<head>

  <title>My webpage!</title>
  <script>
    var global = global || window;
  </script>
  <script type="text/javascript" src="myElement.js"></script>
</head>

<body>
  <h1>Hello, World!</h1>
  <myElement></myElement>    
</body>

</html>

Любые предложения по этой проблеме?

заранее спасибо


angular angular-elements angular6 elements
person CSantos    schedule 12.06.2018    source источник
comment
Можете ли вы воспроизвести это на StackBlitz? Я пробовал, но не получаю конкретной ошибки, что app-root не соответствует ни одному элементу.   -  person J.P. ten Berge    schedule 12.06.2018
comment
@CSantos, ты нашел какое-нибудь решение этой проблемы ??   -  person Nasiruddin Saiyed    schedule 12.09.2018

Ответы (4)


arrow_upward
5
arrow_downward

Попробуйте использовать <my-element> вместо <myElement>. Кроме того, измените вызов customElements.define на customElements.define('my-element', el);. Если я не ошибаюсь, чтобы отделить пользовательские элементы от нативных элементов браузера, каждый пользовательский элемент должен иметь хотя бы один дефис. HTML нечувствителен к регистру.

person J.P. ten Berge    schedule 12.06.2018

arrow_upward
0
arrow_downward

В вашем файле main.ts должно быть что-то подобное.

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

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

import { AppComponent } from './app.component';

@NgModule({
   entryComponents: [
      AppComponent
   ],
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: []
})
export class AppModule {
   constructor(private injector: Injector) {
      const firstComponent = createCustomElement(AppComponent, { injector });
      customElements.define('name-of-your-component', firstComponent);
   }

   ngDoBootstrap() {}
}

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

Ознакомьтесь с этой статьей. для пошагового руководства.

person Neckster    schedule 24.06.2018

arrow_upward
0
arrow_downward

вы должны прокомментировать строку bootstrap:[AppComponent] перед сборкой, чтобы она не загружалась с вашими пользовательскими элементами.

person hamza    schedule 26.09.2019

arrow_upward
0
arrow_downward

HTML должен быть таким.

<!DOCTYPE html>
<html>
    <head>
        <title>My webpage!</title>
        <script>var global = global || window;</script>
        <script type="text/javascript" src="myElement.js"></script>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <my-element></my-element>    
    </body>
</html>

И обновите app.module.ts этим.

customElements.define('my-element', el);

Подробнее читайте на здесь.

person Shirantha Madusanka    schedule 01.01.2021