How to make components in Angular 2 singleton?

Question

I am using Angular 2 to build my web application which which has lot of components. I am using angular-cli to create, run and build the project.
Accidentally (or luckily) I stumbled across a bug where I realized that multiple instances of my component were being created. Even worse was when I realized that my code was referring to any one this instances randomly without any logic to trace it back.

As an example, check the following scenario:

• I logged into my application and made a REST call (on window resize event) in a specific component
• An important point here is every user has an unique ID which is used in REST calls
• Then I logged out from this user and logged in with another user
• I went back to same component and made the same rest calls (again on window resize events), however to my shock, some of the rest calls were being made using the unique ID or earlier logged in user
• To check my suspicion, I created a first class variable in the constructor which basically stores the value of Date.now(). This is turn would tell me when the class was instantiated.
• Then I added a few console.log() statements which would show me which instance was being called by the value of my variable.
• The log confirmed my suspicion that multiple instances indeed exist simultaneously and there is no certain logic or path followed to access anyone of them.

This is the image of my log statement. I have blackened out the sensitive parts. It can be clearly seen that some rest calls are being made with the unique id for tenant 1 while some for trial tenant. Also use of two instances is also very clear from two instance times. The old instance of previous logged in tenant is somehow still in play and my component is still able to access it.

My Questions are:

1. Is there a way to make the component class singleton?
2. Is there any way to destroy the component instance on leaving the component?

Answer 1

1. Is there a way to make the component class singleton?

not that i am aware of

2. Is there any way to destroy the component instance on leaving the component?

yes, there is an interface OnDestroy

export class ClockComponent implements OnDestroy {
interval;

ngOnDestroy() {
  clearInterval(this.interval);
}

constructor() {
  this.interval = setInterval( ()=> console.log('tick') );
}