Ngx-bootstrap: RC5 Modal not working in multiple components

[hassanasad]

Hi,

I am using Angular RC5 and am able to open modal box in the root component (app-component) using viewProviders: [BS_VIEW_PROVIDERS] and keeping the modal box and button in the component template.

However when i do the same for other components, it triggers an error:

Error: Uncaught (in promise): No provider for AppComponent!

Any ideas how to fix this please?

[jimmythesaint82]

I'm also getting this error

[rspenc29]

Adding BS_VIEW_PROVIDERS to providers instead of viewProviders seems to fix this but I haven't really dug into the code to see why.

[hassanasad]

@rspenc29 wow, let me try it with your technique :)

[hassanasad]

@rspenc29 I tried, its not working for me. Everything works fine if the modal box is in the root component (appComponent). I get error when i put it in some other component.

This is the error that i get:

EXCEPTION: Error: Uncaught (in promise): No provider for AppComponent!

P.S: Are you using RC5 and webpack?

[rspenc29]

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.

[hassanasad]

Thanks @rspenc29 - I will give it a shot with feat-rc5 branch in a little while.

[jimmythesaint82]

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

on feat-rc5

[noxborough]

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.

[a5hik]

same issue here.

[a5hik]

Is it working with feat-rc5? how do you got that via npm install

[kamikaze]

+1

[noxborough]

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.

[rspenc29]

To use feat-rc5, just do the following...

cd node_modules
git clone https://github.com/valor-software/ng2-bootstrap.git
cd ng2-bootstrap
git checkout feat-rc5
npm install

[a5hik]

Hi now I'm able to use feat-rc5, I'm importing the ng2-bootstrap module like below.

import {DatepickerModule} from 'ng2-bootstrap/components/datepicker/datepicker.module'; import {DropdownModule} from 'ng2-bootstrap/components/dropdown/dropdown.module'; import {ModalModule} from 'ng2-bootstrap/components/modal/modal.module';

However I get the same error when I try to use the modal ..in my lazy loaded module.

I do specify the providers: [BS_VIEW_PROVIDERS] in my module and removed the 'viewProviders` from the component code as suggested.

But I still face the same error.

No provider for AppComponent!

I just wonder what I'm missing here, or how it works for others.

[rspenc29]

The error is caused by the backdrop. Just disable it until they fix it.

[a5hik]

I started working after I change `[config]="{backdrop: 'static'}" to [config]="{backdrop: false}"

[a5hik]

thanks @rspenc29 @noxborough

[a5hik]

I face other issue, that If I run in --prod mode.. I get the below errors..

`Can't bind to 'activeDate' since it isn't a known property of 'datepicker-inner'.

