Preventing Navigation Away from a Route

Guards are used not only to prevent access to a route but also to prevent navigation away from it. A guard that controls if a route can be deactivated is a function of the CanDeactivateFn type. We will learn how to use it by implementing a guard that notifies the user of pending products in the cart:

1. Create a file named checkout.guard.ts inside the src\app folder.

2. Add the following import statements at the top of the file: