Tree shaking for Angular 10 shook out AsyncPipe when using sideEffects: false

Question

Tree shaking in Angular 10 is 'shaking' out my AsyncPipe.

---

The release notes blog entry for Angular 10 introduces a new --strict mode for ng new:

One thing this does is:

Configures your app as side-effect free to enable more advanced tree-shaking

The official documentation says:

When you create projects and workspaces using the strict mode, you'll notice an additional package.json file, located in src/app/ directory. This file informs tools and bundlers that the code under this directory is free of non-local side effects.

Here's the content of that package.json:

{
  "name": "heroes",
  "private": true,
  "description_1": "This is a special package.json file that is not used by package managers.",
  "description_2": "It is used to tell the tools and bundlers whether the code under this directory is free of code with non-local side-effect. Any code that does have non-local side-effects can't be well optimized (tree-shaken) and will result in unnecessary increased payload size.",
  "description_3": "It should be safe to set this option to 'false' for new applications, but existing code bases could be broken when built with the production config if the application code does contain non-local side-effects that the application depends on.",
  "description_4": "To learn more about this file see: https://angular.io/config/app-package-json.",
  "sideEffects": false
}

Great! I thought. I love more tree shaking.

However it shook away AsyncPipe and I don't know why. I use it everywhere in a large website - and I don't see how it could possibly have optimized it away.

It only did this in an optimized --prod build. When I changed it to sideEffects: true it worked again.

Hooked

Nobody knows why? – Hooked

I have the same issue but could not yet reproduce it in a simple project setup. I will try to condense my current project until I find the root cause. – Halloran

Answer 1

This is a known bug with Angular 10 and an issue with Ivy. It happens when you have recursive dependencies between your components, e.g. AComponent imports BComponent, but BComponent also imports AComponent.

For importing, what matters is the generated component code - not the Typescript of your component class. That would mean having <app-b-component></app-b-component> in your AComponent's template also counts as importing BComponent, because internally it references BComponent.

So the current work-around, while still keeping the more aggressive tree-shaking with sideEffects: false, would be to eliminate all recursive imports.

Halloran

Thanks for the answer. I’m not convinced I have recursion either deliberately or accidentally. I did find one place I didn’t import CommonModule where I should have. I gave up with sideEffects at least for now. Wonder if there’s a way to tell if I have recursion or not? It’s not caught by the typescript compiler. – Hooked

It might also be due to indirect recursions. Maybe first check for imports of some component in your other components, then work your way up. To reproduce the issue, I ended up copying the whole project to a new workspace and repeatedly delete stuff and check if the issue persists. – Halloran

Answer 2

I just had this kind of "too agressive tree shaking" problems with my Angular 10 app and production build (using optimization=true, that makes this tree shaking thing).

In my case, that was the DatePipe ({{value | date}}) that was broken.

This leads to the error of the locale being undefined whereas it should be (and it is OK if serving the app in development mode without optimization)

ERROR Error: InvalidPipeArgument: 'Missing locale data for the locale "fr".' for pipe 'e'

More details here : Angular "InvalidPipeArgument: Missing locale data" when build or serve with optimization=true (--prod option)

Jarrad