Angular2 재질 대화 상자에 문제가 있습니다-@ NgModule.entryComponents에 추가 했습니까?

https://material.angular.io/components/component/dialog에 있는 문서를 따르려고 하는데 왜 아래 문제가 있는지 이해할 수 없습니까?

내 구성 요소에 아래를 추가했습니다.

@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}

내 모듈에서 나는 추가했다

import { HomeComponent,DialogResultExampleDialog } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog
  ],

// ...

그러나 나는이 오류가 발생합니다 ....

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:53:0 caused by: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:50
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345
    error_handler.js:52 ORIGINAL EXCEPTION: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:52
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345

당신은 entryComponents내부에 동적으로 생성 된 구성 요소를 추가해야 합니다@NgModule

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

참고 : 어떤 경우에는 entryComponents아래 게으른로드 된 모듈 이 작동하지 않습니다, 해결 방법은 당신에 넣어으로 app.module(루트)

entryComponents아래 에서 사용해야 @NgModule합니다.

을 사용하여 추가 한 동적으로 추가 된 구성 요소를위한 것 ViewContainerRef.createComponent()입니다. entryComponents에 추가하면 오프라인 템플릿 컴파일러가 컴파일하고 팩토리를 만들도록 지시합니다.

라우팅 된 구성 요소를 DOM에 추가 하는 데 에도 사용 entryComponents되므로 경로 구성에 등록 된 구성 요소도 자동으로 추가됩니다.router-outletViewContainerRef.createComponent()

그래서 당신의 코드는

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

이것은 동적 구성 요소 이므로 entryComponents아래에 추가하지 않았기 때문에 발생 @NgModule합니다.

간단히 거기에 추가하십시오.

@NgModule({
  /* ----------------- */
  entryComponents: [ DialogResultExampleDialog ] // <---- Add it here

Angular 팀이 어떻게 이야기 하는지 살펴보십시오 entryComponents.

entryComponents?: Array<Type<any>|any[]>

이 모듈을 정의 할 때 컴파일해야하는 구성 요소 목록을 지정합니다. 여기에 나열된 각 구성 요소에 대해 Angular는 ComponentFactory를 만들어 ComponentFactoryResolver에 저장합니다.

또한 다음을 @NgModule포함 하는 방법 목록입니다 entryComponents...

보시다시피, entryComponents구성 요소 배열을 허용하는 것을 포함하여 모든 것은 선택 사항입니다 (물음표를보십시오) .

@NgModule({ 
  providers?: Provider[]
  declarations?: Array<Type<any>|any[]>
  imports?: Array<Type<any>|ModuleWithProviders|any[]>
  exports?: Array<Type<any>|any[]>
  entryComponents?: Array<Type<any>|any[]>
  bootstrap?: Array<Type<any>|any[]>
  schemas?: Array<SchemaMetadata|any[]>
  id?: string
})

MatDialog서비스 내부 에서 사용하려는 경우 전화를 걸면 'PopupService'해당 서비스가 다음과 같은 모듈에 정의됩니다.

@Injectable({ providedIn: 'root' })

작동하지 않을 수 있습니다. 지연 로딩을 사용하고 있지만 관련이 있는지 확실하지 않습니다.

당신은해야합니다 :

• PopupService사용하여 대화 상자를 여는 구성 요소에 직접 제공하십시오 [ provide: PopupService ]. 이를 통해 MatDialog구성 요소 의 인스턴스 를 DI와 함께 사용할 수 있습니다 . 구성 요소 호출 open은이 인스턴스의 대화 상자 구성 요소와 동일한 모듈에 있어야 한다고 생각합니다 .
• 대화 상자 구성 요소를 app.module로 이동하십시오 (다른 답변이 말했듯이)
• matDialog서비스를 요청할 때 참조를 전달 하십시오.

내 뒤죽박죽 대답을 합니다만, 요점은 그것이이다 인 providedIn: 'root'MatDialog이 구성 요소 오프 피기 백에 필요하기 때문에 일을 깨는된다.

지연 로딩의 경우 지연 로딩 모듈에서 MatDialogModule 을 가져와야 합니다. 그런 다음이 모듈은 자체 가져온 MatDialogModule을 사용하여 입력 컴포넌트를 렌더링 할 수 있습니다 .

@NgModule({
  imports:[
    MatDialogModule
  ],
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

재료 대화를 통합하는 것이 가능 하지만 , 사소한 기능의 복잡성이 매우 높다는 것을 알았습니다. 사소한 기능을 달성하려고하면 코드가 더 복잡해집니다.

그런 이유로 PrimeNG Dialog 를 사용하여 사용하기가 매우 간단했습니다.

m-dialog.component.html:

<p-dialog header="Title">
  Content
</p-dialog>

m-dialog.component.ts:

@Component({
  selector: 'm-dialog',
  templateUrl: 'm-dialog.component.html',
  styleUrls: ['./m-dialog.component.css']
})
export class MDialogComponent {
  // dialog logic here
}

m-dialog.module.ts:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { DialogModule } from "primeng/primeng";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    DialogModule
  ], 
  exports: [
    MDialogComponent,
  ], 
  declarations: [
    MDialogComponent
  ]
})
export class MDialogModule {}

컴포넌트의 html에 대화 상자를 추가하기 만하면됩니다.

<m-dialog [isVisible]="true"> </m-dialog>

PrimeNG PrimeFaces 문서 는 따르기 쉽고 매우 정확합니다.

문서에entryComponents 지정된대로에 추가해야합니다 .

@NgModule({
  imports: [
    // ...
  ],
  entryComponents: [
    DialogInvokingComponent, 
    DialogResultExampleDialog
  ],
  declarations: [
    DialogInvokingComponent,   
    DialogResultExampleDialog
  ],
  // ...
})

다음 과 같이 정의 된 대화 상자가있는 앱 모듈 파일 의 전체 예 는 다음과 같습니다 entryComponents.

당신이 나와 같은데이 스레드가 "하지만 컴포넌트를 추가하지 않고 가드 / 서비스 / 파이프 등을 추가하려고합니다." 문제는 라우팅 경로에 잘못된 유형을 추가했을 수 있습니다. 그것이 내가 한 일입니다. 실수로 canActivate : 섹션 대신 component : 경로 섹션에 가드를 추가했습니다. 나는 IDE 자동 완성을 좋아하지만 조금 느리게하고주의를 기울여야합니다. 당신이 그것을 절대 찾을 수없는 경우, 불평하는 이름을 전체적으로 검색하고 모든 사용법을 살펴보고 이름으로 미끄러지지 않았는지 확인하십시오.

필자의 경우 구성 요소를 선언 및 entryComponents에 추가했으며 동일한 오류가 발생했습니다. 또한 가져 오기에 MatDialogModule을 추가해야했습니다.

누군가 서비스에서 대화 상자를 호출 해야하는 경우 여기에서 문제를 해결하는 방법이 있습니다. 위의 답변 중 일부에 동의합니다. 누군가 문제가 발생할 수있는 경우 서비스에서 대화 상자를 호출하기위한 답변입니다.

예를 들어 DialogService와 같은 서비스를 만든 다음 서비스 내에서 대화 상자 기능을 이동하고 아래 코드와 같이 호출하는 구성 요소에 dialogservice를 추가하십시오.

 @Component({
  selector: "app-newsfeed",
  templateUrl: "./abc.component.html",
  styleUrls: ["./abc.component.css",],
  providers:[DialogService]
})

그렇지 않으면 오류가 발생합니다