Providing alternate classes against same DI Token

In this recipe, you'll learn how to provide two different services to the app using Aliased class providers. This is extremely helpful in complex applications where you need to narrow down the implementation of the service/class for some components/modules. That is providing different classes against the same DI token to have a polymorphic behavior. Additionally, aliasing is used in component/service unit tests to mock the dependent service's actual implementation so that we don't rely on it.

Getting ready

The app that we are going to work with resides in start/apps/chapter03/ng-aliased-class-providers inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ng-aliased-class-providers to serve the project

This should open the app in a new browser tab and you should see the app as shown in Figure 3.11

1. Click on the Login...