Angular 编译错误：NG6001：该类在 NgModule 'AppModule' 的声明中列出，但不是指令、组件或管道答案

【问题标题】：Angular Compile Error: NG6001: The class is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipeAngular 编译错误：NG6001：该类在 NgModule 'AppModule' 的声明中列出，但不是指令、组件或管道
【发布时间】：2020-08-02 03:10:45
【问题描述】：

应用程序无法编译并出现错误

错误 NG6001：类 NavigationMenuItemComponent 列在 NgModule AppModule 的声明中，但不是指令、组件或管道。从 NgModule 的声明中删除它，或者添加适当的 Angular 装饰器。

当我删除带参数的构造函数时，错误消失了。在维护具有参数的构造函数的同时如何解决这个问题，因为我想用它来初始化组件列表，而不必为列表中的每个成员调用 set 方法

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

【问题讨论】：

你的模块文件是什么？似乎问题就在那里
就我而言，我必须重新启动ng serve 才能使其工作！但另一种可能性是你写了*ngIf 用小写我喜欢*ngif

标签： angular typescript

【解决方案1】：

创建新组件时必须运行npm install。热重载似乎无法添加组件。

【讨论】：

重新执行 ng serve 为我做了。

【解决方案2】：

我有同样的问题。在声明部分和类中删除 OnInit 对我有帮助。因为它初始化了指令的所有数据绑定属性。因为这个组件本来可以添加到 app.module.ts 中的。

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

        //ngOnInit(): void {}
    }

【讨论】：

【解决方案3】：

在组件中添加这些行：

constructor() {};

ngOnInit(): void {};

我也面临同样的问题，但我认为发生错误是因为 Angular 不再通过添加构造函数将其视为完整组件，ngOnIt 已修复问题。

【讨论】：

为我工作！在我的情况下，在构造函数之后缺少尾随“;”，添加 constructor() {}; 修复它

【解决方案4】：

我想它正在发生，因为 Angular 被设计为使用组件的构造函数来与基于类而不是基元的依赖注入系统一起工作。

基本上，您不能创建自己的组件并为其构造函数提供所需的道具。

为什么，因为它会破坏控制反转原则，从而导致可维护性问题。

你可以做什么：

使用 @Input() 这个装饰器是 Angular 的开发团队专门设计的，用于在运行时为组件提供值。以后是否更改它们并不重要。你可以阅读更多here和here
如果您需要某种配置来全局或在某个级别提供，您可以创建自己的Injector 并提供您创建的Token，以便组件可以使用。一些信息可以找到here

基本上，第一种方法应该没问题，因为很清楚您在代码中做什么，这是一种常见的做法，同时第二种方法更麻烦，更适合在服务中使用。

TL;DR

使用@Input，因为这是将属性传递给子组件的常见做法。

【讨论】：

【解决方案5】：

当您有多个错误消息时，我会首先显示此错误消息。
所以请务必检查其他错误消息。

如果我在tempalteURL 中有错字（另一个错误消息清楚地表达了这一点：NG2008: Could not find template file）

【讨论】：

【解决方案6】：

在我尝试使用 Visual Studio 中的 Resharper 将组件移动到另一个文件夹中后，我收到了相同的错误消息。问题在于其中一个导入搞砸了，即：

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

像这样修复它：

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

【讨论】：

【解决方案7】：

以下对我有用。

ngIf 条件中的变量周围缺少引号。

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

到

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

希望这对某人有所帮助。

【讨论】：

【解决方案8】：

以上所有答案都不适合我。我删除了组件并使用cli重新生成它，我生成它稍微重命名。

【讨论】：

【解决方案9】：

试试ng serve。错误应该得到解决。如果没有，npm i 一次。

【讨论】：

【解决方案10】：

以下构建命令已为我解决了离子框架应用程序中的问题

ionic cordova build android

【讨论】：

【解决方案11】：

就我而言，这行是造成所有这些的原因

this.router.routeReuseStrategy.shouldReuseRoute = () =&gt; false;

【讨论】：

【解决方案12】：

在我的情况下，组件导入语句中有一些静默错误：

我的速记路径不起作用：

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

我改成下面这样就可以正常工作了

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

速记路径详细信息：https://medium.com/@aleksanderkolata/angular-tips-01-get-rid-of-long-relative-import-paths-398c5926ecd4

【讨论】：

【解决方案13】：

我遇到了同样的错误，我修复它的方式只是逐步调试它以找出根本原因，如果您没有在绑定到 typescript 文件的 html 文件中使用正确的选择器名称，通常会发生这种错误(.ts)。

您需要检查 templateURL 文件的第二件事，尝试使用字符串插值而不是（使用 $ 表示变量的标签）。例如，如果变量名称是标题，则使用此 {{ title }}。因为它是一个 Ng Main 模块，所以无论在哪里编译失败都会遇到同样的错误。

但在错误中您可以看到“它不是指令”，因此您在 html 中使用的选择器中的问题与 ts 文件中使用的选择器不匹配。

【讨论】：