Использование пользовательского веб-компонента Angular вызывает ошибку: селектор корень приложения не соответствует ни одному элементу

Веб-компоненты Angular уже работают с элементами angular. Проблема, с которой я столкнулся до сих пор, заключается в том, что я не мог одновременно иметь только веб-компонент без элемента <app-root>. Однако, полностью удалив свойство boostrap модуля приложения и добавив вместо этого

entryComponents: [AppComponent],

заставит ошибку исчезнуть. Однако это больше не будет инициализировать <app-root>, поскольку мы удалили его из части boostrap. Теперь мы должны условно вручную загрузить приложение с помощью:

public ngDoBootstrap(appRef: ApplicationRef): void {
  if (document.querySelector('app-root')) {
    appRef.bootstrap(AppComponent);
  }
}

Это поможет.

Мне кажется, что вы забыли добавить HeaderSearchComponent в declarations часть вашего app.module.ts.

Наверное, попробуй вот так:

@NgModule({
  declarations: [
    AppComponent,
    HeaderSearchComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    GraphQLModule,
    SharedModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [HeaderSearchComponent],
})
export class AppModule {
  constructor(private injector: Injector) {
    const webComponent = createCustomElement(HeaderSearchComponent, {injector});
    customElements.define('header-search', webComponent);
  }
}

Также убедитесь, что ваш app.component.ts имеет следующую аннотацию:

@Component({
  selector: 'app-root',
  ...
})
export class AppComponent { ... }

Эта проблема

Проблема заключается в том, что angular жалуется на недостающий элемент. Таким образом, приведенное ниже решение будет проверять, существует ли элемент, и если он не найден, создайте элемент перед загрузкой приложения.

Решение

В нашем файле main.ts мы проверим, существует ли элемент app-root, и если он не найден, мы создадим его и добавим в нужное место. В этом случае мы добавляем после header-search

Мы также объявим APP_ELEMENT в переменной окна, чтобы отслеживать, существовал ли элемент изначально или нет.

window["APP_ELEMENT"] = { root: true, header: true };
let headerSearchTag = document.querySelector("header-search");
const appRootTag = document.querySelector("app-root");
if (!headerSearchTag) {
  document
    .querySelector("body")
    .prepend(document.createElement("header-search"));
  headerSearchTag = document.querySelector("header-search");
  window["APP_ELEMENT"] = { ...window["APP_ELEMENT"], header: false };
}
if (!appRootTag) {
  headerSearchTag.parentNode.insertBefore(
    document.createElement("app-root"),
    headerSearchTag.nextSibling
  );
  window["APP_ELEMENT"] = { ...window["APP_ELEMENT"], root: false };
}

app.component.ts

appElement = window["APP_ELEMENT"].root;

app.component.html

<ng-container *ngIf="appElement">
  <h1>BODY</h1>
  <p>
    APP CONTENTS
  </p>
</ng-container>

Мы также можем применить ту же технику для компонента заголовка header-search.component.ts

appElement = window["APP_ELEMENT"].header;

header-search.component.html

<ng-container *ngIf="appElement">
  <h1>Header</h1>
  <p>
    Some nice header
  </p>
</ng-container>

Наконец, мы можем добавить наш HeaderComponent в массив начальной загрузки в app.module.ts

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HeaderSearchComponent ],
  bootstrap: [ AppComponent, HeaderSearchComponent ]
})
export class AppModule { }

См. Эту демонстрацию на Stackblitz

Прежде всего вам нужно удалить свой AppComponent из массива начальной загрузки в объявлении NgModule. Вы не хотите загружать свой компонент таким образом. Более того, вам необходимо добавить соответствующие библиотеки.

Я приготовил для вас решение.

https://angular-ivy-hsyuvz.stackblitz.io

https://stackblitz.com/edit/angular-ivy-hsyuvz

Что я сделал:

• добавлены элементы @ angular / в package.json
• добавлены @ webcomponents / custom-elements в package.json
• добавил @ webcomponents / webcomponentsjs в package.json (для совместимости с es5
• в polyfills.ts' added line import '@ webcomponents / webcomponentsjs / custom-elements-es5-adapter.js'; `
• поскольку index.html является основным файлом, я заменяю содержимое простым <header-search></header-search>
• В app.module.ts я удалил AppComponent из массива начальной загрузки и изменил способ создания WC

Теперь все работает так, как вы ожидали :)

Более того, некоторое время назад я писал на эту тему https://itnext.io/how-to-run-separate-angular-apps-in-one-spa-shell-5250e0fc6155 и подготовил репозиторий с другими примерами: https://github.com/marcinmilewicz/microfrontendly/tree/master/microfrontend-example/foo-app