Ngx-bootstrap: Cannot use Modal-hack in hybrid ng1/ng2 application

Created on 29 Sep 2016 · 12Comments · Source: valor-software/ngx-bootstrap

We are using ng-upgrade while migrating our application from Angular 1->2.

We're trying to use Modals in our ng2 components, but the required hack does not work in this context, since there is no root-level angular 2 component at the moment.

Tried adding a downgraded AppRoot-component in in the main ng1-template, but it is never added to applicationRef.components so it fails with _Cannot read property 'instance' of undefined_ in the ComponentsHelper

    ComponentsHelper.prototype.getRootViewContainerRef = function () {
        // The only way for now (by @mhevery)
        // https://github.com/angular/angular/issues/6446#issuecomment-173459525
        var appInstance = this.applicationRef.components[0].instance;
        if (!appInstance.viewContainerRef) {
            var appName = this.applicationRef.componentTypes[0].name;
            throw new Error("Missing 'viewContainerRef' declaration in " + appName + " constructor");
        }
        return appInstance.viewContainerRef;
    };

Is there any way around this for a hybrid app?

Source

danielnelin

Most helpful comment

Hi, everyone. As you wish, I added the temporary repository for testing this defect. Please notify me, if you will have some results about it.
ng1-ng2-modal

gios on 7 Oct 2016

🎉3

All 12 comments

I will try another hack today, so most probably I will drop this viewContainerRef root dep

valorkin on 3 Oct 2016

👍2

+1 Please try another hack, I still get the error: Cannot read property 'parentInjector' of undefined

jhhoff02 on 3 Oct 2016

Hi, thanks for looking at this.
Unfortunately, I don't think this solves our problem.
The applicationRef.components is still empty, so i just fails in a different way.
Our issue is that almost all of our application is still angular 1, including root-parts.
I still don't see how I am supposed to use the ng2-hack, and without the hack, I guess there will never be a viewContainerRef to refer to?

Maybe I'm just misunderstanding how I am supposed to get this working in hybrid-mode.
Did that work for you?

danielnelin on 6 Oct 2016

Give me a sample repo to reproduce, and I will drop a solution

valorkin on 6 Oct 2016

👍1

Hi, everyone. As you wish, I added the temporary repository for testing this defect. Please notify me, if you will have some results about it.
ng1-ng2-modal

gios on 7 Oct 2016

🎉3

Awesome thanks!

valorkin on 7 Oct 2016

cloning, it is time to fix this once and for all ;)

valorkin on 10 Oct 2016

all possible hack points are empty for ngUpgrade

valorkin on 10 Oct 2016

It's very bad news, do anyone have another ideas how to fix that and close the issue?

gios on 10 Oct 2016

pss I am testing fix for it :)

valorkin on 10 Oct 2016