'router-outlet' in MatDialog is not working in Angular 7

Question

I am trying to use <router-outlet></router-outlet> within an Angular Material popup dialog. However, the router-outlet part does not render anything, or log anything to the console.

If I add the <router-outlet></router-outlet> to the HTML content of the component that pops up the dialog(ContextBuyerPinComponent), then it works fine.

The routes look like this:

const demoRoutes: Routes = [
  {
    path: 'demo',
    children: [
      { path: 'register-email', component: RegisterEmailComponent },
      {
        path: 'context-buyer-pin',
        component: ContextBuyerPinComponent,
        children: [
          { path: 'services', component: ContextPinServicesComponent },
          { path: 'emails', component: ContextPinEmailsComponent },
          { path: 'details', component: ContextPinDetailsComponent }
        ]
      }
    ]
  }
];

The dialog is opened via the ContextBuyerPinComponent like this: this.matDialog.open(ContextBuyerPinDialogComponent, this.config);.

And the ContextBuyerPinDialogComponent HTML is as follows:

<mat-toolbar color="primary" class="mat-elevation-z4">
  <app-tab [icon]="'room_service'" [displayType]="getDisplayType()" [caption]="'Local Services'"
    routerlink="demo/context-buyer-pin/services">
  </app-tab>
  <app-tab [icon]="'email'" [displayType]="getDisplayType()" [caption]="'Emails'"
    routerlink="demo/context-buyer-pin/emails">
  </app-tab>
  <app-tab [icon]="'map-pin'" [displayType]="getDisplayType()" [isSvg]="true" [caption]="'Pin Details'"
    routerlink="demo/context-buyer-pin/details">
  </app-tab>
</mat-toolbar>
<router-outlet></router-outlet>

I have tried using a named router-outlet as an alternative, but with no success.

The toolbar is using the app-tab component, and that is using the routerLinkActive directive which is working fine, so it looks like the routes are working.

How do I get this working?

Erwinery

The issue is illustrated here on stackblitz stackblitz.com/edit/angular-material2-issue-dehbgc – Erwinery

A clue could be the need for me to add a guard in context-buyer-pin.component.ts line 18. Without this, it crashes the browser, evidently going into a loop. – Erwinery

Answer 1

I have solved the issue and it boiled down to the fact that the dialog window was showing the component that popped up the dialog window. So basically an infinite cycle caused by a routing setup issue.

I fixed the problem changing the path structure and using named outlet.

const demoRoutes: Routes = [
  {
    path: 'demo',
    children: [
      {
        path: 'context-pin',
        component: ContextPinComponent,
        children: [
          {
            path: 'buyer-pin',
            component: BuyerPinComponent
          }
        ]
      },
    ]
  },
  { path: 'services', outlet: 'popupContent', component: ContextPinServicesComponent },
  { path: 'emails', outlet: 'popupContent', component: ContextPinEmailsComponent },
  { path: 'details', outlet: 'popupContent', component: ContextPinDetailsComponent }
];

The stackblitz project with the issue.

The stackblitz project with the solution.

Erwinery

Answer 2

Did u add the following to your code?

{
path: '',
redirectTo: '/',
pathMatch: 'full'

}

Infestation

Thanks for the reply, but in this case it did not help. You can see the issue here: stackblitz.com/edit/angular-material2-issue-dehbgc – Erwinery

Answer 3

As per my understanding, I think this is happening due to router-outlet in entryComponent. If we make a CSS dialog box then we don't have any issue.

Hamill

Hello, welcome to S.Ohttps://stackoverflow.com/help/how-to-answer please look into this and provide proper details – Mathers