Angular 12，Typecript 4.2：class 列在 NgModule 的声明中，但不是指令、组件或 Z20826A3CB51D6C7D9C219C7F4BF4E5

Question

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?

Answer 1

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.