angular library module with an entrycomponent

Question

hello i have an angular library module with an entry component this entry component HTML template has

<div class="dfb-dynamic-dialog-message">
  <div class="body font-medium-medium">{{ bodyMessage }}</div>

  <div class="footer-buttons" *ngIf="primaryButtonMessage || secondaryButtonMessage">
    <dfb-button
      *ngIf="showSecondButton"
      [label]="secondaryButtonMessage"
      [buttonType]="buttonType.Third"
      [buttonSize]="buttonSize.Small"
      (click)="secondaryButtonAction()"></dfb-button>
    <dfb-button
      *ngIf="primaryButtonMessage"
      [label]="primaryButtonMessage"
      [buttonSize]="buttonSize.Small"
      (click)="primaryButtonAction()"></dfb-button>

      <!-- <button pButton type="button" label="Click" ></button> -->


  </div>
</div>

the problem is when i try to use the library via npm registry using npm i libraryName after the serve i got this errors

Error: projects/dynamic-form-builder/src/lib/shared/components/utilities/dynamic-dialog-message/dynamic-dialog-message.component.html:14:7 - error NG8002: Can't bind to 'buttonSize' since it isn't a known property of 'dfb-button'.
1. If 'dfb-button' is an Angular component and it has 'buttonSize' input, then verify that it is part of this module.
2. If 'dfb-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

i know that this error really means that i didn't declae the component into my module but it is already declered

here is my library module

@NgModule({
  declarations: [
    ...,
    DynamicDialogMessageComponent,
    ButtonComponent
  ],
  imports: [
    ...
  ],
  exports: [...],
  providers: [...,DialogService],
  entryComponents: [...,DynamicDialogMessageComponent],
})

what i have tried 1- i have tried to add the ButtonComponent to the exports array ... it didn't work. 2- i tried to add ButtonComponent to my entryComponents array ... it didn't either.

here is my button component class :

export class ButtonComponent {
  @Input() buttonShape: ButtonShape = ButtonShape.Square;
  @Input() buttonType: ButtonType = ButtonType.Primary;
  @Input() buttonSize: ButtonSize = ButtonSize.Icon;
  @Input() label: string = '';
  @Input() icon: string = '';
  @Input() selected: boolean = false;
  @Input() disabled: boolean = false;
  @Input() style: ButtonInputStyleInterface;

  buttonShapeEnum = ButtonShape;
  buttonTypeEnum = ButtonType;
  buttonSizeEnum = ButtonSize;

  constructor() {
    // This is intentional
  }
}

thanks in advance guys.

FYI: in modern versions of angular you don't need `entryComponents` array and often you don't even need the `providers` array — Zerotwelve, Jun 29 '22 at 05:24

score 0 · Answer 1 · answered Jun 18 '22 at 18:09

0

You should declare and export the component in the library module.

You only need to import the module in the project using the library. You don't need to declare the component there.

answered Jun 18 '22 at 18:09

H3AR7B3A7

4,366
2
14
37

already tried it and i have got the exact same error. – Un1xCr3w Jun 18 '22 at 19:06
@Un1xCr3w And you didn't misspell `buttonType` on the `@Input()` in the script file? Could you add the `*.component.ts` of the library? – H3AR7B3A7 Jun 18 '22 at 19:11
what do you mean ? – Un1xCr3w Jun 18 '22 at 19:14
@Un1xCr3w Your dfb-button-component in your library, could you add the typescript to the question? You are only showing code of the application that is using the library. Maybe something is wrong with your library itself. – H3AR7B3A7 Jun 18 '22 at 19:16
updated the main question – Un1xCr3w Jun 18 '22 at 20:02
This: `[buttonSize]="buttonSize.Small"` in your component template is pretty weird. It would require something like this in the typescript: `buttonSize = { Small : ButtonSize.Icon}`. I take it you are exporting that enum in your library so you can use it in the application implementing it? I haven't been able to reproduce your problem in a [stackblitz](https://stackblitz.com/), could you maybe try to do so? My code just works, but I did have to fill in a lot of the blanks still tho'. – H3AR7B3A7 Jun 18 '22 at 20:25
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/245724/discussion-between-un1xcr3w-and-h3ar7b3a7). – Un1xCr3w Jun 18 '22 at 20:51

angular library module with an entrycomponent

1 Answers1