Actualicé mi aplicación de Angular 11 a 12 y a TypeScript 4.2.4. Cuando sirvo, la aplicación no se compila con el 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.Este es el código en el 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 { }El ChartComponent es el siguiente:
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 }; }No tengo pistas sobre lo que podría estar causando el error. ¿Cómo puedo solucionar esto?
Entonces, como @Muhammet Can TONBUL ha mencionado, está usando el componente de manera incorrecta.
En primer lugar, su componente debería verse así:
@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) { ... }; ... } El siguiente paso es crear un NgModule como ya lo ha hecho:
@NgModule({ declarations: [ ChartComponent ], schemas: [ CUSTOM_ELEMENTS_SCHEMA ], }) export class ChartPrototypeModule { } Entonces, ahora ha declarado su componente y puede usarlo ahora, pero actualmente solo en los otros componentes de ChartPrototypeModule .
Para cambiar esto, también debe exportar su componente en el módulo. Esto se vería algo como esto:
// 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 { } Ahora puede usar su componente en cada módulo donde haya importado el ChartPrototypeModule .
Puede leer más sobre los módulos de características aquí .
Nota: Si está utilizando los COMPONENTS de matriz introducidos para reducir la redundancia, solo agregue los componentes que desea usar fuera del módulo.