onDestroy on ComponentRef isn't called in production mode

[magnusbakken]

🐞 bug report

Affected Package

The issue is caused by package @angular/core version 11.0.4.

Is this a regression?

This behavior is new in 11.0.4. I assume it was caused by #39876. What confuses me is that that PR was supposed to fix #39365, which describes almost the exact same thing I'm seeing now, but I only encountered this issue after upgrading to 11.0.4.

Description

The callback passed to onDestroy on ComponentRef doesn't get called when the dynamic component is disposed, but only when running in production mode.

Here's a basic example using the overlay from the CDK, with disposal of the dynamic component trigged by the OverlayRef.

app.component.ts:

export class AppComponent {
  public constructor(private readonly overlay: Overlay) { }
  
  public onClick(): void {
    const overlayRef = this.overlay.create();
    const providers: StaticProvider[] = [{ provide: OverlayRefToken, useValue: overlayRef }];
    const injector = Injector.create({ providers });
    const componentPortal = new ComponentPortal(DynamicComponent, null, injector);
    const componentRef = overlayRef.attach(componentPortal);
    componentRef.onDestroy(() => console.log('closed')); // This is the important part.
  }
}

dynamic.component.ts:

export class DynamicComponent {
  public constructor(@Inject(OverlayRefToken) private readonly overlayRef: OverlayRef) { }

  public onClick(): void {
    this.overlayRef.dispose();
  }
}

export const OverlayRefToken = new InjectionToken('OVERLAY_REF');

The console.log call only triggers in dev mode.

🔬 Minimal Reproduction

I was unable to reproduce the problem with a StackBlitz, maybe because the way files are handled in production mode is somehow different there. Instead I made a sample repo using ng new, with only the @angular/cdk package added to the standard modules.

1. Clone this repository: https://github.com/magnusbakken/angular-ondestroy-problem
2. Run ng serve --configuration production (I've tested that it also happens when hosting the output of ng build statically on a web server, but again only with --configuration production.)
3. Click the Open button.
4. Click the Close button that appears and note that nothing is logged to the console.

If run with regular ng serve in dev mode the line is logged to the console as expected. It's also logged if everything is kept the same but @angular/core is downgraded to 11.0.3.

From what I can tell it's the "production": true setting in angular.json that causes the problem. If I change that value to false and build in production mode the callback gets called.

🌍 Your Environment

Angular Version:

Angular CLI: 11.0.4
Node: 12.16.1
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.4
@angular-devkit/build-angular   0.1100.4
@angular-devkit/core            11.0.4
@angular-devkit/schematics      11.0.4
@angular/cdk                    11.0.2
@schematics/angular             11.0.4
@schematics/update              0.1100.4
rxjs                            6.6.3
typescript                      4.0.5

[mhevery]

Investigated and working on a fix.

[angular-automatic-lock-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.}