Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 {}
}
like image 472
rnxfod Avatar asked Apr 19 '20 17:04

rnxfod


3 Answers

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

like image 139
zman Avatar answered Nov 20 '22 19:11

zman


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)

like image 10
TmTron Avatar answered Nov 20 '22 18:11

TmTron


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 {}
    }
like image 7
Hema LM Avatar answered Nov 20 '22 17:11

Hema LM