17
votes

Erreur de compilation angulaire: NG6001: la classe est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube

L'application ne parvient pas à se compiler avec une erreur

erreur NG6001: La classe 'NavigationMenuItemComponent' est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube. Supprimez-le des déclarations du NgModule ou ajoutez un décorateur angulaire approprié.

L'erreur disparaît lorsque je supprime le constructeur avec des paramètres.
Comment puis-je résoudre ce problème tout en conservant le constructeur qui a des paramètres, car je veux utiliser pour initialiser une liste du composant sans avoir à appeler des méthodes set pour chaque membre de la liste



    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 {}
    }


2 commentaires

Quel est votre fichier de module? semble que les problèmes sont là


Dans mon cas, j'ai dû redémarrer ng serve pour que ça marche! Mais une autre possibilité est que vous *ngIf avec une minuscule j'aime *ngif


6 Réponses :


5
votes

J'ai eu le même problème. La suppression d'OnInit dans la partie déclaration ainsi qu'à l'intérieur de la classe m'a aidé. Parce qu'il a initialisé toutes les propriétés liées aux données de la directive. Étant donné que ce composant aurait pu être ajouté dans app.module.ts.

export class NavigationMenuItemComponent {
     ....
     ....
     set iconClass(iconClass) {
            this._iconClass = NavigationMenuItemComponent.ID_PREFIX + iconClass;
        }

        //ngOnInit(): void {}
    }


0 commentaires

0
votes

J'ai eu le même message d'erreur après avoir essayé de déplacer un composant dans un autre dossier avec Resharper dans Visual Studio. Le problème était que l'une des importations avait été gâchée, à savoir:

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

Fixé comme ça:

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


0 commentaires

10
votes

Vous devez exécuter npm install lors de la création de nouveaux composants. Le rechargement à chaud ne semble pas pouvoir ajouter le composant.


2 commentaires

Cela a fonctionné pour moi! Merci!


La ré-exécution du ng serve fait pour moi.



2
votes

Ajoutez ces lignes dans le composant:

constructor() {};

ngOnInit(): void {};

Je suis également confronté au même problème, mais je pense que l'erreur se produit car angular ne le traite plus comme un composant complet en ajoutant le constructeur et ngOnIt ont résolu le problème.


1 commentaires

A travaillé pour moi! Dans mon cas, le ";" de fin manquait après le constructeur, en ajoutant constructor() {}; réparé



0
votes

Je suppose que cela se produit, car Angular est conçu pour utiliser le constructeur du composant pour fonctionner avec le système d'injection de dépendances qui est basé sur des classes et non sur des primitives.

Fondamentalement, vous ne pouvez pas créer votre propre composant et fournir à son constructeur les accessoires souhaités.

Pourquoi , parce que cela briserait l'inversion du principe de contrôle, ce qui conduit à des problèmes de maintenabilité.

Ce que tu peux faire:

  1. Utilisez @Input() ce décorateur est spécialement conçu par l'équipe de développement d'Angular pour fournir au composant des valeurs au moment de l'exécution. Peu importe que vous les changiez plus tard. Vous pouvez en lire plus ici et ici

  2. Si vous avez besoin d'une sorte de configuration à fournir globalement ou à un certain niveau, vous pouvez créer votre propre Injector et lui fournir le Token vous avez créé afin que ce composant puisse consommer. Certaines informations peuvent être trouvées ici

Fondamentalement, vous devriez accepter la 1ère approche car il est clair ce que vous faites dans votre code et c'est une pratique courante, tandis que la 2ème approche est plus lourde et conviendrait mieux à une utilisation dans les services.


TL; DR

Utilisez @Input car c'est une pratique courante de transmettre des propriétés aux composants enfants.


0 commentaires

0
votes

J'ai eu la même erreur, la façon dont je l'ai corrigée pour simplement le déboguer étape par étape pour trouver la cause racine, normalement cela se produit si vous n'avez pas utilisé le nom de sélecteur correct dans votre fichier html qui se lie dans le fichier dactylographié (.ts ).

la deuxième chose que vous devez vérifier dans les fichiers templateURL, essayez d'utiliser l'interpolation de chaîne plutôt que (tabtick avec $ pour les variables). par exemple, utilisez ce {{titre}} si le nom de la variable est title. car comme c'est un module Ng Main, partout où il échouera à le compiler, il rencontrera la même erreur.

mais dans l'erreur, vous pouvez voir "ce n'est pas une directive", donc le problème dans le sélecteur que vous avez utilisé en html ne correspond pas à ceux utilisés dans le fichier ts.


0 commentaires