using single-spa and angular8 to develop micro front-end application,the cdk overlay is not working correct

[DavidYangLin]

Reproduction

when I use single-spa to develop micro front-end application,one page has two applications,both of them used overlay(eg.select,modal),when I triggered a overlay component at one application,another one application's overlay component can't be shown when I trigger. A div element which class name is "cdk-overlay-container" and wrap my conponent was created when trigger the overlay component I found,but when I trigger another one overlay component in another application,the component can't be created. Is there any one can help me
many thanks!

Expected Behavior

What behavior were you expecting to see?
all overlay components of two applications at one page could work properly

Actual Behavior

What behavior did you actually see?

one application's overlay components could work correctly,but another one couldn't work correctly

Environment

• Angular:angular8
• CDK/Material:@angular/cdk: 8.1.3
• Browser(s):chorme
• Operating System (e.g. Windows, macOS, Ubuntu):

[jelbourn]

Can you share a reproduction? There's nothing really for the team to look at without one.

[DavidYangLin]

Sorry,I have made a demo and upload to my github,this is the demo's link https://github.com/DavidYangLin/microfrontends-demo, could you download it and run the bat file,the reproduction step I have writen in README.md,you can see the bug,many thanks.

[jelbourn]

EDIT: whoops, commented on the wrong issue

[DavidYangLin]

Very thanks for a email reply message,the email said "No plans to work on this at least through 2020",that's okay.But I found a piece of source code of overlay cdk like this:

  protected _createContainer(): void {
    const containerClass = 'cdk-overlay-container';
    const previousContainers = this._document.getElementsByClassName(containerClass);
    // Remove any old containers. This can happen when transitioning from the server to the client.
    for (let i = 0; i < previousContainers.length; i++) {
      previousContainers[i].parentNode!.removeChild(previousContainers[i]);
    }
    const container = this._document.createElement('div');
    container.classList.add(containerClass);
    this._document.body.appendChild(container);
    this._containerElement = container;
  }
The problem could be resolved when I commented the following code in my demo I found:
  //  for (let i = 0; i < previousContainers.length; i++) {
  //   previousContainers[i].parentNode!.removeChild(previousContainers[i]);
  // }

It works,So I wan to kown is there any problem when I comment this code and does it matter?
many thanks for your answer

[jelbourn]

That comment was meant for another issue; I accidentally made it in the wrong tab.

[saisandeepEunimart]

I have same issue please help me out @jelbourn

[Darth-Alex]

I can confirm that issue. Is there a better Workaround out?

[Megadesty]

I also have the same issue in the same scenario (multiple Angular apps as microfrontends are loaded in one shell site and each microfrontend creates overlays in comboboxes, datepickers, etc.). The problem seems to be that CDK expects exactly one global div tag with the class cdk-overlay-container, which is somehow bound to the Angular instance. If another Angular instance from another Microfrontend is removing the div-tag, the first Angular instance has lost its container and can't open it anymore.

I can confirm that after removing the for-loop in all Angular instances the overlays are functional (each Angular instance has its own div-tag then):

I'd be happy for any ideas how to resolve this problem properly. For example, can I configure the CDK somehow to not use the global body but a shadow root node for such divs instead?

[knightsub7]

I've the same problem. I ship multiple microfrontends bundled with their own copy of Angular.
So each Angular instance creates a new cdk-overlay-container and which will be deleted by the next Angulare instance. So the reference is goes to nothing and no new container is creating.
At the end I can't go back to a microfrontend and change anything that is using overlay.

Perhaps a check is missed wether the referenced element exists or not?

[cpasslack]

I can confirm the issue. Yikes, no update since december! :( At the day we decided it is a good idea to have multiple angular apps on one page we were doomed 😱

Any workarounds are welcome, we are running a bit out of time ...

[Megadesty]

@cpasslack We found a workaround, which also considers the Angular Universal scenario (which was the reason why the for-loop is there, see also #11817). We are not sure, is this so mature that it could be a PR candidate @jelbourn?

Create a custom OverlayContainer and overwrite the problematic function:

import { OverlayContainer } from '@angular/cdk/overlay';

export class MicrofrontendOverlayContainer extends OverlayContainer {
  protected _createContainer(): void {
    const containerClass = 'cdk-overlay-container';
    const previousContainers = this._document.getElementsByClassName(containerClass);

    // If there is already a container (can happen in a Microfrontend scenario with
    // multiple self-contained Angular apps on the same website), reuse that. But
    // clean it up because it could be created while transitioning from server
    // to client (Angular Universal) and may be stale. Remove any additional containers.
    for (let i = 0; i < previousContainers.length; i++) {
      while (i === 0 && previousContainers[i].firstChild) {
        previousContainers[i].removeChild(previousContainers[i].firstChild);
      }

      if (i > 0 && !!previousContainers[i].parentNode) {
        previousContainers[i].parentNode.removeChild(previousContainers[i]);
      }
    }

    if (previousContainers.length > 0) {
      this._containerElement = previousContainers[0] as HTMLElement;
      return;
    }

    const container = this._document.createElement('div');
    container.classList.add(containerClass);
    this._document.body.appendChild(container);
    this._containerElement = container;
  }
}

Then in your .module.ts:

@NgModule({
    providers: [
        { provide: OverlayContainer, useClass: MicrofrontendOverlayContainer }
    ]
})
export class YourModule {}

[jelbourn]

@crisbeto this looks like the same issue as a couple of others- do you remember the main one?

[cpasslack]

@Megadesty Thanks! I will definitely check this out! I already scratched my head how it could be possible to overwrite the Overlay behavior, but this looks very promising 😃

[crisbeto]

Here's the original issue: #16851. Closing as a duplicate.