'Angular Compile Error: NG6001: The class is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe

App fails to compile with error

error NG6001: The class NavigationMenuItemComponent 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 error goes away when I remove the constructor with parameters. How can I resolve this whiles maintaining the constructor that has parameters, because I want to use to initialise a list of the component without having to call set methods for each member in the list

import {
    Component,
    OnInit
} from '@angular/core';

@Component({
    selector: 'app-navigation-menu-item',
    templateUrl: './navigation-menu-item.component.html',
    styleUrls: ['./navigation-menu-item.component.scss']
})
export class NavigationMenuItemComponent implements OnInit {
    static readonly ID_PREFIX: string = 'sidebar-menuitem-';
    static readonly ICON_CLASS_PREFIX: string = 'mdi mdi-';

    constructor(id: string, iconClass: string) {
        this._id = NavigationMenuItemComponent.ID_PREFIX + id;
        this._iconClass = NavigationMenuItemComponent.ICON_CLASS_PREFIX + iconClass;
    }
    //constructor() {}

    private _id: string;
    private _iconClass: string;

    get id() {
        return this._id;
    }

    get iconClass() {
        return this._iconClass;
    }

    set id(id: string) {
        this._id = NavigationMenuItemComponent.ID_PREFIX + id;
    }

    set iconClass(iconClass) {
        this._iconClass = NavigationMenuItemComponent.ID_PREFIX + iconClass;
    }

    ngOnInit(): void {}
}

angular typescript

Solution 1:^[1]

You have to run npm install when creating new components. Hot reload doesn't seem to be able to add the component.

Solution 2:^[2]

I had the same issue. Removing OnInit in the declaration part as well as inside the class helped me. Because it initialized all data-bound properties of the directive. Since this component could have been added in app.module.ts.

export class NavigationMenuItemComponent {
     ....
     ....
     set iconClass(iconClass) {
            this._iconClass = NavigationMenuItemComponent.ID_PREFIX + iconClass;
        }

        //ngOnInit(): void {}
    }

Solution 3:^[3]

When you have multiple error-messages, this error message may show up first.
So make sure to also check the other error messages.

In may case I had a typo in the the tempalteURL (another error message clearly expressed this: NG2008: Could not find template file)

Solution 4:^[4]

Add these lines in component:

constructor() {};

ngOnInit(): void {};

I am also facing same issue but I think the error occurs because angular is no more treating it as complete component by adding contructor and ngOnIt have fixed issue.

Solution 5:^[5]

I suppose that it's happening, because Angular is designed to use component's constructor to work with Dependency Injection system which is based on classes and not primitives.

Basically, you cannot create your own component and provide it's constructor with desired props.

Why, because it would break Inversion of control principle, which leads to maintainability problems.

What you can do:

Use @Input() this decorator is specifically designed by Angular's dev team to provide component with values at run time. It doesn't matter if you will change them later. You may read more here and here
If you need some kind of config to provide globally or at some level you could create your own Injector and provide it with Token you created so that component may consume. Some info could be found here

Basically, you should be OK with 1st approach as it's clear what you are doing in your code and it's a common practice, meanwhile 2nd approach is more cumbersome and would better suit for usage in services.

TL;DR

Use @Input as it's a common practice of passing down properties to children components.

Solution 6:^[6]

I had the same error message after I tried to move a component in another folder with Resharper in Visual Studio. The issue was with one of the imports got messed up, namely:

import { Component, OnInit, Input, ViewChild } from '@angular/core/core';

Fixed it like so:

import { Component, OnInit, Input, ViewChild } from '@angular/core';

Solution 7:^[7]

Following worked for me.

There was quote missed around variable in ngIf condition.

<div *ngIf=!loaded" id="loader "> </div>

<div *ngIf="!loaded" id="loader "> </div>

Hope this may help to someone.

Solution 8:^[8]

all the above answers did not work for me. I deleted the component and used cli to generate it anew, I generated it slightly renamed.

Solution 9:^[9]

Try ng serve. The error should be resolved. If not, npm i it once.

Solution 10:^[10]

The following build command has fixed the issue for me in an ionic framework application

ionic cordova build android

Solution 11:^[11]

Well for my case this line here was causing all that

this.router.routeReuseStrategy.shouldReuseRoute = () => false;

Solution 12:^[12]

In my case have some silent error in component import statement :

my shorthand path not working :

import { PageLabelsConfig } from '@core/_interfaces/page-labels.interface';

I changed it as below then works fine

 import { PageLabelsConfig } from '../../../../core/_interfaces/page-labels.interface';

shorthand path detail : https://medium.com/@aleksanderkolata/angular-tips-01-get-rid-of-long-relative-import-paths-398c5926ecd4

Solution 13:^[13]

In my case, I had renewed the component files. But I missed to update templateUrl to new file name. Once corrected the templateUrl file names, all started working fine.

This is strange but the error is same for multiple reasons so at times it is misleading!

Solution 14:^[14]

I had the same error, the way I fixed it to just debug it step by step to find out the root cause, normally its occure if you did not use the correct selector name in your html file which binds in the typescript file(.ts).

the second thing which you need to check in the templateURL files, try to use string interpolation rather than (tabtick with $ for variables). e-g use this {{ title }} if variable name is title. because as its a Ng Main module so whereever it will fail to compile it witll hit the same error.

but in the error you can see "its not a directive", so problem in the selector which you used in html is not matching with the ones used in ts file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	prosoitos
Solution 2	Hema LM
Solution 3
Solution 4	Paul Roub
Solution 5	Sergey
Solution 6	ferikeem
Solution 7	Rajeev Jayaswal
Solution 8	prosper1
Solution 9	Dikshit Sharma
Solution 10	zkoza
Solution 11	David Njuguna
Solution 12	Kashif Faraz
Solution 13	Indar
Solution 14	hafiz adil

'Angular Compile Error: NG6001: The class is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

TL;DR

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]