title: Struggling through AuthGuard in Angular
body: <p>Tried to follow AuthGuard example available here:
  <a href="http://www.sparkbit.pl/angular-2-route-guards-real-life-example/" rel="nofollow noreferrer">http://www.sparkbit.pl/angular-2-route-guards-real-life-example/</a></p>
  
  <p>Unfortunately, while trying to implement the <code>ActivationGuard.ts</code> file, I'm receiving few errors. </p>
  
  <pre><code>ERROR in C:/Users/app/src/app/ActivationGuard.ts (6,24): Cannot find name 'ActivatedRouteSna
  pshot'.)
  C:/Users/app/src/app/ActivationGuard.ts (6,55): Cannot find name 'RouterStateSnapshot'.)
  C:/Users/app/src/app/ActivationGuard.ts (13,62): Cannot find name 'CurrentUserService'.)
  C:/Users/app/src/app/ActivationGuard.ts (15,31): Cannot find name 'ActivatedRouteSnapshot'.)
  C:/Users/app/src/app/ActivationGuard.ts (15,62): Cannot find name 'RouterStateSnapshot'.)
  </code></pre>
  
  <p>Which basically means that the elements inside the <code>CanActivate</code> interface and inside constructors are not defined. </p>
  
  <p><code>routing</code> file:</p>
  
  <pre><code>import { WorksheetAccessGuard } from "./ActivationGuard";
  
  const appRoutes: Routes = [
    { path: '', component: LoginComponent }, 
    { path: 'app', component: AppComponent, canActivate: [WorksheetAccessGuard] },
    { path: '**', redirectTo: '' }
  ];
  </code></pre>
  
  <p>My question: From where could I get these missing elements?</p>
  
  <p>Provided image of my IDE: (the red words are the missing ones)</p>
  
  <h1>EDIT</h1>
  
  <p>I have made a custom service. I'm not sure if its fine or not:</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import {Http} from '@angular/http';
  
  @Injectable()
  export class UserAuthenticationService {
      isUserAuthenticated: boolean = false;
      username: string;
  
      constructor(private http: Http) {
      }
  
      authentication() {
          this.http.get(`http://localhost/api/auth/isLogged/${this.username}`)
              .subscribe(res =&gt; {
                      this.isUserAuthenticated = res.json();
                  },
                  err =&gt; {
                      console.error('An error occured.' + err);
                  });
      }
  
  
  }
  </code></pre>
  
  <p>Now I'm receiving some error inside the <code>AuthGuard</code> file:</p>
  
  <p><a href="https://i.stack.imgur.com/YaUff.png" rel="nofollow noreferrer">ERROR PIC</a></p>
  
  <p>**My main goal is checking with every component change (when user navigates over the page) if he is logged or not. If not - return him to the login page.</p>
  
  <h1>EDIT2</h1>
  
  <p>Can I just post all logic from the service in the <code>AuthGuard</code> file? It will look like:</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import {Router, RouterStateSnapshot, ActivatedRouteSnapshot} from '@angular/router';
  import {Observable} from 'rxjs/Observable';
  import {UserAuthenticationService} from './UserAuthenticationService';
  import {Http} from '@angular/http';
  
  interface CanActivate {
      canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean
  }
  
  @Injectable()
  export class WorksheetAccessGuard implements CanActivate {
      private static username: string;
      isUserAuthenticated: boolean = false;
  
      constructor(private router: Router, private userService: UserAuthenticationService, private http: Http) {
      }
  
      public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  
          this.http.get(`http://localhost/api/auth/isLogged/${this.username}`)
              .subscribe(res =&gt; {
                      this.isUserAuthenticated = res.json();
                  },
                  err =&gt; {
                      console.error('An error occured.' + err);
                  });
  
          if (!this.isUserAuthenticated) {
              this.router.navigate(['/']);
              return false;
          }
          return true;
      }
  }
  </code></pre>