Route guards

But before the link takes the user to the WorkoutComponent, there is another step along the way that we need to consider. The possibility always exists that the ID that is passed in the URL for editing a workout could be incorrect or missing. In those cases, we do not want the component to load, but instead, we want to have the user redirected to another page or back to where they came from.

Angular offers a way to accomplish this result with route guards. As the name implies, route guards provide a way to prevent navigation to a route. A route guard can be used to inject custom logic that can do things such as check authorization, load data, and make other verifications to determine whether the navigation to the component needs to be canceled or not. And all of this is done before the component loads so it is never seen if the routing is canceled.

Angular offers several route guards, including CanActivate, CanActivateChild, CanDeActivate, Resolve, and CanLoad. At this point, we are interested in the Resolve route guard. The Resolve guard will allow us not only to check for the existence of a workout, but also to load the data associated with a workout before loading the WorkoutComponent. The advantage of doing the latter is that we avoid the necessity of checking to make sure the data is loaded in the WorkoutComponent and it eliminates adding conditional logic throughout its component template to make sure that the data is there when it is rendered.  This will be especially useful when in the next chapter when we start using observables where we must wait for the observable to complete before we are guaranteed of having the data that it will provide. The Resolve guard will handle waiting for the observable to complete, which means that the WorkoutComponent will be guaranteed to have the data that it needs before it loads.