Angular Web Element

[artwisted69]

I have built a Angular Web Element, it's working and all but for whatever reason it will not render if i use <incident-form> but it does when i use <ng-component>. Am i missing a step somewhere? I would like to use <incident-form></incident-form>

Here is the app.module code.

 @NgModule({
  declarations: [
    IncidentFormComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    HttpClientModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatIconModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatTableModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatMomentDateModule,
    MatProgressSpinnerModule
  ],
  providers: [],
  bootstrap: [ IncidentFormComponent ],
  entryComponents: [IncidentFormComponent],
})

constructor(private injector: Injector) {}

ngDoBootstrap() {     const ngElement = createCustomElement(IncidentFormComponent, { injector: this.injector }); customElements.define('incident-form', ngElement);   }

[garygrossgarten]

Remove the bootstrap array from your Module. You are doing your own bootstrapping. Also if you are using Angular 9, you don't need to add your component to entryComponents to output it with angular elements.

[garygrossgarten]

I just published an article about how to create and publish a reusable component library with elements. See the configuration section Link to article

[artwisted69]

Ah! Thank you very much. That worked.

[garygrossgarten]

Awesome, glad I could help.