I upgraded my app from Angular 11 to 12, and to typescript 4.2.4. When I do ng serve, app fails to compile with the error :
error NG6001: The class 'ChartComponent' is listed in the declarations of the NgModule 'PrototypeModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.
41 , ChartComponent
~~~~~~~~~~~~~~~~~~~~~~~~
src/app/chartPage/Chart/chart.component.ts:46:14
46 export class ChartComponent implements OnInit {
~~~~~~~~~~~~~~~~~~~~~~~~
'ChartComponent' is declared here.
This is the code in the PrototypeModule
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ChartComponent } from './chartPage/Chart/chart.component';
@NgModule({
declarations: [
ChartComponent
]
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class ChartPrototypeModule { }
@NgModule({
imports: [ChartPrototypeModule]
, exports: [],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class PrototypeModule { }
The ChartComponent is as follows :
import {Component, Input, ViewEncapsulation, Injectable, OnInit, SimpleChange, NgModule} from '@angular/core';
import { DataLoadService } from '../../services/data-load.service';
@Component({
selector: 'app-chart',
templateUrl: `./chart.component.html`,
styleUrls: ['./chart.component.scss']
, encapsulation: ViewEncapsulation.None
})
@Injectable({
providedIn: 'root'
})
@NgModule({
imports: [SharedModule]
})
export class ChartComponent implements OnInit {
constructor(private data: DataLoadService) {
//constructor code
};
}
I have no leads as to what might be causing the error. How do I fix this?
So, as @Muhammet Can TONBUL has mentioned you're using the component in a wrong way.
First of all your component should look something like this:
@Component({
selector: 'app-chart',
templateUrl: `./chart.component.html`,
styleUrls: ['./chart.component.scss'],
// Use this only if you DON'T want to encapsulate your SCSS
encapsulation: ViewEncapsulation.None
})
export class ChartComponent implements OnInit {
constructor(private data: DataLoadService) { ... };
...
}
The next step is to create a NgModule like you've already done:
@NgModule({
declarations: [
ChartComponent
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class ChartPrototypeModule { }
So, now you've declared your component and you can use it now but currently only in the other components of the ChartPrototypeModule.
To change this, you need to export your component in the module as well. This would look something like this:
// Introduced an additional array so it is not needed
// to add your components twice
const COMPONENTS = [
ChartComponent
];
@NgModule({
declarations: [
COMPONENTS
],
exports: [
COMPONENTS
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class ChartPrototypeModule { }
Now you can use your component in each module where you have imported the ChartPrototypeModule.
You can read more about feature modules here.
Note: If you're using the introduced array COMPONENTS to reduce redundancy only add the components to it, which you want to use outside of the module.