Stackblitz 简单 MatDialog 示例无法找到 ComponentFactory

Question

我正在尝试设置一个stackblitz example 来就我在测试中遇到的问题提出一个更复杂的问题。

但是，在设置基本示例时，当我的基本测试通过时，单击按钮以显示 MatDialog 会引发无法找到 ComponentFactory 的错误。但我已将其添加到 app.module.ts 中的声明和 entryComponent 中。我错过了什么。？

附言代码本身适用于我更大的项目，这与我在 Stackblitz 中设置它的方式有关，这似乎是问题所在。

p.p.s 根据下面 Maihan 的回答，我开始思考这个想法本身。即使它构建并运行，这个想法也会抱怨无法找到 AddUserDialog 组件。但不知道为什么。

app.component.ts

import { Component } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material';
import { AddUserDialogComponent } from './AddUserDialogComponent';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

constructor(public dialog: MatDialog){
};

openAddUserDialog(): void{
   const dialogConfig = new MatDialogConfig();

   dialogConfig.data = {
        employeeList:['foo', 'bar'],
        roles: ['fiz', 'faz']
    };

   const dialogRef = this.dialog.open(AddUserDialogComponent, dialogConfig);

   dialogRef.afterClosed().subscribe((data) => {
   console.log('hello');
   });
 }
}

app.module.ts

import { NgModule } from '@angular/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { MatDialogModule, MatDialogRef, MatDialog } from '@angular/material/dialog';
import { AddUserDialogComponent } from './AddUserDialogComponent';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, MatDialogModule, NoopAnimationsModule ],
  declarations: [ AppComponent, AddUserDialogComponent ],
  exports: [AppComponent, AddUserDialogComponent],
  entryComponents: [ AddUserDialogComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 1

在app.component.ts 从@angular/material/dialog 导入：

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

代替：

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

并为 root 注入它。如果您在服务中使用它或用于延迟加载的模块，通常会发生这种情况。

@Injectable({ providedIn: 'root' })
export class AddUserDialogComponent implements OnInit {}

您正在动态加载AddUserDialogComponent，因此，您添加了app.module.ts > entryComponents。你需要在测试单元中做同样的事情：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [RouterTestingModule, MatDialogModule, NoopAnimationsModule],
    providers: [AddUserDialogComponent],
    declarations: [AppComponent, AddUserDialogComponent]
  })
    .overrideModule(BrowserDynamicTestingModule, {
      set: { entryComponents: [AddUserDialogComponent] }
    })
    .compileComponents();
}));

另外，将<my-app></my-app> 添加到您的index.html 以消除控制台中的以下错误：

选择器“my-app”没有匹配任何元素