La aplicación no se compila con error
error NG6001: la clase
NavigationMenuItemComponentaparece en las declaraciones de NgModuleAppModule, 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 {} }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 {} }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';Debe ejecutar npm install al crear nuevos componentes. La recarga en caliente no parece poder agregar el componente.
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.
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:
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í
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.
Use @Input ya que es una práctica común de pasar propiedades a los componentes secundarios.
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.
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.
todas las respuestas anteriores no funcionaron para mí. Eliminé el componente y usé cli para generarlo de nuevo, lo generé ligeramente renombrado.
Intenta ng serve . El error debe ser resuelto. Si no, npm i it una vez.
Bueno, para mi caso, esta línea aquí estaba causando todo eso.
this.router.routeReuseStrategy.shouldReuseRoute = () => false;El siguiente comando de compilación me solucionó el problema en una aplicación de marco iónico
ionic cordova build androidCuando 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 )
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
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!