找不到 DialogDataExampleDialog 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？答案

【问题标题】：No component factory found for DialogDataExampleDialog. Did you add it to @NgModule.entryComponents?找不到 DialogDataExampleDialog 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？
【发布时间】：2020-07-16 08:48:17
【问题描述】：

我是 Angular 的新手。我正在整合 MatDialog 。我从 Angular 官方文档 https://material.angular.io/components/dialog/overview 复制了代码。当我点击打开对话框时，我遇到了这个错误。

这是我的donations.component.ts

import {MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';

export interface DialogData {
  animal: 'panda' | 'unicorn' | 'lion';
}
@Component({
  selector: 'app-donations',
  templateUrl: './donations.component.html',
  styleUrls: ['./donations.component.css']
})
export class DonationsComponent implements OnInit {

    constructor(public dialog: MatDialog) {}

    openDialog() {
      this.dialog.open(DialogDataExampleDialog, {
        data: {
          animal: 'panda'
        }
      });
    }

  ngOnInit(): void {
  }

}

@Component({
  selector: 'dialog-data-example-dialog',
  templateUrl: 'dialog-data-example-dialog.html',
})
@Injectable({ providedIn: 'root' })
export class DialogDataExampleDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
}

这是我的donations.module.ts

import { CommonModule } from '@angular/common';
import { DonationsComponent } from './donations.component';
import { DialogDataExampleDialog } from './donations.component';
import { DonationsRoutingModule } from './donations-routing.module';

import {MatTableModule} from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatSelectModule} from '@angular/material/select';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
 import {MatMenuModule} from '@angular/material/menu';


@NgModule({
  declarations: [DonationsComponent,DialogDataExampleDialog],
  imports: [
    CommonModule,
    DonationsRoutingModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatFormFieldModule,
    MatInputModule,
    MatCheckboxModule,
    MatSelectModule,
    MatButtonModule,
    MatIconModule,
    MatMenuModule,
],
exports: [DonationsComponent],
entryComponents: [DialogDataExampleDialog],
})
export class DonationsModule { }

这是我的donations.component.html

<button mat-button (click)="openDialog()">Open dialog</button>

这是我的dialog-data-example-dialog.html

<div mat-dialog-content>
  My favorite animal is:
  <ul>
    <li>
      <span *ngIf="data.animal === 'panda'">&#10003;</span> Panda
    </li>
    <li>
      <span *ngIf="data.animal === 'unicorn'">&#10003;</span> Unicorn
    </li>
    <li>
      <span *ngIf="data.animal === 'lion'">&#10003;</span> Lion
    </li>
  </ul>
</div>

我将非常感谢您解决我的问题。

【问题讨论】：

你需要在donations.module.ts文件中导入MatDialogModule
@moufed 我已经在 app.module.ts 上导入了
访问stackblitz.com/edit/angular-ivy-buk9dz
@moufed 感谢您的代码。您的代码正在运行，但我知道我的代码哪里出错了。你的对话框没有像文档一样打开，它是附加的

标签： javascript angularjs angular typescript

【解决方案1】：

我不确定这是否是真正的问题，但您不需要 DialogDataExampleDialog 上的 @Injectable 注释，因为它已经是一个 @Component。

可以试试吗？

【讨论】：

是的。我试过没有@Injectable({ providedIn: 'root' })。同样的问题。实际上我搜索了我的问题，他们说@Injectable({providedIn:'root'})。所以我放置并没有变化
并且你已经在你的组件中导入了组件？

【解决方案2】：

访问这里Angular material dialog sample,
这是基于@moufed 的代码。（@moufed，谢谢你）
我只是在styles.css 中添加了一行。这将按照您的意愿显示框。

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

无论如何，在这种情况下，我们需要检查这个"dynamically load a component by type imperatively"。
当然，OP的代码是2号实现，

组件应该是 AppModule 的“entryComponents”（app.module.ts 或 main.ts）
组件应该是模块的“entryComponents” --> 你的模块应该是 AppModule 的“导入”。

这里是donation.module.ts

@NgModule({
  declarations: [DonationsComponent,DialogDataExampleDialog],
  imports: [
    CommonModule,
   exportsModules
  ],
  exports: [DonationsComponent,DialogDataExampleDialog,...exportsModules],
  entryComponents: [DialogDataExampleDialog ], // Add component to entryComponents
})
export class DonationsModule { }

这里是 app.module.ts

@NgModule({
  imports:      [ 
   BrowserModule, FormsModule ,BrowserAnimationsModule, 
   DonationsModule // Should be here your module that contains entryComponents
  ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

如果我们需要通过ViewContainerRef 或类似的方式动态使用某些组件，我们的组件应该是“entryComponents”。

【讨论】：