Option to use ESM instead of FESM for production builds

[josephliccini]

Versions

6.0.0

Repro steps

ng build --prod should use ESMs so webpack 4 sideEffects flag can properly prune unused exports. Maybe NormalModuleReplacementPlugin or something of the like where during prod builds you can swap to the ESM root instead of using the FESM? (I am not sure how involved it is)

Observed behavior

Unused exports remain in the bundle, because webpack 4 will not break apart a FESM.

Desired behavior

If I only use ngModel in my template, I shouldn't have to pull in all of @angular/forms.

Mention any other details that might be useful (optional)

I am guessing this is already on your radar, but didn't see a formal issue for it.

I did notice the RxJS is packaged in a way that webpack 4 sideEffects flag prunes unused exports (which is awesome)

PS: Upgrade from 5 to 6 was a breeze 👍

Thanks!
Joe

[ToniaDemchuk]

Webpack 4 sideEffects feature is very handy in case of developing own angular widget libraries. Even library is build with sideEffects: false, main application bundles whole file from fesm5 folder.

[mistic100]

Can this get some consideration ?

I don't get why ng-packagr bothers building ESM files if they are not used.

[alan-agius4]

@mistic100, FESM are generated from ESM, so they always needs to be built.

[mistic100]

Good to see there is a PR for this :-)

Anyway I mistakenly assumed (based on @ToniaDemchuk comment) that importing the FESM bundle prevented webpack to remove unused modules (I try to create a library which exports multiple NgModule), but in fact it works !

[moeriki]

FESM does indeed shake your unused exports.

I do however have a 3th party dependency in my library build which gets bundled with my client-code regardless of it's being used or not.

Simplified FESM.

import flatpickr from 'flatpickr';

var ButtonComponent = { /* … */ };
var DatePickerComponent = { /* component with dependency on flatpickr */ };

export { ButtonComponent, DatePickerComponent };

When importing only the ButtonComponent the DatePickerComponent is not bundled 👍 but the dependant library flatpickr is 👎.

I was hoping ESM could fix this.

[alan-agius4]

Lets continue tracking this here: #13635

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}