angular material, show dialog from a component that is lazily loaded

Question

I have a lazy loaded module, named account. In account there's a RegisterComponent and a RegisterDialogComponent.

I'd like to show a dialog from AccountModule.RegisterDialogComponent in AppModule.AppComponent. For testing purposes.

RegisterDialogComponent is declared and in entrycomponents, in the AccountModule.

If I add the AccountModule to AppModule's imports it works, but then this AccountModule isn't lazily loaded anymore.

My question is, how do I open a dialog with content from a lazy loaded module? Is that even possible?

Answer 1

It's not possible, at least I don't know how.

The workaround is to have everything regarding the dialog and the components in their own module, aka same scope. This will however still not allow to open a dialog from an external module if this account module is lazy loaded. But it will allow to open a dialog in the lazy loaded module from the lazy loaded module. Long term, account features are a core part of an application and as much as I'd like it, it has to be included in the initial bulk of js files being loaded.

Note that even if lazily loaded, you have to add your local DialogService to providers, even though it's @Injectable({providedIn: 'root'}). And of course the DialogComponent needs to be in entryComponents.