Why does ', providers: [TravelService] ' in a component prevent the RXJS Behaviour subject from sharing data across components?

Question

@Component({
  selector: 'app-overview-travel',
  templateUrl: './overview-travel.component.html',
  styleUrls: ['./overview-travel.component.scss'],
  providers: [TravelService]
})

The code above prevented data from my shared data service (using Behaviour Subject from RXJS) from properly being shared.

@Component({
  selector: 'app-overview-travel',
  templateUrl: './overview-travel.component.html',
  styleUrls: ['./overview-travel.component.scss']
})

However when i remove the providers: [TravelService] the DataSharing Service works fine.. I'd love to know why?

Thanks in advance!

Answer 1

Your first version prevents the data sharing because you're providing a new instance of the TravelService for your component and its child components. So every OverviewTravel component has its own instance of the TravelService, which cannot be accessed by other components.

For more details see the docs.