Can't bind to 'icon' since it isn't a known property of 'app-button'

Question

I have modal components built with ngx-bootstrap and <app-button> components from myself. I created a modal.module.ts file to declare all the modal components to the app. The ButtonComponent is declared in my app.module.ts file to be available everywhere.

modal.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsModalService } from 'ngx-bootstrap';

import { KeyboardComponent } from '../keyboard/keyboard.component';
import { AlertModalComponent } from './alert-modal/alert-modal.component';
import { ConfirmModalComponent } from './confirm-modal/confirm-modal.component';
import { LanguageModalComponent } from './language-modal/language-modal.component';
import { KeyboardModalComponent } from './keyboard-modal/keyboard-modal.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  entryComponents: [
    AlertModalComponent,
    ConfirmModalComponent,
    LanguageModalComponent,
    KeyboardModalComponent
  ],
  declarations: [
    KeyboardComponent,
    AlertModalComponent,
    ConfirmModalComponent,
    LanguageModalComponent,
    KeyboardModalComponent
  ]
})
export class ModalModule {

  constructor(
    private modalService: BsModalService
  ) {
    modalService.config.backdrop = false;
    modalService.config.ignoreBackdropClick = true;
  }

}

app.module.ts:

import { ModalModule } from './components/modal/modal.module';

...

import { AppComponent } from './app.component';
import { ButtonComponent } from './components/button/button.component';

@NgModule({
  declarations: [
    AppComponent,
    ButtonComponent,
    ...
  ],
  imports: [
    ...
    ModalModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

button.component.ts:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent {

  @Input() icon: string;
  @Input() color: string;
  @Input() label: string;

}

alert-modal.component.html:

<div class="modal-body">
    <p [innerHTML]="message"></p>
</div>
<div class="modal-footer">
    <app-button [icon]="'validate'" [color]="'red'" [label]="'OK'" (tap)="validate()"></app-button>
</div>

However, I have an error at runtime:

compiler.js:2175 Uncaught Error: Template parse errors:
Can't bind to 'icon' since it isn't a known property of 'app-button'.
1. If 'app-button' is an Angular component and it has 'icon' input, then verify that it is part of this module.
2. If 'app-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. ("
</div>
<div class="modal-footer">
    <app-button [ERROR ->][icon]="'validate'" [color]="'red'" [label]="'OK'" (tap)="validate()"></app-button>
</div>
"): ng:///ModalModule/AlertModalComponent.html@4:18

The icon property is well defined as a property of a <app-button> so I don't see this error as a legit one.

Answer 1

The error mentions a vesta-button, but I don't see that declared anywhere. It looks like you may have declared a vesta-button tag in your markup instead of app-button, in which case you'll need to update the markup to say app-button instead.

EDIT

In this case, it looks like you're trying to use app-button (ButtonComponent) within the ModalModule. However, that isn't going to work, because ModalModule can't import AppModule. Instead, you'll need to create a SharedModule that contains your ButtonComponent, then import that into ModalModule:

shared.module.ts

@NgModule({
  declarations: [ButtonComponent],
  exports: [ButtonComponent]
})
export class SharedModule {
}

Then move ButtonComponent into the Shared module folder.

modal.module.ts

@NgModule({
  imports: [
    CommonModule,
    SharedModule
  ],
  ...
})
export class ModalModule {
  ...
}

You can also import SharedModule in AppModule so you can use the button there as well.

Answer 2

If 'app-button' is an Angular component

This message means that the Angular compiler does not recognize the XML name app-button as a selector for a component.

The error is being generated when the ModalModule is being compiled, because that module does not import another module that exports this component or it does not directly declare the component itself.

Look at your code, the ButtonComponent is declared in the AppModule, but that module imports ModalModule.

You need to move ButtonComponent to another module (maybe named it ButtonModule) and ensure that it is exported, then you can import that module into ModalModule.

Generally, it's a bad practice to add components to your AppModule. You should create sharable modules that contain your components to avoid these kinds of problems.