CODEWITHSUNDEEP
angulartypescriptangular-directivecustom-element
juanjinario
juanjinario

Reputation: 745

CUSTOM_ELEMENTS_SCHEMA error only shows sometimes

I did an update from Angular 8 to Angular 9, running the application shows me the error: 

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.

I didn't have that mistake before.

The code 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 is only shown in custom-message, I thought it might be because CUSTOM-MESSAGE has properties, so take away the properties and the error is still showing, the strange thing is that it doesn't show 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 use lazy loading, and the custom-message and custom-footer components are in a shared folder outside the pageModule domain, the structure is like:

-PageFolder
--PageComponent
--PageModule
-Shared
--CustomMessage
--CustomFooter

The application is still working and the error bothers me, I know that the solution is to import the CUSTOM_ELEMENTS_SCHEMA in the PageModule, but that prevents detecting errors in the future when you misuse the name of a component.

Upvotes: 1

Views: 117

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22203

Modify the @Input like this:

@Input() text;
@Input() url = null;
@Input() icon = null;

Upvotes: 1

Related Questions