Optional dependencies

Optional dependencies in Angular are powerful when you use or configure a dependency that may or may not exist or has not been provided within an Angular application. In this recipe, we will learn how to use the @Optional decorator to configure optional dependencies in our components and services. We will work with LoggerService and ensure our components do not break if they have not already been provided with the LoggerService.

Getting ready

The app that we are going to work with resides in start/apps/chapter03/ng-optional-dependencies 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 the following command to serve the project:

   npm run serve ng-optional-dependencies
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 3.2: The ng-optional-dependencies app running on http://localhost...