So far our problem is that we are creating two instances of the same services in different levels of the DI tree. The instance created in the lower branch of the tree is shadowing the one defined at the root level. The solution? To avoid creating a second instance in a lower level of the DI tree for the lazy loaded module and only use the service instance registered at the root of the tree.
To accomplish that, we need to modify the definition of the SharedModule and instead of defining our service in the providers property, we need to create a static method called forRoot that exports the service along with the module itself.
We should only call forRoot in the root application module and no where else. This ensures that only a single instance of your service exists at the root level. Calling forRoot in another module can register the service again in a different level of the DI tree.
Since SharedModule only consists of a service that Angular registers in the root app injector, we do not need to import it in LazyModule. This is because the lazy loaded module will already have access to services defined at the root level.
This time, whenever we change the value of the counter property, this value is shared between the EagerComponent and the LazyComponent proving that we are using the same instance of the CounterService.
However it is very likely that we may have a component, pipe or directive defined in SharedModule that we'll need in another module. Take the following for example.