Angular version in use: v11
I am currently attempting to incorporate an application with lazily loaded modules as angular elements using ngx-build-plus into another application. I am encountering challenges when trying to add the element to a component within the primary application. While it successfully renders when added to the index.html, I encounter an error when attempting to include it in any other HTML file.
'cs-root' is not recognized as an element:
1. Verify if 'cs-root' is an Angular component and ensure that it belongs to this module.
2. If 'cs-root' is a Web Component, include 'CUSTOM_ELEMENTS_SCHEMA' in the '@NgModule.schemas' of this component to suppress this message.
The configuration of the app module file can be seen below:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
RouterModule,
AppRoutingModule,
CoreModule.forRoot(),
SharedModule.forRoot(),
ToasterModule
],
exports: [AppComponent],
providers: [{ provide: HTTP_INTERCEPTORS, useClass: HttpAuthInterceptor, multi: true },
{ provide: APP_INITIALIZER, useFactory: appInitFactory, deps: [AppInitService], multi: true },
WindowService,
InsightsGuard],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(private injector: Injector) {
const el = createCustomElement(AppComponent, { injector });
customElements.define('cs-root', el);
}
ngDoBootstrap() {
// This method bypasses the natural bootstrapping of the element
}
}
Is there something essential that I may have overlooked?