No provider for BsModalService

ngx-Bootstrap library provides angular based directives & components for Bootstrap JS components. In a tricky situation, where Angular UI bootstrap team has skipped their development plan directly from AngularJs 1.6 + Bootstrap 3 to Angular + Bootstrap 4...

The entire library is written using ES6(ES2015) modules in Typescript. It offers each bootstrap component as separate modules, so that you can use include entire ngx-bootstrap npm package in your project, but just import the required modules and leave the rest off (like a custom build for your project).

The expected way in-order to register all the services or providers specific to a particular module, should use construct - module.forRoot().

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

The recommended way of ES6 modules import, is to just import the module that you require; for e.g., accordion module would need following specific import  

import { AccordionModule } from 'ngx-bootstrap/accordion';

But this will result in the services not getting registered. This import will lead to error message - 'No provider for BsModalServices'. So in-order to make the dependent services to be imported properly; Use

import { AccordionModule } from 'ngx-bootstrap';

Above construct in ES6 would mean, that it should import entire library into our bundle and it does pull complete library. But with a proper AoT setup, after tree shaking the final bundle will contain just the required module as expected.