Angular 角度误差：'；组件'；X'；不包括在模块中…'；在子模块中声明时

我试图将对话框整合到一个角度模块中，但IDE中出现了一个linting错误：

组件“X”未包含在模块中，因此将不可用 在模板内部。考虑将其添加到NGMulk声明中。

尽管出现此错误，应用程序仍能成功加载和运行

组件定义示例

import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';

export interface AlertDialogData {
  titleText: string;
  dismissalText: string;
  contentComponent: string;
}

@Component({
  selector: 'app-alert-dialog',
  templateUrl: './alert-dialog.component.html',
  styleUrls: ['./alert-dialog.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AlertDialogComponent implements OnInit {

  constructor(private dialogRef: MatDialogRef<AlertDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {
  }

  handleCloseClick(): void {
    this.dialogRef.close();
  }

}

应用程序模块

// <editor-fold desc="Global Application Imports">
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { RouteDefinitions } from './app.routes';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import { WebWrapperModule } from 'web-wrapper';
import { UiComponentsModule } from './ui-components.module';
import { AppComponent } from './app.component';


// OPERATORS
import './rxjs-operators';

// SERVICES
import { LoginManagerService } from './services/login-manager.service';
import { UtilsService } from './services/utils.service';
import { DataManagerService } from './services/data-manager.service';
import { ReferenceDataManagerService } from './services/reference-data-manager.service';
import { InfrastructureApiService } from './services/infrastructure-api.service';
// </editor-fold>

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    FlexLayoutModule,
    HttpClientModule,
    WebWrapperModule,
    UiComponentsModule,
    AppDialogsModule,
    RouterModule.forRoot(RouteDefinitions)
  ],
  providers: [
    UtilsService,
    LoginManagerService,
    DataManagerService,
    InfrastructureApiService,
    ReferenceDataManagerService
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

首先：在声明部分（

app.module.ts

）声明所有组件

如果问题仍然存在，我记得这是beta angular cli版本的问题

您遇到的问题是baseUrl问题的变体。语言服务不正确地尊重baseUrl选项。例如，如果将共享模块的导入从app/shared/shared.module更改为../shared/shared.module，则错误将消失

---

添加

@angular/language service

作为开发专用项

或

是否在angular/language service安装npm

---

可以确认这已在v

5.2.9

中修复。YMMV的早期版本。

我也遇到了同样的问题，这就是解决问题的方法：

1） 转到Intellij/IDE设置，并在更改时勾选（设置）重新编译：

2） 转到tsconfig.json并将compileOnSave设置为true：

现在，删除引起问题的@Component，然后重新键入@Component

---

这对我有用：）祝你好运。

错误来自Angular语言服务（）。您可以通过清除设置|语言与框架|类型脚本中的Angular Language Service复选框来禁用它

---

对于任何与此错误抗争的人，解决方案是将组件添加到NgModule声明中，该声明可在'module.ts'文件中找到。

对于我来说，在声明组件的模块中，CommonModule的导入丢失时也会发生相同的错误

@NgModule({
声明：[示例组件]，
导入：[CommonModule]，
})
导出类ExampleModule{}

错误消息是否字面上是“x”？或者您的一个组件的名称？从提供的代码来看，您正在导出共享模块中的每个组件？您是否还计划导出所有要共享的模块？它不是字面上的“X”，而是出现在

AppDialogsModule

中声明的每个对话框组件上，即

HelperDialogComponent

。出口只包括在内，因为我看到它是在一个不同的SO答案中提供的，但它没有区别。

AppDialogsModule

已经作为导入包含在

AppModule

中，这是正确的要求吗？这里有很多关于如何工作的规则。考虑在NGCONF上查看我的视频：关于你的错误，你看过吗？这可能是VS代码语言服务的已知错误。您正在使用该工具吗？我正在使用CLI附带的npm包

@angular/language service:“^4.3.6

工具。也许这和VS代码版本的问题是一样的。谢谢分享演讲的链接。虽然我认为我的模块已经正确配置，（我删除了导出组件），但您的演示非常出色！如果有什么问题的话，我对“为什么”有了更多的理解，而不是采用盲目复制/粘贴策略。这样做会导致以下错误：

Uncaught错误：类型ZipLocatorDialogComponent是两个模块声明的一部分：AppDialogsModule和AppModule！请考虑将ZiPoCuto DealCube组件移动到导入AppDealScript模块和AppMead的更高模块中。您还可以创建一个新的NgModule，导出并包含ZipLocatorDialogComponent，然后在AppDialogsModule和AppModule中导入该NgModule。

这感觉很讽刺，因为他们的建议总结了我首先要做的事情。尝试从导入中删除，只将该模块放在DeclarationsOrganization中，但仍会显示错误消息。只是linting工具有点困惑，因为Angular仍然编译应用程序并运行，没有异常。或者在Visual Studio代码中，只需卸载Angular语言服务扩展。这为我在VS代码和Angular CLI:7.3.8上修复了它。非常感谢。

// <editor-fold desc="Global Application Imports">
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { RouteDefinitions } from './app.routes';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import { WebWrapperModule } from 'web-wrapper';
import { UiComponentsModule } from './ui-components.module';
import { AppComponent } from './app.component';


// OPERATORS
import './rxjs-operators';

// SERVICES
import { LoginManagerService } from './services/login-manager.service';
import { UtilsService } from './services/utils.service';
import { DataManagerService } from './services/data-manager.service';
import { ReferenceDataManagerService } from './services/reference-data-manager.service';
import { InfrastructureApiService } from './services/infrastructure-api.service';
// </editor-fold>

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    FlexLayoutModule,
    HttpClientModule,
    WebWrapperModule,
    UiComponentsModule,
    AppDialogsModule,
    RouterModule.forRoot(RouteDefinitions)
  ],
  providers: [
    UtilsService,
    LoginManagerService,
    DataManagerService,
    InfrastructureApiService,
    ReferenceDataManagerService
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular CLI: 1.5.0
Node: 7.2.1
OS: win32 x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0
@angular/flex-layout: 2.0.0-beta.11-b01c2d7
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.2
typescript: 2.4.2
webpack: 3.8.1