Adding a single ng-bootstrap module (like
NgbCollapseModule in my example) leads to a surprisingly large increase of the application bundle size.
It looks like there is something fishy, as importing just this module in our application drags ~80kb of ng-bootstrap, plus 42kb of
@angular/forms. I can reproduce with a bare CLI application (with numbers slightly lower).
Link to minimally-working StackBlitz that reproduces the issue:
This repo has been created using the latest CLI (
- 1rst commit: generate the application (branch
ng new collapse-bundle-size --defaults
Building this bare application gives:
ng build --prod --source-map Initial Chunk Files | Names | Size main.866a4eb66ed1bedd7877.js | main | 135.41 kB
- 2nd commit: add ng-bootstrap (branch
Adding ng-bootstrap produces the following results:
ng add @ng-bootstrap/ng-bootstrap ng build --prod --source-map Initial Chunk Files | Names | Size main.cb92446fa68ee2d403ee.js | main | 288.59 kB
- 3rd commit: import just
Replace the import of
NgbCollapseModuleleads to the following results:
Initial Chunk Files | Names | Size main.1617f8bf4ea0ac9824ea.js | main | 270.76 kB
Note that the size is slightly better but still very large for a module containing a single directive. It still drags in
@angular/forms in the application bundle when you would expect it doesn’t.
Versions of Angular, ng-bootstrap and Bootstrap: