title: Angular Error: 'Component 'X' is not included in a module...' when declared in a sub module
body: <p>I'm trying to consolidate my dialogs into an Angular module, but I'm getting a linting error in the IDE:</p>
  
  <blockquote>
    <p>Component 'X' is not included in a module and will not be available
    inside a template. Consider adding it to an NgModule declaration.</p>
  </blockquote>
  
  <p>Despite this error the application still loads and runs successfully.</p>
  
  <p><strong>Example Component Definition</strong></p>
  
  <pre><code>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&lt;AlertDialogComponent&gt;, @Inject(MAT_DIALOG_DATA) public data: any) { }
  
    ngOnInit() {
    }
  
    handleCloseClick(): void {
      this.dialogRef.close();
    }
  
  }
  </code></pre>
  
  <p><strong>Sub module making Declaration/Export</strong></p>
  
  <pre><code>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,
      MatDialogModule,
      MatInputModule,
      MatFormFieldModule,
      MatSelectModule,
      MatAutocompleteModule,
      MatButtonModule
    ],
    exports: [
      ZipLocatorDialogComponent,
      HelperDialogComponent,
      AlertDialogComponent
    ],
    declarations: [
      ZipLocatorDialogComponent,
      HelperDialogComponent,
      AlertDialogComponent
    ],
    entryComponents: [
      ZipLocatorDialogComponent,
      HelperDialogComponent,
      AlertDialogComponent
    ],
    schemas: [
      CUSTOM_ELEMENTS_SCHEMA
    ]
  })
  export class AppDialogsModule { }
  </code></pre>
  
  <p><strong>App Module</strong></p>
  
  <pre><code>// &lt;editor-fold desc="Global Application Imports"&gt;
  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';
  // &lt;/editor-fold&gt;
  
  @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 { }
  </code></pre>
  
  <p><strong>Versions</strong></p>
  
  <pre><code>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
  </code></pre>