service not singleton inside MatDialog module

Question

When I open a Mat Dialog popup ( angular material ) and accessing a singleton service, for some reason inside the mat dialog the service seems to be a new instance of the service and not the singleton service used across the app.

I know how to make workaround but I prefer understanding if there is a known issue with matdialog and maybe a fix.

  const dialogRef = this.dialog.open(MyComponent, {
  width: '400px',
  data: {
    myInfo: Info
  },
});

The service was added in the "App.component.ts" as a singleton like this:

import {Component, OnInit} from '@angular/core';
import {NavigationEnd, Router} from '@angular/router';
import {AuthService} from './shared/services/auth.service';
@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.scss'],  

providers: [AuthService]})    export class AppComponent implements OnInit {}

Thanks!

Answer 1

As far as I know, the problem is that you are declaring service inside AppComponent , but material dialogs are spawning outside your app-root ( angular cdk is spawning as last element in body ) so it's not available for your dialog component . To fix this you should declare provider AuthSerivce inside your main AppModule then it will be visible in your dialog component.

Answer 2

I am running into the same issue. Have you had any answers to this question? I'm also using mat-dialog, when i call a service (with providedIn root), the dialog creates a new instance of the service.