After updating from Angular 8 to Angular 9, I encountered an error when running the application:
error NG8002: Can't bind to 'text' since it isn't a known property of 'app-custom-message'.
1. If 'app-custom-message' is an Angular component and it has 'text' input, then verify that
it is part of this module.
This error was not present before the update.
The code in question is as follows:
Page.component.ts
<app-custom-message [icon]='"icon.png"' [text]="'the message'"><app-custom-message>
<app-custom-footer></app-custom-footer>
The error specifically occurs in the custom-message component. Even after removing the properties, the error persists. Strangely, the error does not appear in custom-footer.
Custom-Message.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-custom-message',
templateUrl: './message.component.html',
styleUrls: ['./message.component.scss']
})
export class MessageComponent implements OnInit {
@Input() 'text';
@Input() 'url' = null;
@Input() 'icon' = null;
closed = false;
constructor() { }
ngOnInit() { }
}
I am using lazy loading, with the custom-message and custom-footer components located in a shared folder outside the pageModule domain. The file structure is as follows:
-PageFolder
--PageComponent
--PageModule
-Shared
--CustomMessage
--CustomFooter
While the application continues to work despite the error, it is a concern for me. I am aware that a solution would be to import the CUSTOM_ELEMENTS_SCHEMA in the PageModule, but this may mask potential errors in the future if a component name is used incorrectly.