angular 13 cli complaining about component input on ng serve

Question

Error: src/app/money_makers/shochat_guts/shochat_content_creator_components/active-stream-dashboard/shochatactivestreamview-shell/shochatactivestreamview-shell.component.html:14:40 - error NG8002: Can't bind to 'creatorcardimageurl' since it isn't a known property of 'app-shochat-contentcreator-chat'.
1. If 'app-shochat-contentcreator-chat' is an Angular component and it has 'creatorcardimageurl' input, then verify that it is part of this module.
2. If 'app-shochat-contentcreator-chat' 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.

14                                        [creatorcardimageurl]="grouproomsettings.creatorcardimageurl"

if we look into the shochatactivestreamviewshell

@Component({
  selector: 'app-shochat-contentcreator-chat',
  templateUrl: './shochat-contentcreator-chat.component.html',
  styleUrls: ['./shochat-contentcreator-chat.component.scss']
})
export class ShochatContentcreatorChatComponent implements OnInit, OnDestroy {

  constructor(private twilioconversationservice: TwilioConversationService) { }

  @Input() twiliochattoken = null;
  @Input() twiliochatid = null;
  @Input() creatorname = null;
  @Input() creatorcardimageurl = null;

If we go to the app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    ShochatContentcreatorChatComponent,
    
  ],

we can see the component is defined. Is there a clear explanation of why this is happening?

Answer 1

Add the schemas and export your component in @NgModule

  @NgModule({
          declarations: [
            AppComponent,
            ShochatContentcreatorChatComponent,
          
          ],
          exports: [ShochatContentcreatorChatComponent],
          schemas: [
            CUSTOM_ELEMENTS_SCHEMA,
            NO_ERRORS_SCHEMA
          ]
        })