1. If 'datepicker-inner' is an Angular component and it has 'activeDate' input, then verify that it is part of this module.
2. If 'datepicker-inner' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
   ("
   ][activeDate]="activeDate"
   (update)="onUpdate($event)"
   [da"): a@1:22
   Can't bind to 'datepickerMode' since it isn't a known property of 'datepicker-inner'.
3. If 'datepicker-inner' is an Angular component and it has 'datepickerMode' input, then verify that it is part of this module.
4. If 'datepicker-inner' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
   ("r [activeDate]="activeDate"
   (update)="onUpdate($event)"
   [ERROR ->][datepickerMode]="datepickerMode"
   [initDate]="initDate"
   ["): a@3:22
   Can't bind to 'initDate' since it isn't a known property of 'datepicker-inner'.
5. If 'datepicker-inner' is an Angular component and it has 'initDate' input, then verify that it is part of this module.
6. If 'datepicker-inner' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
   ("e)="onUpdate($event)"
   [datepickerMode]="datepickerMode"
   [ERROR ->][initDate]="initDate"
   [minDate]="minDate"
   [maxDate]="maxD"): a@4:22
   Can't bind to 'minDate' since it isn't a known property of 'datepicker-inner'.`

[batchu]

@a5hik See here https://github.com/angular/angular/issues/10618

Also, can you post a quick guide on how to use feat-rc5? I updated my package.json to
"ng2-bootstrap": "https://github.com/valor-software/ng2-bootstrap.git#feat-rc5",

But now I only see .md files downloaded. I do not see any .ts files.
So I checked out the project in git as rspenc29 suggested. my npm build fails. How do I get this to work?

[jimmythesaint82]

You need to pull from git, detailed above from rob.
On Tue, 23 Aug 2016 at 22:10, Prashanth Batchu [email protected]
wrote:

@a5hik https://github.com/a5hik See here

Also, can you post a quick guide on how to use feat-rc5? I updated my
package.json to
"ng2-bootstrap": "
https://github.com/valor-software/ng2-bootstrap.git#feat-rc5",

But now I only see .md files downloaded. I do not see any .ts files.
So I checked out the project in git as rspenc29 suggested. my npm build
fails. How do I get this to work?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-bootstrap/issues/854#issuecomment-241860699,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACUqVK65Hy8SCLJnNT9Srak1xnP9D16aks5qi1PBgaJpZM4JnKtZ
.

[a5hik]

I tried with the webpack upgrade to get the prod version working..But ended up in having the below issue. I used the angular cli from the master repo.

https://github.com/angular/angular-cli/issues/1636

[valorkin]

v 1.1.0 - rc.5
v 1.1.1 - rc.6
should work fine now, please confirm

[hassanasad]

I am using v1.1.1 with RC6 and i am still getting the same error:
"No provider for AppComponent!"

Perhaps i am missing anything?

I do have to hack in the main AppComponent:

import { ViewContainerRef } from '@angular/core';
...
constructor(
        private renderer: Renderer, 
        public viewContainerRef:ViewContainerRef,
        ) {
        this.viewContainerRef = viewContainerRef;
    }

[valorkin]

ng2-bootstrap doesn't use or requires any AppComponent
Please do full text search in your app

[hassanasad]

doing this in for the modal fixes the issue [config]="{backdrop: false}" - Perhaps its looking for a backdrop in the main AppComponent?

[hassanasad]

AppComponent is my main component (which has the hack as mentioned in the comment above)

[JonathanJJudge]

Just want to chime in about this problem. Would love to see a fix released. Thanks!

[dhardtke]

Have the same issue with a modal inside lazy-loaded components (using the new router).

[valorkin]

Seems as a quick fix I will have to disable attach to body, any one have repo so I can reproduce?
Because it is working fine for me >.<

[flibbertigibbet]

To reproduce on this repo using RC5:

• cp example/constants.ts.example src/app/constants.ts (queries will fail due to missing API key, but that's fine for testing modal)
• npm install and npm start, then view this page
• Click 'Select Models' button in top nav bar. Modal opens fine with no background
• Remove config option here and click 'Select Models'; modal fails to open with console error Unhandled Promise rejection: Cannot read property 'parentInjector' of undefined

[dhardtke]

But that's a different error message than we guys get (which is No provider for AppComponent)

[flibbertigibbet]

Using BS_VIEW_PROVIDERS as noted by @rspenc29 fixed immediate No provider for AppComponent error, then resulting in error above, which required the additional background workaround.

[dhardtke]

I don't have a BS_VIEW_PROVIDERS constant with the latest version, so I guess it is exclusive to the rc5 branch.

[hassanasad]

Yeah its not available in the latest version. For now [config]="{backdrop: false}" is the only way i found to get it working.

[amir-yeketaz]

@hassanasad your solution just worked for the first time that modal opened , next time you open the modal , this error cames up : Uncaught TypeError: Cannot set property stack of [object Object] which has only a getter

[noxborough]

@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;
};

[valorkin]

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

[valorkin]

Guys need a sample repo with issue to reproduce, thanks in advance. Seems I have found a solution, but need to fix it first

[valorkin]

Test it *

[noxborough]

@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 really need a code sample, where it fails

On Thu, Sep 15, 2016, 01:12 noxborough [email protected] wrote:

@valorkin https://github.com/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;
};

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-bootstrap/issues/854#issuecomment-247172666,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDk4_s4CrR5geCNcmOoiRbQh68Br8Ynks5qqHFAgaJpZM4JnKtZ
.

[noxborough]

haven't ever put a plunker together. working on putting one together that demonstrates the issue

[noxborough]

@valorkin
Ok here goes. This plunker should demonstrate the issue. As soon as you click on the "My Modal" button, it should get caught in the infinite loop.

https://plnkr.co/edit/PLF3dN?p=info

However, if you go into my-modal.component.ts and switch from
this.myModal.config.backdrop = "static";
to
this.myModal.config.backdrop = false;
it should work.

[tungphuong]

Confirmed, It worked well. Thanks

[valorkin]

@noxborough thank you so much! working on fix

[valorkin]

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

[valorkin]

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

[hassanasad]

WOW -- Thanks @valorkin after much effort from you and enough complaining from us, its finally working :)

[noxborough]

@valorkin
no problem

I edited the plunker to use 1.1.5, and it didn't work. But only because i forgot to add the viewContainerRef hack in. All is well now. thanks for fixing.

[valorkin]

:happy:

On Fri, Sep 16, 2016, 17:56 noxborough [email protected] wrote:

@valorkin https://github.com/valorkin
no problem

I edited the plunker to use 1.1.5, and it didn't work. But only because i
forgot to add the viewContainerRef hack in. All is well now. thanks for
fixing.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-bootstrap/issues/854#issuecomment-247622300,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDk44tSYEh2A91r2LHkQpTA7flInt22ks5qqq4igaJpZM4JnKtZ
.

[tungphuong]

Updated to 1.1.5, it worked well, dont need to set this.myModal.config.backdrop = false;
Thanks @valorkin