title: Angular 5 canActivate not working
body: <p>I'm trying to make an AuthGuard to check in every route if user is logged in. After a click in login button, I go to dashboard page and everything is ok. The problem is when I click in any other route by routerLink, the application reloads and redirect to login page again.</p>
  
  <p>I'm tying to reproduce what this project does: <a href="https://github.com/loiane/curso-angular2/blob/master/rotas/src/app/app.component.ts" rel="nofollow noreferrer">Angular-Routes</a></p>
  
  <p>UPDATE 1:
  Change implementation to use local storage and it work very well, anyway,  service data should not persist between routes if routes was changed by angular router?</p>
  
  <p>this is my code:</p>
  
  <p>auth.guard.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { ActivatedRouteSnapshot, CanActivate, CanLoad, Route, Router, RouterStateSnapshot } from '@angular/router';
  import { Observable } from 'rxjs/Observable';
  import { AuthService } from '../auth.service';
  
  @Injectable()
  export class AuthGuard implements CanActivate {
  
    constructor(
      private authService: AuthService,
      private router: Router
    ) {
  
    }
  
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;boolean&gt; | boolean {
      return this.canAccess();
    }
  
    private canAccess(): boolean {
  
      if (this.authService.canAccess()) {
        return true;
      }
      this.router.navigate(['/login']);
      return false;
    }
  }
  </code></pre>
  
  <p>auth.service.ts </p>
  
  <pre><code>import { EventEmitter, Injectable } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Injectable()
  export class AuthService {
    private user = false;
    logged = new EventEmitter&lt;boolean&gt;();
  
    constructor(private router: Router) {
  
    }
  
    authUser() {
      this.user = true;
      this.logged.emit(true);
      this.router.navigate(['/']);
    }
  
    canAccess() {
      return this.user;
    }
  
  }
  </code></pre>
  
  <p>app.routing.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  
  import { RouterModule, Routes } from '@angular/router';
  import { DashboardComponent } from './dashboard/dashboard.component';
  import { MidiaGalleryComponent } from './midia-gallery/midia-gallery.component';
  import { BannerComponent } from './banner/banner.component';
  import { NewsComponent } from './news/news.component';
  import { SolutionComponent } from './solution/solution.component';
  import { LoginComponent } from './login/login.component';
  import { AuthGuard } from './guards/auth.guard';
  
  
  const appRoutes: Routes = [
    { path: 'dashboard',
      component: DashboardComponent,
      canActivate: [AuthGuard]
    },
    { path: 'galeria-midia',
      component: MidiaGalleryComponent,
      canActivate: [AuthGuard]
    },
    { path: 'banners',
      component: BannerComponent,
      canActivate: [AuthGuard]
    },
    { path: 'noticias',
      component: NewsComponent,
      canActivate: [AuthGuard]
    },
    { path: 'solucoes',
      component: SolutionComponent,
      canActivate: [AuthGuard]
    },
    { path: 'login', component: LoginComponent },
    { path: '', pathMatch: 'full', redirectTo: '/dashboard' }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(appRoutes, {enableTracing: true})],
    exports: [RouterModule]
  })
  export class AppRoutingModule {
  
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { NgSelectModule } from '@ng-select/ng-select';
  import * as $ from 'jquery';
  
  // Components
  import { AppComponent } from './app.component';
  import { DashboardComponent } from './dashboard/dashboard.component';
  import { MidiaGalleryComponent } from './midia-gallery/midia-gallery.component';
  import { BannerComponent } from './banner/banner.component';
  import { SolutionComponent } from './solution/solution.component';
  import { NewsComponent } from './news/news.component';
  
  // Internal Modules
  import { NewsModule } from './news/news.module';
  import { SharedComponentsModule } from './shared-components/shared-components.module';
  import { BannerModule } from './banner/banner.module';
  import { SolutionModule } from './solution/solution.module';
  import { MidiaGalleryModule } from './midia-gallery/midia-gallery.module';
  import { LoginComponent } from './login/login.component';
  import { AppRoutingModule } from './app.routing.module';
  import { AuthService } from './auth.service';
  import { AuthGuard } from './guards/auth.guard';
  import { HeaderComponent } from './template/header/header.component';
  import { MenuComponent } from './template/menu/menu.component';
  import { FooterComponent } from './template/footer/footer.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      DashboardComponent,
      MidiaGalleryComponent,
      BannerComponent,
      SolutionComponent,
      NewsComponent,
      LoginComponent,
      HeaderComponent,
      MenuComponent,
      FooterComponent
    ],
    imports: [
      AppRoutingModule,
      BrowserModule,
      FormsModule,
      NewsModule,
      SharedComponentsModule,
      BannerModule,
      SolutionModule,
      NgSelectModule,
      MidiaGalleryModule,
    ],
    providers: [AuthService, AuthGuard],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>login template</p>
  
  <pre><code>&lt;div class="vertical-align login-background text-center" data-animsition-in="fade-in" data-animsition-out="fade-out"&gt;
    &lt;div class="page-content vertical-align-middle animation-slide-top animation-duration-1"&gt;
      &lt;div class="brand"&gt;
        &lt;img class="brand-img" src="../../assets/images/img_login_logo.png"&gt;
      &lt;/div&gt;
      &lt;p class="login-subtitle"&gt;Plataforma de conteúdo Unicred&lt;/p&gt;
      &lt;form&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="sr-only" for="inputEmail"&gt;Email&lt;/label&gt;
          &lt;input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="sr-only" for="inputPassword"&gt;Password&lt;/label&gt;
          &lt;input type="password" class="form-control" id="inputPassword" name="password"
                 placeholder="Senha"&gt;
        &lt;/div&gt;
        &lt;div class="form-group clearfix"&gt;
          &lt;div class="checkbox-custom checkbox-inline checkbox-primary float-left"&gt;
            &lt;input type="checkbox" id="inputCheckbox" name="remember"&gt;
            &lt;label class="remember-me" for="inputCheckbox"&gt;Lembre-me&lt;/label&gt;
          &lt;/div&gt;
          &lt;a class="float-right forgot-password" href="forgot-password.html"&gt;Esqueceu a senha?&lt;/a&gt;
        &lt;/div&gt;
        &lt;button (click)="onSubmit()" type="submit" class="btn btn-primary btn-block"&gt;Entrar&lt;/button&gt;
      &lt;/form&gt;
  
      &lt;footer class="page-copyright page-copyright-inverse"&gt;
        &lt;div class="text-capitalize" &gt;company&lt;/div&gt;
        &lt;div class="text-capitalize"&gt;© 2018. .&lt;/div&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Login Component</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { AuthService } from '../auth.service';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    constructor(private authService: AuthService) { }
  
    ngOnInit() {
    }
  
    onSubmit() {
      this.authService.authUser();
    }
  
  }
  </code></pre>
  
  <p>routerLink Example:</p>
  
  <pre><code> &lt;a class="animsition-link" routerLink="/galeria-midia" routerLinkActive="active"&gt;
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "su-backoffice",
    "title": "Backoffice Site",
    "version": "1.0.0",
    "keywords": [
      "css",
      "js",
      "less",
      "responsive",
      "web",
      "admin",
      "bootstrap",
      "scss"
    ],
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^5.0.0",
      "@angular/common": "^5.0.0",
      "@angular/compiler": "^5.0.0",
      "@angular/core": "^5.0.0",
      "@angular/forms": "^5.0.0",
      "@angular/http": "^5.0.0",
      "@angular/platform-browser": "^5.0.0",
      "@angular/platform-browser-dynamic": "^5.0.0",
      "@angular/router": "^5.0.0",
      "@ng-select/ng-select": "^0.30.1",
      "angular-froala-wysiwyg": "^2.7.6",
      "angular2-lightbox": "^1.3.0",
      "animsition": "^4.0.2",
      "bootstrap": "^4.0.0-alpha.4",
      "bootstrap-datepicker": "^1.7.1",
      "bootstrap-hover-dropdown": "^2.2.1",
      "bootstrap-markdown": "^2.10.0",
      "bootstrap-maxlength": "^1.6.0",
      "bootstrap-select": "^1.12.4",
      "bootstrap-sweetalert": "^1.0.1",
      "bootstrap-table": "^1.11.2",
      "bootstrap-tagsinput": "^0.7.1",
      "bootstrap-tokenfield": "^0.12.0",
      "bootstrap-touchspin": "^3.1.1",
      "bootstrap-treeview": "^1.2.0",
      "core-js": "^2.4.1",
      "font-awesome": "^4.7.0",
      "jquery": "^3.2.1",
      "jquery-asBreadcrumbs": "^0.2.3",
      "jquery-asColor": "^0.3.6",
      "jquery-asColorPicker": "^0.4.4",
      "jquery-asGradient": "^0.3.3",
      "jquery-asHoverScroll": "^0.3.6",
      "jquery-asPaginator": "^0.3.3",
      "jquery-asPieProgress": "^0.4.7",
      "jquery-asProgress": "^0.2.4",
      "jquery-asRange": "^0.3.4",
      "jquery-asScrollable": "^0.4.10",
      "jquery-asScrollbar": "^0.5.7",
      "jquery-asSpinner": "^0.4.3",
      "jquery-contextmenu": "^2.6.3",
      "jquery-knob": "^1.2.11",
      "jquery-match-height": "^0.7.2",
      "jquery-mousewheel": "^3.1.13",
      "jquery-placeholder": "^2.3.1",
      "jquery-selective": "^0.3.5",
      "jquery-slidePanel": "^0.3.5",
      "jquery-strength": "^0.2.5",
      "jquery-tabledit": "^1.0.0",
      "jquery-ui": "^1.12.1",
      "jquery-wizard": "^0.4.4",
      "jquery.mmenu": "^6.1.8",
      "ng2-dnd": "^5.0.2",
      "ngx-mydatepicker": "^2.4.4",
      "peity": "^3.2.1",
      "popper.js": "^1.12.9",
      "rxjs": "^5.5.2",
      "zone.js": "^0.8.14"
    },
    "devDependencies": {
      "@angular/cli": "1.5.0",
      "@angular/compiler-cli": "^5.0.0",
      "@angular/language-service": "^5.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/jquery": "^3.2.17",
      "@types/node": "~6.0.60",
      "autoprefixer": "^7.2.4",
      "codelyzer": "~4.0.0",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.1.2",
      "ts-node": "~3.2.0",
      "tslint": "~5.7.0",
      "typescript": "~2.4.2"
    }
  }
  </code></pre>