Service not being shared between modules

Question

This is my current setup

Dashboard Module

import { HomieService } from './homie.service';
import { ServiceService } from './service.service';

@NgModule({
  imports:      [ DashboardRoutingModule, CommonModule],
  providers:    [ HomieService, ServiceService ],
  declarations: [ DashboardComponent, ValuesPipe],
  exports: [ValuesPipe]
})
export class DashboardModule { }

Homie Module

import { DashboardModule } from '../dashboard.module';

@NgModule({
  imports: [
    CommonModule,
    ...
    DashboardModule
  ],
  declarations: [HomieListComponent, HomieDetailComponent]
})
export class HomieModule {
 }

Service Module

import { DashboardModule } from '../dashboard.module';

@NgModule({
  imports: [
    CommonModule,
    ...
    DashboardModule
  ],
  declarations: [ServiceDetailComponent, ServiceListComponent]
})
export class ServiceModule {
 }

Shared Module

import { ServiceService } from './service.service';
import { HomieService } from './homie.service';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [HomieService, ServiceService]
    };
  }
}

As you can see I have a shared module (Dashboard.module) which is imported by Homie and Service Module, the thing is that these two modules seem to have different instances of HomieService and ServiceService (I want them to have the same instance of both services)

I tried creating a shared module:

import { ServiceService } from './service.service';
import { HomieService } from './homie.service';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [HomieService, ServiceService]
    };
  }
}

And using it inside Dashboard.module:

@NgModule({
  imports:      [ DashboardRoutingModule, CommonModule, SharedModule.forRoot()],
  declarations: [ DashboardComponent, ValuesPipe],
  exports: [ValuesPipe]
})
export class DashboardModule {
}

But the same behaviour is happening

Answer 1

The issue is that you are registering the service multiple times. You should only register a service ONE TIME in the application. As Gunter said, the providers are hoisted into the root scope and shared among all of your components.

Saying it another way, the service should only be listed in a providers array ONE TIME.

You have it here:

@NgModule({
  imports:      [ DashboardRoutingModule, CommonModule],
  providers:    [ HomieService, ServiceService ],
  declarations: [ DashboardComponent, ValuesPipe],
  exports: [ValuesPipe]
})

And here:

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [HomieService, ServiceService]
    };
  }

Also note that a service should never be in a shared module. From the docs:

While many components share the same service instances, they rely on Angular dependency injection to do this kind of sharing, not the module system.

Several components of the sample inject the UserService. There should be only one instance of the UserService in the entire application and only one provider of it.

UserService is an application-wide singleton. You don't want each module to have its own separate instance. Yet there is a real danger of that happening if the SharedModule provides the UserService.

Do not specify app-wide singleton providers in a shared module. A lazy-loaded module that imports that shared module makes its own copy of the service.

If you want, you can put them in a Core module as defined here: https://angular.io/guide/ngmodule#the-core-module