Repository: angular
Issue: Kind-of recursive imports lead to too much tree shaking with strict sideEffects: false 
Labels: type: bug/fix,workaround2: non-obvious,area: compiler,state: confirmed,P3

The issue is probably caused by package @angular/compiler.

### Is this a regression?

This bug is in effect with Ivy and the new strict sideEffects: false on the app level.


### Description

When `AppComponent` has `AComponent` as children (`<app-a><app-a>` in its template), and `AComponent` imports `AppComponent`, then certain code gets tree shaken that is actually used.


## 🔬 Minimal Reproduction
This can be reproduced with the AsyncPipe, which gets shaken away, leading to the run-time error 'The pipe 'async' could not be found!'.

The reproduction is very simple. Set up a new Angular project with the new `--strict` feature.
Create a basically empty `AComponent` without any template, but just a TS import of `AppComponent`:

```typescript
import { Component } from '@angular/core';
import { AppComponent } from './app.component'; // ← this is crucial

@Component({selector: 'app-a', template: ''})
export class AComponent {
  constructor() {}
}
```

Include this AComponent in the `AppComponent` with the AsyncPipe:

```typescript
import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `<app-a *ngIf="false$ | async"></app-a>`
})
export class AppComponent {
  false$ = of(false);
  constructor() {}
}
```

Then build the app in production (`ng build --prod`) and open the App.
The console says 'Error: The pipe 'async' could not be found!'.

This setup is reproduced here: https://github.com/PapaNappa/Angular10StrictBug
Just run `npm run build && npm run serve`.

The key factors of this bug are:

- Running with production optimisations on
- having `sideEffects: false` in the `src/app/package.json`
- kind-of recursive imports (AppComponent uses AComponent, AComponent imports AppComponent)
- async-pipe on AComponent

## 🔥 Exception or Error
<pre><code>
Error: The pipe 'async' could not be found!
</code></pre>


## 🌍  Your Environment

**Angular Version:**
<pre><code>
Angular CLI: 10.0.5
Node: 12.14.1
OS: win32 x64

Angular: 10.0.8
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.5
@angular-devkit/build-angular     0.1000.5
@angular-devkit/build-optimizer   0.1000.5
@angular-devkit/build-webpack     0.1000.5
@angular-devkit/core              10.0.5
@angular-devkit/schematics        10.0.5
@angular/cli                      10.0.5
@ngtools/webpack                  10.0.5
@schematics/angular               10.0.5
@schematics/update                0.1000.5
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

</code></pre>

**Anything else relevant?**
Might be related to #35602
<!-- ✍️Is this a browser specific issue? If so, please specify the browser and version. -->

<!-- ✍️Do any of these matter: operating system, IDE, package manager, HTTP server, ...? If so, please mention it below. -->