Components: DIalogInjector and lazy-loaded modules Injectors

[eagle-dan1349]

Bug, feature request, or proposal:

[x] Bug

What is the expected behavior?

DialogInjector should be aware of Injector from lazy-loaded module

What is the current behavior?

DialogInjector is unaware of lazy-loaded module and attempts to inject services provided by lazy-loaded module result in 'No provider for ...' errors

What are the steps to reproduce?

1. Create route to lazy loaded module.
2. Provide service from lazy-loaded module.
3. Declare dialog component in lazy-loaded module.
4. Inject service to dialog component.
5. Try to display dialog.
6. Catch error.

Plunker template: http://embed.plnkr.co/eBQNsfV7jTys4THqfT77/

What is the use-case or motivation for changing an existing behavior?

I try to split my app into lazy-loaded modules.

Which versions of Angular, Material, OS, browsers are affected?

Angular: ~2.1.0
Material: ^2.0.0-alpha.9-3

[jelbourn]

Thank you for your excellent bug report.

[karolmie1]

@jelbourn Any tips on how to circumvent this? Just recently stumbled uppon this problem. Shame its unlikely i can help fixing it.

[eagle-dan1349]

@karolmie1 I had to give up lazy loading until the issue is resolved

[jelbourn]

@eagle-dan1349 I think the next release will fix this- we're getting rid of forRoot (#2556), so the lazily-loaded module can import MdDialogModule and it will get a new instance with the appropriate injector. You can install the latest SHA from https://github.com/angular/material2-builds to test it out.

[coder925]

Excellent! It works with the latest bits given that you are also importing _MaterialModule_ in the lazy loaded sub-module. Thanks!

[elvisbegovic]

@eagle-dan1349 can you close this issue please, the new way is always import material module without forRoot() method, and internally material check for each service if token exist use it otherwise create new instance.

cc @jelbourn

[sebrojas14]

What about this with angular 8?

[DrewImm]

@sebrojas14

What about this with angular 8?

In Angular 8, I solved the issue by adding MatDialogModule into the submodule's import array:

...
import { MatDialogModule } from '@angular/material/dialog';
...

@NgModule({
    declarations: [ TheDialogComponent ],
    imports: [
        ...,
        MatDialogModule, // < Add this line!
        ...
    ],
    entryComponents: [ TheDialogComponent ]
})
export class TheSubModule {}

[joesleiman]

@DrewImm
it didn't work for me. any new suggestion?

[Splaktar]

I can't confirm that this is the case 100%, but there is some discussion about how Ivy may improve upon this behavior in https://github.com/angular/angular/issues/14324#issuecomment-534716807.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}