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

Just incase if you are on this thread because you are getting same error even if you have added following line to NgModule

ModalModule.forRoot()

Make sure your import is the correct one.

Correct import

import { ModalModule } from 'ngx-bootstrap/modal';

Wrong import

import { ModalModule } from 'ngx-bootstrap/modal/public_api';