title: Angular2 Routing: Page doesn't navigate to my view component on clicking router-link
body: <p>I have created my <strong><code>app.routes.ts</code></strong> and imported all the relevant libraries.</p>
  
  <p>Thereafter, I linked all the paths to their relevant Components like this:</p>
  
  <pre><code>import {ModuleWithProviders} from '@angular/core';
  import {Routes, RouterModule} from '@angular/router';
  import {AttendanceComponent} from './attendance/attendance.component';
  import {LoginComponent} from './login/login.component';
  
  //Route Configuration
  export const routes: Routes = [
    {path: '', component: LoginComponent},
    {path: 'attendance', component: AttendanceComponent}
  ];
  
  export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
  </code></pre>
  
  <p>I boostrapped my app in <strong><code>my app.module</code></strong>:</p>
  
  <pre><code>import { Component, NgModule } from '@angular/core';
  import { LocationStrategy, HashLocationStrategy } from '@angular/common';
  import { BrowserModule } from '@angular/platform-browser';
  import { RouterModule } from '@angular/router';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  
  //declarations
  import { AppComponent } from './app.component';
  import { LoginComponent } from  './login/login.component';
  import { AttendanceComponent } from './attendance/attendance.component';
  import { routing, routes } from './app.routes';
  
  //decorator
  @NgModule({
    imports:      [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing,
        RouterModule
      ],
    declarations: [
          AppComponent,
          LoginComponent,
          AttendanceComponent
        ],
    //put services
    //providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap: [ AppComponent ]
  })
  export class AppModule {
    //module class
  }
  </code></pre>
  
  <p>On my <strong><code>app.component</code></strong>, I called my landing page</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {LoginComponent} from './login/login.component';
  
  @Component({
    selector: 'oosc_app',
    template: `&lt;login&gt;&lt;/login&gt;`
  })
  
  export class AppComponent{
  }
  </code></pre>
  
  <p>The landing page is <strong><code>login.template.html</code></strong>:</p>
  
  <pre><code>&lt;body class="login"&gt;
  &lt;div id="login" class="login-position"&gt;
          &lt;div class="logo"&gt;
              &lt;a href="index.html"&gt;&lt;img src="assets/images/oosc-logo-login.png" alt="" /&gt;&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="wrapper-login"&gt;
              &lt;input type="text" placeholder="TSC Number" class="user"/&gt;
              &lt;input type="password" placeholder="Password" class="password"/&gt;
          &lt;/div&gt;
  
          &lt;!--&lt;a [routerLink]="['/attendance']" class="login-button"&gt;Sign in&lt;/a&gt;--&gt;
          &lt;a [routerLink]="['/attendance']"  class="login-button"&gt;Sign in&lt;/a&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;span&gt;Not a member ?&lt;a href="#"&gt;Create your account&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The router link should direct the page to <strong><code>attendance.component.ts</code></strong> thereafter show the view.</p>
  
  <p>The problem is while the sign in button clicks, it navigates to <em>localhost:3000/attendance</em> but doesn't sticks with the login view instead of the attendance view.</p>
  
  <p>Below is my <strong><code>attendance.component.ts</code></strong>:</p>
  
  <pre><code>//I have separated it into headers and footers and called the templateUrl
  //in a component called Content
  
  import {Component} from '@angular/core';
  import {OnInit} from '@angular/core';
  import {HeaderComponent} from '../partials/header.component';
  import {FooterComponent} from '../partials/footer.component';
  import {ContentComponent} from '../partials/content.component';
  
  @Component({
    selector: 'attendance',
    //templateUrl:  `/app/attendance/attendance.template.html`
    template: `&lt;header&gt;&lt;/header&gt;&lt;footer&gt;&lt;/footer&gt;`,
    providers: [HeaderComponent, ContentComponent, FooterComponent]
  })
  
  export class AttendanceComponent implements OnInit{
    ngOnInit(){
      console.log('ngOnInit');
    }
  }
  </code></pre>
  
  <p>What seems to be the problem?</p>
  
  <p>How comes it's not navigating to the relevant view?</p>