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

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

0 голосов
/ 12 июня 2018

У меня следующая проблема.У меня есть приложение, созданное с использованием 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>

Есть предложения по этой проблеме?

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

Ответы [ 2 ]

0 голосов
/ 24 июня 2018

Это должно быть что-то вроде этого в вашем 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() {}
}

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

Оформить заказ статья для пошагового руководства.

0 голосов
/ 12 июня 2018

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

...