Sometimes when we refactor the code we delete many module files for the pages and declare those pages/components in their parent, and there it uses its parent's module file. But when you work with a complex structure sometimes it's hard to keep track of all the Pages declarations and the module file they are using.
Recently I was changing my present code and my working code started to give an error because I had deleted some of the module imports from some of the module files.
In these two cases, I find a similar error explained below.
Error: '-----' is not a known element.
Here the quotes contain the name of the component, directive, or pipe.
This error occurs when the element is unknown in your module file.
Solution: - 1. If the element is a component, probably the absence of the declaration of the component is the culprit.
2.If the element is directive, you need to import the directive in the module file.
Let us see the error and its solution in the code:
case 1: Element is a Component
Error: 'app-component1' is not a known element.
Because I am using the <app-component1> selector in the home.page.html, I need to check the module file home.module.ts
So now I need to add the component to the declarations array.
case 2: Element is Directive
Error: ion-item is not a known element
Here ion-item is a directive that is present in the IonicModule. So need to check the module file that it has IonicModule or not.
So we do not have IonicModule here. Just need to add IonicModule in the imports array.
and it solves the error.
Thank you, Hope this is helpful.