Angular-cli: unused classes got added in build, tree-shaking not working propely

[Saranya13]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes

Description

Tree-shaking not working as expected

🔬 Reproducing steps

1. download below sample

tree-shake.zip

1. run "npm i"

2. then give "ng build --prod"

check build source-
In that, "main-es5.js" and "main-es2015.js" has all modules, no tree shaking.

check string [getModuleName=function()] in bundle file , you can find it 61 times which means all other modules are imported even if they are not used. This shows unused classes are not getting tree-shaken.

🔥 Exception or Error

While using GridAllModule , build size is 1.8mb

While using GridModule which has less no of imported class, build size is same.

🌍 Your Environment

"@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
"@angular-devkit/build-angular": "~0.802.0",
    "@angular/cli": "~8.2.0",
    "@angular/compiler-cli": "~8.2.0",
    "@angular/language-service": "~8.2.0",
@angular-devkit/[email protected]

Anything else relevant?
https://github.com/angular/angular-cli/pull/14585
https://github.com/angular/angular-cli/issues/14577

[Saranya13]

@alan-agius4 ,

For your reference.

Issue occurs in latest angular-cli version 8.2.2 also

[kumaresan-subramani]

Hi,

It is working fine in below environmen:

  "dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@syncfusion/ej2-angular-charts": "^17.2.36",
    "@syncfusion/ej2-angular-grids": "^17.2.41",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
     "@angular-devkit/build-optimizer": "0.800.6",
    "@angular/cli": "~8.0.0",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

Please find working sample here-
treeshake-issue.zip

[alan-agius4]

Hi all,

I had a look at this issue and the reason why tree-shaking is not working is that @syncfusion packages do not specify a typings field in their package.json. This field is typically added to TypeScript generated libraries and is also part of the APF specs (https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview).

Following this PR https://github.com/angular/angular-cli/pull/14998 that landed in 8.2, we are using this field to determine whether build-optimizer should try to optimize a library, if no such field is found in the package.json, build-optimizer will not perform any optimizations on that library.

It is also paramount to mention that the @syncfusion libraries are not using TypeScript helpers such as __decorate, __extends etc... via tslib but rather these are being inlined in the bundle. The library author should enable importHelpers option found in the compilerOptions of their tsconfig.json.

_NB: In future optimizations related to TypeScript helpers replacements will be removed from build optimizer._

[kumaresan-subramani]

Hi all,

I had a look at this issue and the reason why tree-shaking is not working is that @syncfusion packages do not specify a typings field in their package.json. This field is typically added to TypeScript generated libraries and is also part of the APF specs (https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview).

Following this PR #14998 that landed in 8.2, we are using this field to determine whether build-optimizer should try to optimize a library, if no such field is found in the package.json, build-optimizer will not perform any optimizations on that library.

It is also paramount to mention that the @syncfusion libraries are not using TypeScript helpers such as __decorate, __extends etc... via tslib but rather these are being inlined in the bundle. The library author should enable importHelpers option found in the compilerOptions of their tsconfig.json.

_NB: In future optimizations related to TypeScript helpers replacements will be removed from build optimizer._

HI @alan-agius4 ,

Thanks for your response. While adding typings field in our packages, tree-shaking works fine as expected.

[clydin]

This issue appears to have been resolved. If this has been closed in error, please let us know.

[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._}