BrowserAnimationsModule is not tree-shakable

🐞 bug report

Affected Package

The issue happens when using the @angular/platform-browser/animations module, but it is not obvious whether the actual problem is in there or in the compiler.

Is this a regression?

No.

Description

An unused module should not affect the results of the build; instead the size of main.js grows when importing BrowserAnimationsModule in an application that does not use it.

🔬 Minimal Reproduction

The issue cannot be shown using StackBlitz, but the repository https://github.com/ranma42/treeshake-material can be used to reproduce it.

The steps to reproduce the issue are illustrated in the commit messages of the repository. Namely:

1. Create a new application with ng new treeshake-material with default settings (no routing, CSS style).
2. Install @angular/material with default settings (indigo-pink theme, no typography styles, yes to browser animations); it will automatically import BrowserAnimationsModule in AppModule.

As show in the commit messages of the repository, main.js grows from 137 KB to 207 KB.

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.0
Node: 12.16.0
OS: darwin x64

Angular: 9.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.0
@angular-devkit/build-angular     0.901.0
@angular-devkit/build-optimizer   0.901.0
@angular-devkit/build-webpack     0.901.0
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.0
@angular/cdk                      9.2.0
@angular/material                 9.2.0
@ngtools/webpack                  9.1.0
@schematics/angular               9.1.0
@schematics/update                0.901.0
rxjs                              6.5.4
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant? According to the Ivy compatibility guide, modules should be tree-shaken when marked side-effect-free. @angular/platform-browser/animations is declared side-effect-free, but it does not seem to suffice.

See also https://github.com/angular/components/issues/18944 for a similar issue affecting @angular/material

[sod]

@hoang-innomizetech sideEffects: false is tricky. E.g. imports like import 'foo/bar' are being removed in sideEffects free mode. This may prevent zone.js from being included in the build.

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

[kapunahelewong]

Status: Docs team has enough material above to make the docs update.