import {BrowserModule} from '@angular/platform-browser';

import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';

import {NavBarComponent} from './nav-bar/nav-bar.component';

import {FooterComponent} from './footer/footer.component';

import {SearchComponent} from './search/search.component';

import {ProductComponent} from './product/product.component';

import {CarouselComponent} from './carousel/carousel.component';

import {StarsComponent} from './stars/stars.component';

import {HomeComponent} from './home/home.component';

import {RouterModule, Routes} from '@angular/router';

import {Code404Component} from './code404/code404.component';

import { LoginComponent } from './login/login.component';

const routes: Routes = [

  {path: '', redirectTo: '/home', pathMatch: 'full'},

  {path: 'home', component: HomeComponent},

  {path: 'login', component: LoginComponent},

  {path: '**', component: Code404Component}

];

@NgModule({

  declarations: [

    AppComponent,

    NavBarComponent,

    FooterComponent,

    SearchComponent,

    ProductComponent,

    CarouselComponent,

    StarsComponent,

    HomeComponent,

    Code404Component,

    LoginComponent

  ],

  imports: [

    BrowserModule,

    RouterModule.forRoot(routes)

  ],

  exports: [RouterModule],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule {

}

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>

        <li><a routerLink="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

      </ul>

<div class="container">

  <div class="main-box col-md-6 col-md-offset-3">

    <div class="panel panel-info">

      <div class="panel-heading">

        <div class="panel-title">Login</div>

      </div>

      <div style="padding:30px" class="panel-body">

        <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>

        <form class="form-horizontal" role="form">

          <label style="padding-bottom:10px" class="control-label">UserName</label>

          <div style="margin-bottom: 15px" class="input-group">

            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

            <input type="text" class="form-control" name="username" placeholder="username or email">

          </div>

          <label style="padding-bottom:10px" class="control-label">Password</label>

          <div style="margin-bottom: 25px" class="input-group">

            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>

            <input type="password" class="form-control" name="password" placeholder="password">

          </div>

          <div style="margin-top:10px" class="form-group">

            <div class="col-sm-12 controls">

              <a id="btn-login" href="#" class="btn btn-success">Login</a>

            </div>

          </div>

        </form>

      </div>

    </div>

  </div>

</div>

<div class="container">

  <div class="row">

    <div class="col-md-3">

      <app-search></app-search>

    </div>

    <div class="col-md-9">

      <div class="row">

        <app-carousel></app-carousel>

      </div>

      <div class="row">

        <app-product></app-product>

      </div>

    </div>

  </div>

</div>

<app-nav-bar></app-nav-bar>

<router-outlet></router-outlet>

<app-footer></app-footer>