CODEWITHSUNDEEP
angulartypescript
rnxfod
rnxfod

Reputation: 1027

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 {}
}

Upvotes: 79

Views: 187427

Answers (19)

Harun Kadri YARKA
Harun Kadri YARKA

Reputation: 1

I don't know about the other answers, but this error is caused by calling the modules you want to load in the declaration part of the AppModule. Modules must be called in import section

Upvotes: 0

TmTron
TmTron

Reputation: 19421

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

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

Upvotes: 26

Matija Selendic
Matija Selendic

Reputation: 11

The problem for me was that I had declared the component into two different modules.

Make sure that you declare your components only in one module.

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41447

This also could happen due to invalid imports. For me,this happen due to ViewEncapsulation import

change

import { ViewEncapsulation } from '@angular/compiler';

to this

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

Upvotes: 2

Reisy Eytan
Reisy Eytan

Reputation: 133

check if the paths mentioned in 'templateUrl' and 'styleUrls' exsists,

@Component({
    selector: 'app-navigation-menu-item',
    templateUrl: './navigation-menu-item.component.html',
    styleUrls: ['./navigation-menu-item.component.scss']
})

in my case, this was the bug.

Upvotes: 3

Veretax
Veretax

Reputation: 63

I had the same error message, but traced the issue down to my app.module.ts In this case I was registering a service as a Provider, and had, out of habit declared it in both @NgModule declarations and providers. removing it from declarations fixed the issue for me.

Upvotes: 0

Indar
Indar

Reputation: 305

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!

Upvotes: 2

Kashif Faraz
Kashif Faraz

Reputation: 331

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

Upvotes: 0

David Njuguna
David Njuguna

Reputation: 833

Well for my case this line here was causing all that

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

Upvotes: 0

Mohammed Jasir A
Mohammed Jasir A

Reputation: 19

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

ionic cordova build android

Upvotes: 0

Dikshit Sharma
Dikshit Sharma

Reputation: 65

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

Upvotes: 0

prosper1
prosper1

Reputation: 304

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.

Upvotes: 0

Rajeev Jayaswal
Rajeev Jayaswal

Reputation: 1501

Following worked for me.

There was quote missed around variable in ngIf condition.

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

to

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

Hope this may help to someone.

Upvotes: 1

hafiz adil
hafiz adil

Reputation: 139

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.

Upvotes: 0

Dheeraj kushwah
Dheeraj kushwah

Reputation: 61

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.

Upvotes: 6

Sergey
Sergey

Reputation: 7682

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:

  1. 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

  2. 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.

Upvotes: 4

zman
zman

Reputation: 724

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

Upvotes: 60

ferikeem
ferikeem

Reputation: 547

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';

Upvotes: 3

Hema LM
Hema LM

Reputation: 71

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 {}
    }

Upvotes: 7

Related Questions