Some services are not tree-shaken when unused

[ranma42]

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); it builds a 137 KB main.js.
2. Install @angular/material with default settings (indigo-pink theme, no typography styles, yes to browser animations); the main.js now is 207 KB.
3. Import several material modules in AppModule (without using any component or service); the main.js now is 271 KB.

It looks like some code is not being removed by the tree-shaking even if it is not being used.

Expected Behavior

The size of the build output does not grow unless components or services are actually used.

Actual Behavior

The size of the build output grows 2x just by installing and importing Angular Material modules, even if they are not being used.

Environment

• Angular: 9.1.0
• CDK/Material: 9.2.0
• Browser(s): -
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[jelbourn]

Off the top of my head, that sounds like roughly the size of the animations module, which is the only thing that the schematic adds. I'll mark this as a duplicate of angular/angular#36306.

[ranma42]

The BrowserAnimationModule is the growth from point 1 to point 2. The growth from 2 to 3 is caused by material.

[ranma42]

In particular, in addition to Overlay, which is already tracked in #11581, it looks like several other services are not removed by tree-shaking:

• MutationObserverFactory
• FocusMonitor
• ErrorStateMatcher

They are all marked providedIn: 'root', but I believe that they cannot be minified away because they are mentioned in some @NgModule.providers.

I believe the same goes for CdkTreeNodeDef which is actually a directive, even though it is listed in @NgModule.providers.