DynamicComponentLoader.loadNextToLocation and injector

[vincentdieltiens]

Hi,

Why should we pass a ResolvedProvider[]to DynamicComponentLoader.loadNextToLocation instead of an Injector ?

I'm writing a small dialog system and I have a DialogService.open method which uses DynamicComponentLoader.loadNextToLocation to load a component inside the dialog. All is working fine until the loaded component asks for providers.

I can add a providers parameters to the DialogService.open method but it means that the user have to explicitly make something like this :

@Component({
    selector: 'my-app',
    providers: [DialogService]
})
class AppComponent {
    constructor(dialogService:DialogService) {
        var providers = Injector.resolve([
            FakeService
        ]);
        dialogService.open(MyDialogContentComponent, providers);
    }
}

I would like to let the dialogService use the injector of the AppComponent and let the possibility to do something like this :

@Component({
    selector: 'my-app',
    providers: [DialogService, FakeService]
})
class AppComponent {
    constructor(dialogService:DialogService) {
        dialogService.open(MyDialogContentComponent);
    }
}

What's the best way to do this ?

Thanks

[ericmartinezr]

@vincentdieltiens you can do this

constructor(dialogService:DialogService, injector: Injector) {
        dialogService.open(MyDialogContentComponent, injector);
    }

[vincentdieltiens]

Yes but the thing is that DynamicComponentLoader.loadNextToLocation doesn't accepts an injector but an array of ResolvedProvider.

Is there a way to get an array of ResolvedProvider for a given injector (the one of the AppComponent) ?.
I know how to create an injector from an array of ResolvedProvider but not the inverse.

[vincentdieltiens]

Another resulting problem of not using the main Injector is that when I use a directive like NgModel I get Exception for missing providers.

EXCEPTION: No provider for Renderer! (NgModel -> Token NgValueAccessor -> DefaultValueAccessor -> Renderer)

The code :
http://plnkr.co/edit/o09cpitFihjZE2EpHNRE?p=preview

Edit (2015-12-19) :
The solutions for this problem is to :

1. get the injected Renderer in the constructor of the AppComponent and add it to the providers given to the dialogService.open
2. get the injected Renderer in the constructor of the DialogService and add it to the providers given to the DynamicComponentLoader.loadNextToLocation

[frankbenoit]

@vincentdieltiens I try to upgrade this:
https://github.com/shlomiassaf/angular2-modal/blob/master/src/BootstrapModal/BootstrapModal.ts#L34

Can you give a hint how your solution would fix line 34, when changing the removed loadIntoNewLocation to loadNextToLocation?

[vincentdieltiens]

The thing is the loadNextToLocation takes an array of ResolvedProvider not an injector.

And there is no way to get all the resolved providers from an injector.

So, you have to change your method createBackdrop to accepts as input an array of providers instead of an injector.

Note : I don't use a separate component for the backdrop, it's just a div displayed or not with a "click" event to the dialog.

[frankbenoit]

Thanks for you help.

[ericmartinezr]

@vincentdieltiens check this plnkr, obviously is not the cleanest solution, but I think it works (at least it doesn't fail). By the way providers is optional in loadNextToLocation.

[vincentdieltiens]

@ericmartinezr : This should work but I don't like to access a "private" properties of the injector (the "_proto").

Maybe a public method to get all the resolved providers could be a good solution (or provide a method like loadNextToLocation with an injector as input).

[ericmartinezr]

@vincentdieltiens I have been working on a prototype, check this plnkr (is not working, couldn't make it because I don't know your app flow, it just has my prototype). So I would really like if you tell me if you can make it work or not.

With this prototype you can do two things

First get the providers

constructor(injector: Injector) {
   providers = injector.getResolvedProviders();
}

Pass the array

loadIntoLocation(Component, elementRef, 'anchor', providers)
loadNextToLocation(Component, elementRef, providers)

Or pass directly the injector

loadIntoLocation(Component, elementRef, 'anchor', injector);
loadNextToLocation(Component, elementRef, injector)

I'd really like your feedback

PS : Don' try to break it 😢, or well, yeah, better do it...

[tbosch]

So passing a separate injector into the DynamicComponentLoader can cause trouble. E.g. if you create an injector that is not connected to the Angular application injector, then suddenly things get broken.

A better way is this:
Change the DynamicComponentLoader to take 2 ElementRefs: 1 ElementRef that defines the place of the ViewContainer (i.e. the visual place) and one ElementRef that defines the injector to be used. Right now, both of these are the same.

The place to change this is in the ViewManager.createHostView: https://github.com/angular/angular/blob/master/modules/angular2/src/core/linker/view_manager.ts#L272, and then adjust ViewContainerRef.createHostView and DynamicComponentLoader methods as well.

[christopherthielen]

I'm rather interested in this issue. We have started work on UI-Router for ng2 and I'm currently using @ericmartinezr workaround, which digs through the private properties on the Injector.

I'd like the ability to make additional providers available to the child component (i.e., resolves and such), as well as replace a Provider with a different one for the child Component's injector.

Change the DynamicComponentLoader to take 2 ElementRefs: 1 ElementRef that defines the place of the ViewContainer (i.e. the visual place) and one ElementRef that defines the injector to be used

As I understand your comment, @tbosch, using the Injector directly from an ElementRef would not provide such a capability. Perhaps if there was an ElementRef and a list of new Providers?

As I thought about this more, I now believe I misunderstood your proposal @tbosch. I was thinking you meant to remove the providers?: ResolvedProvider[] parameter and instead use only an ElementRef's injector. After further thought, I believe you meant to simply introduce a new ElementRef parameter along side the existing parameters.

[trancedude]

Guys I am also having some problems related to this. Like @vincentdieltiens I discovered the only way to get a dynamically loaded component to see the proper dependencies is to manually construct and pass the providers (ResolvedProvider[]) to the dynamic loader. This works OK, but I have now also found that, even with this, child components spawned by the dynamically loaded component ALSO cannot see the injection tree. They may be instantiated "normally" via selector/template and only reference the parent (the dynamically loaded component) but still you will get a "no provider" error no matter what you pass into the constructor. It seems that once you dynamically load a component, everything downstream requires manual binding.

Can you guys think of any way around this? I can manually pass bindings on the first dynamic load, but having all descendants also require this is 1) untenable in a big project and 2) I'm not even sure how to force a component to use a particular injector.

Thanks for any thoughts you may have. It seems to me that what @tbosch suggested (allowing you to pass the injector) would work. Is there any way for me to implement that in a copy of the framework myself?

EDIT: I logged all of the injector objects at each component. If you recursively investigate the parent properties of the lowest child injector, you can see that it actually DOES contain the entire injector tree. You can trace all the way up through the dynamically loaded component injector, the manually injected bindings, all the way to the top of the application. So, the injector tree is there and not broken, but something about the dynamic load causes angular to be unable to traverse it. I'll keep posting w any updates - unless, LMK if not helpful.

[trancedude]

Correction on this. I have conflated another problem in my code with what I thought was the bug described above. The children of my dynamically loaded component were derived from abstract classes. I was trying to inject the abstract class into the children as opposed to the actual implementation which, per this

http://stackoverflow.com/questions/31202162/interface-based-programming-with-typescript-angular-2-systemjs

I have learned you cannot do. The injection tree does get broken upon a dynamic load (which I do think should be corrected), but I take back the part about the children thereafter not being able to traverse their own tree. Sry to clutter up the thread.

[oliverjanik]

Any news for this issue? How do I correctly setup child component so that it has access to providers setup in parents?