Ngx-bootstrap: There is no directive with "exportAs" set to "bs-modal"

[tonybergeron]

Just pulled down the ng2-bootstrap and integrated it into my application. I didn't have issue with simpler functioning directives like the Alert module but this ModalModule is giving me a run for my money.

Versions:

"@angular/common": "2.2.1",
...
"ng2-bootstrap": "^1.1.16",

I haven't tried with any newer versions of Angular 2 but I am not seeing the version of Angular as the issue based on the other tickets out there for the same issue.

Setup:

@NgModule imports the Modal Module

import * as NG2Bootstrap from 'ng2-bootstrap';
...
imports: [
  ...
  NG2Bootstrap.AlertModule,
  NG2Bootstrap.ModalModule
  ...
]

In the @Component it has the viewContainerRef hack added

componentsHelper.setRootViewContainerRef(viewContainerRef);

Then that template is using the modal example (small or large) directly as seen in the example on http://valor-software.com/ng2-bootstrap/#/modals

Pug markup

// Small modal
button.btn.btn-primary(type='button', (click)='smModal.show()') Small modal
.modal.fade(bsmodal='', #smmodal='bs-modal', tabindex='-1', role='dialog', aria-labelledby='mySmallModalLabel', aria-hidden='true')
  .modal-dialog.modal-sm
    .modal-content
      .modal-header
        button.close(type='button', aria-label='Close', (click)='smModal.hide()')
          span(aria-hidden='true') ×
        h4.modal-title Small modal
      .modal-body
        | ...

And I receive the error on load

Error: Template parse errors: There is no directive with "exportAs" set to "bs-modal"

Everything I found in relation to this error had hacks needed for earlier versions of Angular 2.0.x but those fixes don't even pertain to this newer version of angular 2.2.x

Any thoughts on what I am missing?

[valorkin]

You know, each time I see this issue, I have a feeling that I missing something
any way, today will be new release updated modules exports
I hope it will help and I will not see this again

[tonybergeron]

Awesome thanks I will be on the lookout for the update and will be sure to respond if things are working (or not...)

Thanks!

[valorkin]

Thanks! Join slack, I will give a note there

[valorkin]

Please try latest version, v1.1.16-6
use ModalModule.forRoot() in imports

[linusbrolin]

@valorkin Could you explain why forRoot() is needed on all imports now?
It creates a bit of a mess, since no other modules from any other plugins require it, so it gets a bit hard to know when to use forRoot() and when not.

[valorkin]

Use it always, it is done to not duplicate providers in child sub modules

[valorkin]

Not correct answer, always use it in AppModule, and don't use in child submodules

[valorkin]

Closing for now, drop me a note if anything
16-x versions doc available here: http://valorkin.github.io/ng2-bootstrap/#/

[bogacg]

For those using modals with lazy loaded router modules or feature modules, maybe it would be a good idea to point out in docs that ModalModule needs to get imported both in app.module and in feature/lazy module. Difference is in app.module it needs to call .forRoot() and in other ones it shouldn't (still needs to be in imports array). (Also, to see its effect on Angular-CLI, you may need to cancel previous serve an re-do ng serve.)

[soupman99]

@valorkin Still getting this error with the following dependencies. Any idea of what to do?

"@angular/common": "2.4.6",
"ng2-bootstrap": "^1.4.2",
"pug-html-loader": "^1.1.1",
"webpack": "2.2.0",

[maximelafarie]

@valorkin Just paste the example modal code and always seems buggy. (Angular 2.4)

[valorkin]

It is always a problem with ngModule and how injection works, please check https://github.com/valor-software/ng2-bootstrap/issues/1323#issuecomment-276239951

[maximelafarie]

@valorkin Thanks! Finally I was using a module inside a module and was importing the ModalModule only in the main app.module.ts. Add it the same way without .forRoot() in the second module solve the issue! 😄

[valorkin]

Awesome!

[fgolemo]

For me it was actually the "removed" text from the post https://github.com/valor-software/ng2-bootstrap/issues/1323#issuecomment-276239951 ...

I had to restart ng serve and only then it would work for me.