У диалогового окна материала 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(root)

Вы должны использовать entryComponentsпод @NgModule.

Это для динамически добавляемых компонентов, которые добавляются с помощью ViewContainerRef.createComponent(). Добавление их в entryComponents позволяет автономному компилятору шаблонов скомпилировать их и создать для них фабрики.

Компоненты, зарегистрированные в конфигурациях маршрутов, также добавляются автоматически, entryComponentsпоскольку router-outletтакже используются ViewContainerRef.createComponent()для добавления маршрутизируемых компонентов в DOM.

Так что ваш код будет похож

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

Это происходит потому, что это динамический компонент, и вы не добавили его в entryComponentsunder @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 ]. Это позволяет ему использовать (с DI) MatDialogэкземпляр в компоненте. Я думаю, что компонент вызова 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 :. Я люблю автозаполнение IDE, но вы должны немного замедлиться и обратить внимание. Если вы абсолютно не можете его найти, выполните глобальный поиск имени, на которое он жалуется, и посмотрите на каждое использование, чтобы убедиться, что вы не ошиблись с именем.

В моем случае я добавил свой компонент в объявлений и entryComponents и получил те же ошибки. Мне также нужно было добавить MatDialogModule для импорта.

Если кому-то нужно позвонить в «Диалог» из сервисов, вот как решить проблему. Я согласен с некоторыми из приведенных выше ответов, мой ответ для вызова диалога в службах, если у кого-то могут возникнуть проблемы.

Создайте сервис, например, DialogService, затем переместите свою диалоговую функцию внутри сервисов и добавьте свой диалог-сервис в компонент, который вы вызываете, как показано ниже:

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

в противном случае вы получите ошибку