Angular пользовательский элемент не отображается внутри микро-приложения

Question

Я работаю в проекте, который использует архитектуру с микро-фронтами в Angular 8. Существует «основное» приложение (мы называем его оболочкой), и в каталоге проектов есть несколько микро-приложений.

Все это было создано с помощью angular cli.

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

Когда мы создаем приложение, мы следим за статьей (которую я больше не могу найти), в которой говорится, что нужно создать файл «ap.module-export» во всех микро-приложениях, которые отличаются друг от друга для загрузки CommonModule. BrowserModule и RouteModule.forChild вместо .for Root

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

Мой app.module в обертке не содержит ничего c. Это обычный app.module

Так что в app.module, который имеет элемент angular, код

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

    import { AppComponent } from './app.component';
    import { Routes, RouterModule } from '@angular/router';
    import { LoansPlaceholderComponent } from './loans-placeholder/loans-placeholder.component';
    import { createCustomElement } from '@angular/elements';


    const routes: Routes = [{ path: '', component: LoansPlaceholderComponent }];
    @NgModule({
       declarations: [
          AppComponent,
          LoansPlaceholderComponent
       ],
       imports: [
          BrowserModule,
          RouterModule.forRoot(routes)
      ],
      providers: [],
      schemas: [
         CUSTOM_ELEMENTS_SCHEMA
      ],
      entryComponents: [
          LoansPlaceholderComponent
      ]
    })
    export class AppModule {
      constructor(private injector: Injector) {}

      ngDoBootstrap() {
          const loansPlaceHolder = createCustomElement(LoansPlaceholderComponent, { injector: this.injector });
          customElements.define('app-loans', loansPlaceHolder);
      }

    }

И app.module, который должен загрузить элемент angular,

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonLibModule } from '../../../common-lib/src/lib/common-lib.module';

import { environment } from '../environments/environment';
import { CustomerPositionPlaceholderComponent } from './customer-position-placeholder/customer-position-placeholder.component';
import { CustomerPositionComponent } from './app.component';

const routes: Routes = [
  {
    path: '',
    component: CustomerPositionPlaceholderComponent,
    pathMatch: 'full',
  }
];

@NgModule({
  declarations: [

    CustomerPositionPlaceholderComponent,

    // ProductOverviewComponent
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    BrowserModule,

    CommonLibModule,

    RouterModule.forRoot(routes),

  ],
  providers: [],
  bootstrap: [CustomerPositionComponent],
})
export class CustomerPositionModule {}

Затем я называю свое микро приложение вот так

<app-loans></app-loans>

Кажется, DOM обрабатывает как обычный элемент HTML, например div или что-то в этом роде.

Кто-нибудь знает, почему это происходит и как я могу решить эту проблему?

Спасибо