Building Large-Scale Web Applications with Angular

Implementing the login component

The login component leverages the authService that we just created and implements validation errors using reactive forms. The login component should be designed in a way to be rendered independently of any other component, because during a routing event, if we discover that the user is not properly authenticated or authorized, we will navigate them to this component. We can capture this origination URL as a redirectUrl so that once a user logs in successfully, we can navigate them back to it.

1. Let's start with implementing the routes to the login component:

src/app/app-routing.modules.ts...  { path: 'login', component: LoginComponent },  { path: 'login/:redirectUrl', component: LoginComponent },...

2. Now implement ...