Angular service instantiated twice?

Question

somehow I've got a service that seems to be instantiated twice (its properties are not in sync), by doing the following:

@Component
export class MyComponent extends someOtherComponent {
  constructor(service: Service, service2: Service2) {
    super(service, service2);
  }

  isStateEqual() {
    return this.service.serviceState === this.service2.service.serviceState;
  }
}

@Injectable
export class Service {
  serviceState = {}
}

@Injectable
export class Service2 {
  constructor(service: Service) {}
}

This is just a very basic example, but that's what it comes down to. To be more precise: We're building our own datepicker and extending NgbDatepicker component which has KeyMapService (this uses NgbDatepickerService) and a local NgbDatepickerService.
Here is a link to the component: https://ng-bootstrap.github.io/#/components/datepicker/examples

In our app isStateEqual will always return false (even right after initialising the component) while in the demo you can find in the link above it will always return true (which is how it should be).

Anyone knows why it could be like that?

Thanks in advance.

Regards Dennis

Answer 1

Application wide singletons must be defined on the bootstrapped module:

platformBrowserDynamic()
  .bootstrapModule(AppModule)

@NgModule({
  providers: [SingletonService1, SingletonService2],
  bootstrap: [AppComponent]
})

export class AppModule {}

source

or by setting providedIn: 'root' on the service decorator:

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

source

Answer 2

In my case the service was instantiated twice, because I imported the service using two different approaches (my IDE (VS2019) mishelped me here by automatically generating the incorrect import):

import { Service } from '@mycompany/mymodule' 

and

import { Service } from '../../../dist/@mycompany/mymodule/@mycompany-mymodule';