No provider for BsModalService

09 Sep 2017

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...

ngx-Bootstrap has become a solid solution for most people bridging widely used Bootstrap version 3 with Angular 2+.

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().

e.g., In your Angular module, use imports section
  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.

Well ES6 has brought lot of capabilities to JavaScript development, and also has simplified the way a custom build should work.