Lazy Loading and the Dependency Injection Tree

To show this behaviour, let's continue with the example of the previous section and add a to our LazyModule.

app/lazy/lazy.module.ts

Here we added the CounterService to the providers array. Our CounterService is a simple class that holds a reference to a property.

We can modify the LazyComponent to use this service with a button to increment the counter property.

app/lazy/lazy.component.ts

View Example

But the question is, how can we verify that the service is isolated and cannot be used in a component that belongs to a different module? Let's try to use the same service in the EagerComponent.

app/eager.component.ts

If we try to run this new version of our code, we are going to get an error message in the browser console: