角度エラー： 'コンポーネント' X 'はモジュールに含まれていません...'サブモジュールで宣言されたとき

Question

ダイアログをAngularモジュールに統合しようとしていますが、 IDE：

私の知る限りでは、コンポーネント（パイプとディレクティブのみ）を他のモジュールで使用するためにエクスポートする必要はありません。

このエラーが発生しても、アプリケーションはまだ読み込まれて正常に実行されます。

例コンポーネント定義

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

アプリケーションモジュール

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

Answer 1

まず：宣言セクション（AppModule）にすべてのコンポーネントを宣言します。

問題が解決しない場合は、beta angular-cliのバージョンに問題があることを覚えています。

The issue you are running into is a variant of the baseUrl issue. The language service does not correctly respect the baseUrl option. For example, if you change the import of the shared module from app/shared/shared.module to ../shared/shared.module then the errors go away.