Providing different services to the app with the same Aliased class provider

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 base class for some components/modules. 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 project that we are going to work with resides in the chapter03/start_here/ng-aliased-class-providers path, which is inside the cloned repository. Perform the following steps:

1. Open the project in Visual Studio Code.
2. Open the Terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

   This should open the app in a new browser tab.

4. Click on the Login as Admin button. You should see something similar to the following...