There is no directive with "exportAs" set to "bs-modal" when using ng2-bootstrap

Question

I am following the example given here https://valor-software.com/ng2-bootstrap/#/modals

But when i put the template in my html

<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
.........
.......

</div>

i also have below entry in my app.module.ts

import { ModalModule } from 'ng2-bootstrap';

@NgModule({
  imports: [ModalModule.forRoot(),...]
})

and below message shows up, i am not sure what i am missing

EXCEPTION: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "bs-modal" ("
</p-dialog>

<div class="modal fade" bsModal [ERROR ->]#staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labell"): PreCheckComponent@80:32
Can't bind to 'config' since it isn't a known property of 'div'. ("
</p-dialog>

according to guide i dont have to import anything to my component

Answer 1

You need to import ngx-bootstrap modal module on your module like below:

import { ModalModule } from "ngx-bootstrap";
@NgModule({
  imports: [
    ModalModule.forRoot()
    ]
})