App fails to compile with error
error NG6001: The class
NavigationMenuItemComponentis listed in the declarations of the NgModuleAppModule, 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 {}
}
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';
You have to run npm install when creating new components. Hot reload doesn't seem to be able to add the component.
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.
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.
Use @Input as it's a common practice of passing down properties to children components.
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 {}
}
The following build command has fixed the issue for me in an ionic framework application
ionic cordova build android
Well for my case this line here was causing all that
this.router.routeReuseStrategy.shouldReuseRoute = () => false;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.
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.