Stackblitz simple MatDialog example unable to find ComponentFactory

Question

I am trying to set-up a stackblitz example to ask a more complex question about an issue I am having with testing.

However, when setting up the basic example, while my basic test passes, clicking on the button to get the MatDialog to show throws an error that the ComponentFactory cannot be found. But I have added it to declarations and entryComponent in app.module.ts. What am I missing.?

p.s. The code itself works in my larger project, it is something about the way I am setting it up in Stackblitz that seems to be the issue.

p.p.s Based on Maihan's answer below, it got me thinking about the idea itself. Even though it builds and run, the idea complains about not being able to find the AddUserDialog component. But not sure why.

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 { }

Maihan Nijat · Accepted Answer · 2019-12-11T19:18:40.677

2

In the app.component.ts import from @angular/material/dialog:

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

Instead of:

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

And inject it for root. This usually happens if you are using it in service or for lazy loaded modules.

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

You are loading AddUserDialogComponent dynamically, therefore, you have added in app.module.ts > entryComponents. You need to do the same in the test unit:

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

Also, add <my-app></my-app> to your index.html for eliminating the following error in the console:

The selector "my-app" did not match any elements

edited Dec 11 '19 at 19:18

answered Dec 11 '19 at 17:44

Maihan Nijat

9,054
11
62
110

Thanks for the response. Good catch on I was wondering why that was an issue. I do import from angular/material/dialog at the module level. I have now changed to angular/material/dialog on the component level as well. Unfortunately, I am still having the same issue. – Dec 11 '19 at 18:08
Thank you again. It does not appear to be something with app itself. It is something about the test. If you click the first button on the right (the app) it works. If you click the button created by the test, the error is thrown. – Dec 11 '19 at 18:56
1

BOOM! That was it. Thank you so much. I am pretty sure this is also going to solve what my higher level question was. :) – Dec 11 '19 at 19:23

Stackblitz simple MatDialog example unable to find ComponentFactory

1 Answers1