ng bootstrap doesn’t support tree shaking

Please remember, the issues forum is NOT for support requests. It is for bugs and feature requests only.
Please read and search
existing issues (both open and closed) prior to opening any new issue and ensure you follow the instructions therein.

Bug description:

Link to minimally-working plunker that reproduces the issue:

You can fork a plunker from one of our demos and use it as a starting point.
Please note that we can not act on bug reports without a minimal reproduction scenario in plunker. Here is why:

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 5.2.0

ng-bootstrap: 1.0.0

Bootstrap: 4.0.0


I created an angular app which depends on ng bootsrap.
I included only NgbButtonsModule however after analyzing the source map file on the production aot bundle I can still see that all components are still bundled inside the main bundle.

This involves compilation with prod and sm flags so a pluncker wouldn’t help much.


3 thoughts on “ng bootstrap doesn’t support tree shaking

  1. Have you tried using deep imports?

    E.g., instead of import {NgbModal} from "ng-bootstrap";

    you should do something like

    import {NgbModal} from "ng-bootstrap/modal";

    (untested, but should work).

  2. Yes, I can confirm tree shaking works if we import single Ngb modules instead, however all the providers needed for special components such as NgbAlert won’t get imported and then you end up importing the whole thing again 😕

  3. @mboughaba, @trumbitta you could either import everything, or module by module.

    If you want only the alert, then import NgbAlertModule.forRoot() in your main module and NgbAlertModule in all others where you use alert.

    If you want everything, similarly import NgbModule.forRoot() and NgbModule