The class AppComponent is listed in the declarations of the NgModule AppModule, but is not a directive, a component, or a pipe. - Troubleshooting

Last update July 2, 2023 at 08:00

You are working on an Angular project then you encounter this error snippet: The class AppComponent is listed in the declarations of the NgModule AppModule, but is not a directive, a component, or a pipe….

A more recent version of the solution is available at troubleshooter.tedidev.com

This troubleshooting concerns a type of problem that one can encounter when developing an application with Angular.

Problems of this type often have several solutions, some of which will not match yours. In this article we add our grain of salt by offering you a solution that worked with our project.

Workaround for “The class AppComponent is listed in the declarations of the NgModule AppModule”

The full message of the error that we are going to resolve this presents as such:

The class 'AppComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

The cause in our case of this error is that the html code of the component angular AppComponent is badly written in the html.

To solve it you have to check the opening and closing tags of your html code. If the error persists, stop the program and restart it with the command ”Ng serve“ .

In our case the error came from a component which is badly written in AppComponent.