In my main component, app.component.ts, I have integrated a new service into the providers[] array and initialized it in the constructor:
@Component({
selector: 'app-main',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [UserService]
})
export class MainComponent implements OnInit {
constructor( userService: UserService ) {}
ngOnInit(){}
}
Within my primary app module, app.module.ts, there is an entryComponent set up to be displayed within a MatDialog:
// ....
entryComponents: [ProfilePreviewComponent]
Upon launching the dialog, a duplicate instance of my UserService is generated. This results in two separate versions of the same service, causing any changes made within the dialog to not affect the original UserService used by the rest of the application.
What would be the most effective way to prevent this secondary service from being created? Appreciate any insights!