角度误差：当在子模块中声明时,’组件’X’不包含在模块中……

我正在尝试将我的对话框合并到一个Angular模块中,但是我在IDE中遇到了一个linting错误：

Component ‘X’ is not included in a module and will not be available
inside a template. Consider adding it to an NgModule declaration.

据我所知,您不必导出组件(仅管道和指令)以在其他模块中使用它们.

尽管存在此错误,应用程序仍会加载并成功运行.

示例组件定义

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();
  }

}

子模块制作声明/导出

import { CUSTOM_ELEMENTS_SCHEMA,NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ZipLocatorDialogComponent } from './zip-locator-dialog/zip-locator-dialog.component';
import { AlertDialogComponent } from './alert-dialog/alert-dialog.component';
import { HelperDialogComponent } from './helper-dialog/helper-dialog.component';
import {
  MatAutocompleteModule,MatButtonModule,MatDialogModule,MatFormFieldModule,MatInputModule,MatSelectModule
} from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,FlexLayoutModule,FormsModule,ReactiveFormsModule,MatSelectModule,MatAutocompleteModule,MatButtonModule
  ],exports: [
    ZipLocatorDialogComponent,HelperDialogComponent,AlertDialogComponent
  ],declarations: [
    ZipLocatorDialogComponent,entryComponents: [
    ZipLocatorDialogComponent,schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppDialogsModule { }

应用模块

// <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,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

解决方法

我有同样的问题,这是如何解决的：

1)转到Intellij / IDE设置并勾选(设置)对以下更改的重新编译：

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

现在去除导致问题的@Component,并重新键入@Component.

这对我有用:)祝你好运.