각도 오류: '구성 요소 'X'가 모듈에 포함되어 있지 않습니다.하위 모듈에 선언된 경우

각도 오류: '구성 요소 'X'가 모듈에 포함되어 있지 않습니다.하위 모듈에 선언된 경우

대화 상자를 Angular 모듈로 통합하려고 하는데 IDE에서 보풀 오류가 발생합니다.

구성 요소 'X'는 모듈에 포함되어 있지 않으므로 템플릿 내에서 사용할 수 없습니다.NgModule 선언에 추가하는 것을 고려해 보십시오.

이 오류에도 불구하고 응용 프로그램은 성공적으로 로드되고 실행됩니다.

구성 요소 정의 예제

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

저도 같은 문제가 있었는데 이렇게 해결되었습니다.

Intellij / IDE 설정으로 이동하여 Recompile on changes를 체크(설정)합니다.

tsconfig.json으로 이동하고 compileOnSave를 true로 설정합니다.

이제 문제의 원인이 되는 @Component를 제거하고 @Component를 다시 입력합니다.

이것은 나에게 효과가 있었습니다 :) 행운을 빕니다.

첫 번째: 선언 섹션에서 모든 구성 요소를 선언합니다(app.module.ts).

문제가 지속된다면, 저는 그것이 베타 앵귤러-cli 버전의 문제라고 기억합니다.

현재 발생하고 있는 문제는 baseUrl 문제의 변형입니다.언어 서비스가 baseUrl 옵션을 올바르게 존중하지 않습니다.예를 들어 공유 모듈 가져오기를 app/shared/shared.module에서 ../shared/shared.module로 변경하면 오류가 사라집니다.

IntelliJIDE(WebStorm을 실행 중)를 사용하는 경우 다음을 시도하십시오.

파일 -> 캐시 무효화 / 재시작 -> 무효화 및 재시작

그것은 그것을 고칠 것입니다.FooComponent is not declared in any Angular modulemessage

이 오류로 어려움을 겪고 있는 모든 사용자에게 해결책은 'module.ts' 파일에서 찾을 수 있는 NgModule 선언에 구성 요소를 추가하는 것입니다.

더하다@angular/language-service

또는

하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 나다npm install @angular/language-service

v에서 이 문제가 해결되었는지 확인할 수 있습니다.5.2.9이전 버전의 YMMV.

구성 요소가 선언된 모듈에서 공통 모듈 가져오기가 누락되었을 때 동일한 오류가 발생했습니다.

@NgModule({
    declarations: [ExampleComponent],
    imports: [CommonModule],
})
export class ExampleModule {}

이 오류는 Angular 언어 서비스(https://github.com/angular/angular/issues/14961) 에서 발생합니다.Settings | Languages & Frameworks | Typescript에서 Angular Language Service 확인란을 선택 취소하여 비활성화할 수 있습니다.

https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000014820-Component-is-not-includd-in-a-module-and-will-not-be-available-inside-a-template

언급URL : https://stackoverflow.com/questions/47584359/angular-error-component-x-is-not-included-in-a-module-when-declared-in-a