ngx-bootstrap: RC5 Modal not working in multiple components

guys, 1.1.5 is published please confirm that fix is working properly thanks in advance PS: don’t forget to add viewContainerRef to main app component http://valor-software.com/ng2-bootstrap/#/modals

@valorkin I tested with RC7 and ng2-bootstrap v1.1.3

Now when i use a modal dialog inside of a component that is lazy loaded (and i have config.backdrop = “static”). It gets caught in an infinite loop.

In the code below, appInstance is getting set to false because it is not found in the injector. And the injector’s parentInjector is undefined.

ComponentsHelper.prototype.getRootViewContainerRef = function (_injector) {
    // The only way for now (by @mhevery)
    // https://github.com/angular/angular/issues/6446#issuecomment-173459525
    // this is a class of application bootstrap component (like my-app)
    var classOfRootComponent = this.applicationRef.componentTypes[0];
    // this is an instance of application bootstrap component
    var appInstance;
    var injector = _injector;
    while (!appInstance) {
        appInstance = injector.get(classOfRootComponent, false);
        if (!appInstance && injector.parentInjector) {
            injector = injector.parentInjector;
        }
    }
    return appInstance.viewContainerRef;
};

@valorkin I tested with RC6 and ng2-bootstrap v1.1.2.

I can confirm that config.backdrop = "static works fine with eagerly loaded components.

But if the component that creates the modal dialog is part of a module that is lazy loaded (and it sets config.backdrop = “static”), than I still get the same error: “No provider for AppComponent!”

As i stated in an earlier post, the error manifests itself in components-helper.service.js when trying to get the root app component from the injector.

ComponentsHelper.prototype.getRootViewContainerRef = function () {
    // The only way for now (by @mhevery)
    // https://github.com/angular/angular/issues/6446#issuecomment-173459525
    // this is a class of application bootstrap component (like my-app)
    var classOfRootComponent = this.applicationRef.componentTypes[0];
    // this is an instance of application bootstrap component
    var appInstance = this.injector.get(classOfRootComponent);
    return appInstance.viewContainerRef;
};

@noxborough your plunker was so helpful ! publishing fix in a minutes

OK, I see where is issue came from I will test fix on @flibbertigibbet repo, if work I will publish fix today

I started working after I change `[config]=“{backdrop: ‘static’}” to [config]=“{backdrop: false}”

I was able to get it to work using the feat-rc5 branch after some refactoring to import the ng2-bootstrap ModalModule. But it only worked after i set this.myModal.config.backdrop = false (instead of “static”).

Which seems to be the same solution that @rspenc29 found. I think if you use the “static” value, it tries to find the root component in the injector and can’t resolve it.

@a5hik - i don’t think you can install it via npm. i just downloaded it, and extracted it into my project until they do a full RC5 compatible release.

I’m experiencing the same issue with RC5. Only i’m trying to access Modals from a lazy loaded component inside of an NgModule. The offending code in ng2-bootstrap is inside the components-helper.service.js (see below)

ComponentsHelper.prototype.getRootViewContainerRef = function () {
    // The only way for now (by @mhevery)
    // https://github.com/angular/angular/issues/6446#issuecomment-173459525
    // this is a class of application bootstrap component (like my-app)
    var classOfRootComponent = this.applicationRef.componentTypes[0];
    // this is an instance of application bootstrap component
    var appInstance = this.injector.get(classOfRootComponent);
    return appInstance.viewContainerRef;
};

The classOfRootComponent has a reference to my root component type (for most people this is AppComponent). The injector is not the root injector, but rather the injector associated with my lazy loaded module. So I’m guessing it does not have access to the root component instance of AppComponent. And so it bombs out.

I have not been able to figure out a work around.

Yeah that fix doesn’t work for me still get EXCEPTION: Error: Uncaught (in promise): No provider for App

on feat-rc5

This works for me. I’m also using the feat-rc5 branch

@NgModule({
    imports: [
        // ...
        ModalModule,
    ],
    declarations: [
        // ...
    ],
    providers: [ BS_VIEW_PROVIDERS ],
})

export class AppModule {}

I did however have an issue with the backdrop and for now i’m using [config]="{backdrop: false}" until i have time to troubleshoot it or until an update is released.