Getting ready

Before we can get started building our login page, we will need to generate a new login component to handle our login user experience. We will create that using Angular CLI's generate command:

ng generate component login

We will also need to remove any previous usage of the CurrentUserService service from our application. The main place we had used it previously was the /src/app/app.module.ts module. Ensure that the main module class export does not do anything with the CurrentUserService provider by removing its reference from the module.

We will also need to make sure that our LoginComponent component and Angular2FontawesomeModule are loaded in our application module properly.

Finally, we will need to make sure that our login route is accessible via the routing configuration under /login:

...
import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome';
import { LoginComponent } from './login/login.component'
;

const ROUTES = [
{
path: "",
redirectTo: "/posts",
pathMatch: 'full'
},
{
path: "login",
component: LoginComponent,
}
,
{
path: 'authors',
component: AuthorsComponent,
},
{
path: "**",
component: PageNotFoundComponent
}
];

...
@NgModule({
declarations: [
AppComponent,
AuthorsComponent,
PageNotFoundComponent,
AuthorComponent,
LoginComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
RouterModule.forRoot(ROUTES),
PostsModule,
NgbModule.forRoot(),
Angular2FontawesomeModule
],
providers: [{ provide: LOCALE_ID, useFactory: getLocaleProvider }, CurrentUserService],
bootstrap: [AppComponent]
})
export class AppModule {}

With these changes, we should be good to get started with implementing our login user interface.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.141.35.238