Я работаю в проекте, который использует архитектуру с микро-фронтами в 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
или что-то в этом роде.
Кто-нибудь знает, почему это происходит и как я могу решить эту проблему?
Спасибо