Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

2.4K
Views
Error de compilación angular: NG6001: la clase aparece en las declaraciones de NgModule 'AppModule', pero no es una directiva, un componente o una canalización

La aplicación no se compila con error

error NG6001: la clase NavigationMenuItemComponent aparece en las declaraciones de NgModule AppModule , pero no es una directiva, un componente o una canalización. Elimínelo de las declaraciones de NgModule o agregue un decorador angular apropiado.

El error desaparece cuando elimino el constructor con parámetros. ¿Cómo puedo resolver esto mientras mantengo el constructor que tiene parámetros, porque quiero usar para inicializar una lista del componente sin tener que llamar a métodos establecidos para cada miembro de la lista?

 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 {} }
over 4 years ago · Santiago Trujillo
14 answers
Answer question

0

Tuve el mismo problema. Eliminar OnInit en la parte de la declaración, así como dentro de la clase, me ayudó. Porque inicializó todas las propiedades vinculadas a datos de la directiva. Dado que este componente podría haberse agregado en app.module.ts.

 export class NavigationMenuItemComponent { .... .... set iconClass(iconClass) { this._iconClass = NavigationMenuItemComponent.ID_PREFIX + iconClass; } //ngOnInit(): void {} }
over 4 years ago · Santiago Trujillo Report

0

Recibí el mismo mensaje de error después de intentar mover un componente a otra carpeta con Resharper en Visual Studio. El problema fue que una de las importaciones se estropeó, a saber:

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

Lo arreglé así:

 import { Component, OnInit, Input, ViewChild } from '@angular/core';
over 4 years ago · Santiago Trujillo Report

0

Debe ejecutar npm install al crear nuevos componentes. La recarga en caliente no parece poder agregar el componente.

over 4 years ago · Santiago Trujillo Report

0

Agregue estas líneas en el componente:

 constructor() {}; ngOnInit(): void {};

También me enfrento al mismo problema, pero creo que el error ocurre porque angular ya no lo trata como un componente completo al agregar contructor y ngOnIt solucionó el problema.

over 4 years ago · Santiago Trujillo Report

0

Supongo que está sucediendo, porque Angular está diseñado para usar el constructor de componentes para trabajar con el sistema de inyección de dependencia que se basa en clases y no en primitivos.

Básicamente, no puede crear su propio componente y proporcionarle a su constructor los accesorios deseados.

Por qué , porque rompería el principio de inversión de control, lo que conduce a problemas de mantenibilidad.

Lo que puedes hacer:

  1. Use @Input() este decorador está diseñado específicamente por el equipo de desarrollo de Angular para proporcionar componentes con valores en tiempo de ejecución. No importa si los cambiará más tarde. Puedes leer más aquí y aquí

  2. Si necesita algún tipo de configuración para proporcionar globalmente o en algún nivel, puede crear su propio Injector y proporcionarle el Token que creó para que ese componente pueda consumir. Se puede encontrar algo de información aquí.

Básicamente, debería estar de acuerdo con el primer enfoque, ya que está claro lo que está haciendo en su código y es una práctica común, mientras que el segundo enfoque es más engorroso y se adaptaría mejor al uso en servicios.


TL;RD

Use @Input ya que es una práctica común de pasar propiedades a los componentes secundarios.

over 4 years ago · Santiago Trujillo Report

0

Tuve el mismo error, la forma en que lo arreglé para simplemente depurarlo paso a paso para descubrir la causa raíz, normalmente ocurre si no usó el nombre de selector correcto en su archivo html que se vincula en el archivo mecanografiado (.ts ).

lo segundo que debe verificar en los archivos templateURL, intente usar la interpolación de cadenas en lugar de (marque con $ para las variables). por ejemplo, use este {{título}} si el nombre de la variable es título. porque como es un módulo Ng Main, donde sea que no se pueda compilar, se producirá el mismo error.

pero en el error puede ver "no es una directiva", por lo que el problema en el selector que utilizó en html no coincide con los utilizados en el archivo ts.

over 4 years ago · Santiago Trujillo Report

0

Seguir funcionó para mí.

Se perdió una cotización alrededor de la variable en la condición ngIf.

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

para

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

Espero que esto pueda ayudar a alguien.

over 4 years ago · Santiago Trujillo Report

0

todas las respuestas anteriores no funcionaron para mí. Eliminé el componente y usé cli para generarlo de nuevo, lo generé ligeramente renombrado.

over 4 years ago · Santiago Trujillo Report

0

Intenta ng serve . El error debe ser resuelto. Si no, npm i it una vez.

over 4 years ago · Santiago Trujillo Report

0

Bueno, para mi caso, esta línea aquí estaba causando todo eso.

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

over 4 years ago · Santiago Trujillo Report

0

El siguiente comando de compilación me solucionó el problema en una aplicación de marco iónico

 ionic cordova build android
over 4 years ago · Santiago Trujillo Report

0

Cuando tiene varios mensajes de error, este mensaje de error aparece primero.
Así que asegúrese de revisar también los otros mensajes de error .

En tal caso, tuve un error tipográfico en tempalteURL (otro mensaje de error expresó claramente esto: NG2008: Could not find template file )

over 4 years ago · Santiago Trujillo Report

0

En mi caso, tengo un error silencioso en la declaración de importación de componentes:

mi ruta abreviada no funciona:

 import { PageLabelsConfig } from '@core/_interfaces/page-labels.interface';

Lo cambié como se muestra a continuación y luego funciona bien.

 import { PageLabelsConfig } from '../../../../core/_interfaces/page-labels.interface';

detalle de ruta abreviada: https://medium.com/@aleksanderkolata/angular-tips-01-get-rid-of-long-relative-import-paths-398c5926ecd4

over 4 years ago · Santiago Trujillo Report

0

En mi caso, había renovado los archivos de componentes. Pero me perdí actualizar templateUrl al nuevo nombre de archivo. Una vez que se corrigieron los nombres de archivo de templateUrl , todo comenzó a funcionar bien.

Esto es extraño, pero el error es el mismo por varias razones, ¡así que a veces es engañoso!

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!