Animation modules break correctly disposing of the application

🐞 bug report

Importing any animation module prevents the automatic removal of the generated elements from the DOM once the application has been destroyed via componentRef.destroy().

Affected Package

It looks like both BrowserAnimationsModule and NoopAnimationsModule from @angular/platform-browser/animations are causing the issue. When they’re not imported, everything seems fine.

Is this a regression?

Not sure. It’s a problem since at least Angular 7.

Description

I have an application that needs to be fired and stopped “on demand” (specifically, it’s a micro-frontend). In order to do so I implemented the ngDoBootstrap method as follow:

export class AppModule implements DoBootstrap {
  constructor(private service: AppService) {}

  ngDoBootstrap(app: ApplicationRef) {
    window.startApplication = () => {
      this.service.componentRef = app.bootstrap(AppComponent);
    };
  }
}

Here, AppService is just an @Injectable class with the sole public property componentRef, in order to make it available to the components. And in one component I have some logic that leads to this.service.componentRef.destroy() at the end of the lifecycle of the micro-frontend application. The application basically disposes itself.

When I import either BrowserAnimationsModule or NoopAnimationsModule in AppModule, the application seems to be destroyed but the corresponding DOM tree isn’t removed from the page.

🔬 Minimal Reproduction

Minimal StackBlitz reproduction.

🌍 Your Environment

Angular Version:

@angular-devkit/architect       0.1001.2
@angular-devkit/build-angular   0.1001.2
@angular-devkit/core            10.1.2
@angular-devkit/schematics      10.1.2
@schematics/angular             10.1.2
@schematics/update              0.1001.2
rxjs                            6.6.3
typescript                      4.0.3

Also verified with this configuration:

@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cli                      7.3.9
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.5.2
typescript                        3.2.4
webpack                           4.29.0

Anything else relevant?

Checked in Chrome 85, Firefox 82, Safari 13.1.

[atscott]

Closing as the reproduction now demonstrates correct behavior in v13. Likely resolved by https://github.com/angular/angular/commit/c49b28013a6c017c9afc73bbc00bb4fdcf15c70e

[HimanshiDomir]

Hi @petebacondarwin, we are having the similar issue while implementing micro frontend with multiple repos. we are using prime ng components. When we try to open any component of p-multiselect, which when opened leads to animation error as mentioned below. “Found the synthetic listener @overlayAnimation.start. Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application.”

Though we have already imported BrowserAnimationsModule in shell.

Could you please help us on this . .