Huge Bundle Size when import every module

[alexnoise79]

Bug description:

dist bundle includes every module when a single module in included.

var NGB_MODULES = [NgbAccordionModule, NgbAlertModule, NgbCarouselModule, NgbCollapseModule, NgbDatepickerModule, NgbDropdownModule, NgbModalModule, NgbNavModule, NgbOffcanvasModule, NgbPaginationModule, NgbPopoverModule, NgbProgressbarModule, NgbRatingModule, NgbScrollSpyModule, NgbTimepickerModule, NgbToastModule, NgbTooltipModule, NgbTypeaheadModule];

is present in the main-[hash].js when importing a single module in a standalone component.

Minimal reproduction

• create a new project
• [optional] use optimization: false in the production configuration (if you want to see the name of the bundles)
• run ng add @ng-bootstrap/ng-bootstrap
• remove everything from the app component (ts,html)

app.component.ts

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    NgbToast,
    NgbToastHeader
  ],
  templateUrl: './app.component.html'
})
export class AppComponent {
}

app.component.html

<ngb-toast></ngb-toast>

• run command ng build your-project
• open the dist folder and check the main bundle

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 17.2
ng-bootstrap: 16.0.0
Bootstrap: 5.3.2

[jnizet]

Hi @alexnoise79

OK, but the point of optimization: true is precisely to avoid having such huge bundles, and to remove what isn't actually used by the application.
Isn't it a bit weird to opt out of the mechanism designed to reduce bundle sizes and then be surprised about getting a big bundle size?

[alexnoise79]

Hi @jnizet

yes i l know, but is the only way to see all the module names

in any case even with optimization:false the bundle still contains all the modules, and this is wrong.

i updated the description, thanks

[jnizet]

It's not wrong. The optimization is precisely designed to tree-shake the bundles and remove the unused parts.
I don't understand what you mean by "is the only way to see all the module names".

[alexnoise79]

@jnizet

var NGB_MODULES = [NgbAccordionModule, NgbAlertModule, NgbCarouselModule, NgbCollapseModule, NgbDatepickerModule, NgbDropdownModule, NgbModalModule, NgbNavModule, NgbOffcanvasModule, NgbPaginationModule, NgbPopoverModule, NgbProgressbarModule, NgbRatingModule, NgbScrollSpyModule, NgbTimepickerModule, NgbToastModule, NgbTooltipModule, NgbTypeaheadModule];

[jnizet]

That is part of the unoptimized bundle. If you turn optimization on, it will be removed. That's what optimization is for.

[alexnoise79]

@jnizet

you are right, i checked the minified does not contain all, even if in some scenario i have "ngbDropdown" that have not been imported in other modules.

there is no way to tree-shake the unoptimized bundle?

[PieterjanDeClippel]

This is because the library has only a single entrypoint. For libraries ng-packagr will always produce chunks per entrypoint, and so loading a single module from this entrypoint drags the entire entrypoint into the bundle.

Some time ago I asked about this on StackOverflow, but still investigated everything myself. The library should be structured like this with entrypoints next to the src folder