Angular-cli: Unused down-levelled ES2015 classes are not tree shaken away

[kumaresan-subramani]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve

Description

I have created an angular application and checked main bundle whether tree-shaking is working or not using bundle-analyzer.

But i found all .js extension files are included.

🔬 Minimal Reproduction

1. Download sample form below link - click here

2. Run below commands :

npm i

npm run start - To generate build

npm run bundle-report - To check bundle files in online

🔥 Exception or Error

In below, i have not enabled pdf-export functionality in my application. In source level,i have done proper work for module injection but in below you can see pdfexport related js files are added.

Note: But pdf-export module not get added in main.bunlde.js file

marked files are not used but still getting added

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/




Angular CLI: 8.0.1
Node: 10.16.0
OS: win32 x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router



Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.6
@angular-devkit/build-angular     0.800.6
@angular-devkit/build-optimizer   0.800.6
@angular-devkit/build-webpack     0.800.6
@angular-devkit/core              8.0.6
@angular-devkit/schematics        8.0.1 (cli-only)
@angular/cli                      8.0.1
@ngtools/webpack                  8.0.6
@schematics/angular               8.0.1
@schematics/update                0.800.1
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

I thought, while tree-shaking it includes all imported files.

[kumaresan-subramani]

I have tried this https://github.com/mishoo/UglifyJS2/issues/2279#issuecomment-322591372

But no solution

[FDIM]

Someone can correct me if I am wrong, but I am fairly sure that you need to set module type to esnext/es2015 in ts config. In the zip you've linked, module is set to es5.

See: https://webpack.js.org/guides/tree-shaking/

[kumaresan-subramani]

Hi @FDIM ,

I have set modules as es2015 but still i am facing same error which is my depedent packages are all get included even i have not used those.

is this reason for my issue - https://github.com/angular/angular-cli/issues/14577

[kumaresan-subramani]

https://github.com/webpack/webpack/issues/2899

I thought this should be root cause - https://github.com/microsoft/TypeScript/issues/13721

[kumaresan-subramani]

@alan-agius4 , Can you please see this?

[alan-agius4]

Hi I had a look at this is being retained because of ES5 classes are not being wrapped in an IIFE which is making code non tree-shakable.

The issue seems to happen when downlevelling from ES2015 to ES5 which was being done in ng-packagr version 1.5 which you are using to build your libraries. Downlevelling was removed in version 4.

This most likely is also caused by the removal of the class-fold transformer from the build-optimizer pipeline.

[kumaresan-subramani]

HI @alan-agius4 ,

Can you please let me know tentative timeline for this to proceed further since tree shaking is considered as major break by most of the application developers.

[alan-agius4]

At the moment, there is no ETA yet, though if someone want to land a PR they are more than welcome.

We work on issues based on how their categorised, and this one is classified as low frequency and broken. Others which have a higher priority or are regressions take priority over such issues.

The main reason for this classification is;

• Low Frequency - it's doesn't seems to be effected a lot of users since the pattern described above is not widely used, and if the library author update their library build tool chain the issue will be solved, as this only happens when down levelling ES2015 code to ES5 using TypeScript and as mentioned previously down-levelling of libraries is no longer happening with ng-packagr since version 4 .
• Broken because it doesn't seem to be a regressions (IE: was working and stop)

Thanks for your understanding.

[alan-agius4]

I am going to close this, since this issue is caused when using an old version of ng-packagr which relied on TSC downlevelling, this version supported Angular 4 which is no longer supported.

Kindly be aware that Angular 8 is in LTS and it's support will end on the Nov 28, 2020.
More info: https://angular.io/guide/releases#support-policy-and-schedule

Please update to the most recent Angular CLI and ng-packagr version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot[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._}