Large bundle size when importing even a single module

Bug description:

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:

https://github.com/cexbrayat/collapse-bundle-size

This repo has been created using the latest CLI (11.0.2)

• 1rst commit: generate the application (branch chore/init)

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

The generated sourcemap looks like

• 2nd commit: add ng-bootstrap (branch feat/ngb-module)

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

That’s a large increase, but ng add adds the complete NgbModule to the imports, so that may be expected.

• 3rd commit: import just NgbCollapseModule (master)
  Replace the import of NgbModule by NgbCollapseModule leads 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:

Angular: 11.0.1

ng-bootstrap: 8.0.0

Bootstrap: 4.5.3