Angular2 material dialog has issues - Did you add it to @NgModule.entryComponents?

Question

I am trying to follow the docs on https://material.angular.io/components/component/dialog but I cannot understand why it has the below issue?

I added the below on my

Answer 1

If you're trying to use MatDialog inside a service - let's call it 'PopupService' and that service is defined in a module with:

@Injectable({ providedIn: 'root' })

then it may not work. I am using lazy loading, but not sure if that's relevant or not.

You have to:

• Provide your PopupService directly to the component that opens your dialog - using [ provide: PopupService ]. This allows it to use (with DI) the MatDialog instance in the component. I think the component calling open needs to be in the same module as the dialog component in this instance.
• Move the dialog component up to your app.module (as some other answers have said)
• Pass a reference for matDialog when you call your service.

Excuse my jumbled answer, the point being it's the providedIn: 'root' that is breaking things because MatDialog needs to piggy-back off a component.