title: Angular 2 router can't navigate to other route
body: <p>I have a project with angular 2. This project has a login service to authenticate user. This is my <code>loginService.ts</code> : </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { GlobalVariableService } from '../service/globalVariableService';
  import { HttpErrorResponse } from '@angular/common/http/src/response';
  import { CookieService } from 'ngx-cookie-service';
  import { Observable } from 'rxjs/Observable';
  import { catchError } from 'rxjs/operators';
  import { Router } from '@angular/router';
  
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class LoginService {
      constructor(
          private globalVariableService: GlobalVariableService,
          private http: HttpClient,
          private cookieService: CookieService,
          private router: Router
      ) {
  
      }
  
      isLoggedin: boolean = false;
  
      getCurrentUser() {
          var url = this.globalVariableService.baseURL + '/users/me';
          return this.http.get(url);
      }
  
      loginUser(email: string, password: string) {
          var obj = {email:email, password: password};
          var url = this.globalVariableService.baseURL + '/users/login';
          return this.http.post(url, obj)
      }   
  }
  </code></pre>
  
  <p>Then I have a componen to handle input from a user's form <code>login-page-admin.componen.ts</code> : </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { CookieService } from 'ngx-cookie-service';
  
  import { LoginService } from '../service/loginService';
  import { EventService } from '../service/eventService';
  
  interface loginResponse {
    status: boolean;
    code: number,
    message: Object
  }
  
  @Component({
    selector: 'app-login-page-admin',
    templateUrl: './login-page-admin.component.html',
    providers: [LoginService],
    styleUrls: ['./login-page-admin.component.css', '../app.component.css', '../css/login.css']
  })
  export class LoginPageAdminComponent implements OnInit {
    email: string;
    password: string;
  
    constructor(
      private router : Router,
      private loginService : LoginService,
      private cookieService: CookieService
    ){ }
  
    ngOnInit() {
    }
  
    postLogin(){
      var self = this;
      self.loginService.loginUser(this.email, this.password)
      .subscribe(function(data: loginResponse){
        console.log(data.status);
        if(data.status == false){
          console.log('FAILED!!');
          this.router.navigate(['#']);
        } else {
          console.log('LOGIN SUCCEED!');
          this.router.navigate(['events']);
        }
      })
    }
  }
  </code></pre>
  
  <p>[EDITED] : This is my <code>app.module.ts</code> (routing) : </p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule }   from '@angular/forms';
  import { HttpClientModule } from '@angular/common/http';
  
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
  
  import { AppComponent } from './app.component';
  
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { DateTimePickerModule } from 'ng-pick-datetime';
  
  import { CookieService } from 'ngx-cookie-service';
  
  // routing
  import { Routes, RouterModule } from '@angular/router';
  const routes: Routes = [
    { path: 'login-page', component: LoginPageComponent},
    { path: 'login-page-admin', component: LoginPageAdminComponent},
    { path: '', component: SetupEventComponent },
    { path: 'events', component: EventsComponent},
    { path: 'room/:eventId', component: RoomComponent},
    { path: 'room-supervisor/:eventId', component: RoomSupervisorComponent},
    { path: 'room-engagement/:eventId', component: RoomEngagementComponent},
    { path: 'setup', component: SetupEventComponent },
    { path: 'display/:roomId', component: DisplayComponent},
    { path: 'in-gate/:eventId/:roomId', component: InGateComponent},
    { path: 'out-gate/:eventId/:roomId', component: OutGateComponent},
    { path: 'in-gate-bypass/:eventId/:roomId', component: InGateBypassComponent},
    { path: 'out-gate-bypass/:eventId/:roomId', component: OutGateBypassComponent},
    { path: 'in-gate-qrcode/:eventId/:roomId', component: InGateQRCodeComponent},
  
  ];
  
  // services
  import { GlobalVariableService } from './service/globalVariableService';
  
  // components
  import { RoomComponent } from './room/room.component';
  import { SetupEventComponent } from './setup-event/setup-event.component';
  import { DisplayComponent } from './display/display.component';
  import { InGateComponent } from './in-gate/in-gate.component';
  import { OutGateComponent } from './out-gate/out-gate.component';
  import { LoginPageComponent } from './login-page/login-page.component';
  import { UserAdministrationComponent } from './user-administration/user-administration.component';
  import { LoginPageAdminComponent } from './login-page-admin/login-page-admin.component';
  import { RoomSupervisorComponent } from './room-supervisor/room-supervisor.component';
  import { RoomEngagementComponent } from './room-engagement/room-engagement.component';
  import { EventsComponent } from './events/events.component';
  import { AutofocusDirective } from './autofocus.directive';
  import { InGateBypassComponent } from './in-gate-bypass/in-gate-bypass.component';
  import { OutGateBypassComponent } from './out-gate-bypass/out-gate-bypass.component';
  import { InGateQRCodeComponent } from './in-gate-qrcode/in-gate-qrcode.component';
  
  
  @NgModule({
    declarations: [
      AppComponent,
      RoomComponent,
      SetupEventComponent,
      DisplayComponent,
      InGateComponent,
      OutGateComponent,
      LoginPageComponent,
      UserAdministrationComponent,
      LoginPageAdminComponent,
      RoomSupervisorComponent,
      RoomEngagementComponent,
      EventsComponent,
      AutofocusDirective,
      InGateBypassComponent,
      OutGateBypassComponent,
      InGateQRCodeComponent,
    ],
    imports: [
      AngularFontAwesomeModule,
      NgbModule.forRoot(),
      BrowserModule,
      HttpClientModule,
      FormsModule,
      RouterModule.forRoot(routes, {useHash: true}),
  
      BrowserAnimationsModule,
      DateTimePickerModule
    ],
    providers: [
      GlobalVariableService,
      CookieService,
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>When I try that in browser, the authentication works but couldn't route to another path according the code. So what's wrong with my code? Thanks for any answer</p>