Angular Custom Elements & Angular 8 Material: MatDialog and MatMenu not working

Question

I am using angular custom elements to build an application in which a MatDialog is part of the custom element. I have a MatMenu in the host application as well. Problem is, when I open the mat-dialog on page load and then open the mat-menu, the mat-dialog is not working afterwards, otherwise if I open the menu first and then the mat-dialog, then the menu doesn't work anymore.

You can find the stackblitz at : https://stackblitz.com/edit/angular-nr58ab-tbu38h

I have added the main.js code of the MatDialog application in the index.html itself. The main.js was generated after building the app with ngx-build-plus in prod mode with output-hashing none and single-bundle true.

The MatDialog app code is like this:

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { NgModule, Injector } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { createCustomElement } from "@angular/elements";

import { MatDialogModule, MatButtonModule } from "@angular/material";


@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatDialogModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [AppComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    const myCustomElement = createCustomElement(AppComponent, {
      injector: this.injector
    });
    customElements.define("app-test-data", myCustomElement);
  }
  ngDoBootstrap() {}
}

app.component.ts

import { Component, Input, TemplateRef } from "@angular/core";
import { MatDialog } from "@angular/material";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(private dialog: MatDialog) {}
  openModal(temp: TemplateRef<any>) {
    this.dialog.open(temp, { width: "100px", height: "100px" });
  }
}

and the app.component.html

<button mat-raised-button (click)="openModal(modal)">Open</button>

<ng-template #modal>
  <mat-dialog-content>
    Hello
  </mat-dialog-content>
</ng-template>

This is the app I have built and put inside the index.html of the app in the stackblitz.

I am stuck with this for some time now, I have tried running the dialog.open() inside NgZone.run() also, but no luck there either. Thanks.

Is there any specific reason you are creating as a custom element not component ? — Piyush Jain, Jan 16 '20 at 05:43
Yes, the dialog component displays some data, which I fetch inside the custom element itself. I am bound to use only a custom element as we are thinking of using it as a standalone app too. — Yash Agarwal, Jan 16 '20 at 05:45
I thing on close of Modal instance is not destroying, can you please check once ? — Piyush Jain, Jan 16 '20 at 05:48
I have checked, the modal works fine if I dont open the menu. It depends on what I open first, if I open the modal first and then the menu, then the modal won't open anymore and vice versa. On inspecting the elements I noticed that cdk-overlay-container div stops changing. — Yash Agarwal, Jan 16 '20 at 06:01
@YashAgarwal were you able to find any solutions for this. We are also using angular custom elements as microfrontends which encapsulates a huge piece of functionality and multiple components. facing same issue where mat-dropdowns and dialogues stops appearing after using application for a while. A big issue in terms of usability. Please update if you have any pointers. — Tarang, Jul 07 '20 at 08:35
@Tarang We upgraded our application to Angular 9 and then 10, now this issue is solved. — Yash Agarwal, Aug 27 '20 at 08:21
@YashAgarwal - Yes We too upgraded our version to 10 and everything started to work magically. — Tarang, Oct 01 '20 at 11:30

score 1 · Accepted Answer · answered Oct 01 '20 at 11:33

1

If you are on Angular version 8 and below. consider upgrading to angular 10.

We too were facing same issue with angular elements based microfrontends. Upgraded application to angular 10 and issue is resolved magically. :)

answered Oct 01 '20 at 11:33

Tarang

646
4
6

score -1 · Answer 2 · answered Jan 16 '20 at 06:51

-1

change name of your custom element

customElements.define("app-custom-component", myCustomElement);

Working Demo

It is working fine in this demo.

Let me know if you still face issue.

answered Jan 16 '20 at 06:51

Piyush Jain

1,895
3
19
40

Thanks man, but keeping the Menu and Dialog in the same app is working fine, but my requirement is to keep them in two separate apps and then include the dialog as a micro frontend in the host app(the menu is present here). That still doesn't work even after changing the custom element name. – Yash Agarwal Jan 16 '20 at 07:58
Can you please update code in my demo according to your requirement. I can have a look then. – Piyush Jain Jan 16 '20 at 09:22
The demo that I have shared has the code for the MatMenu. The MatDialog app was build using ngx-build-plus and the main.js thus generated, I have put inside the index.html in script tags. The source code for that is what I have given in my question. – Yash Agarwal Jan 16 '20 at 09:50

Angular Custom Elements & Angular 8 Material: MatDialog and MatMenu not working

2 Answers2