Angular- AuthGuard Not working

Question

I have tried CanActivatein Angular 5. But it is now working as expected and I didn't get any error also. Please help me in solving this. Even the authguard is not instantiating. I just want to make routing happens only when the user is logged in. Once the user is logged in, I will store in session storage and retrieve the same in auth guard.

    // AuthGuard
    import { MatSnackBar } from '@angular/material';
    import { Router } from '@angular/router';
    import { Injectable } from '@angular/core';
    import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from 
    '@angular/router';
    import { Observable } from 'rxjs/Observable';

  @Injectable()
  export class AuthGuard implements CanActivate {
  constructor(private router: Router,  private snackBar: MatSnackBar) {}

  canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | 
  boolean {
        if (sessionStorage.getItem('token')) {
            return true;
       } else {
           this.router.navigateByUrl('/login');
          this.snackBar.open('Please Login to Continue');
       }
    }
}

---

    //Routing 
    import { AuthGuard } from './guards/auth.guard';
    import { LoginComponent } from './components/login/login.component';
    import { RegistrationComponent } from 
    './components/registration/registration.component';
    import { UploadComponent } from './components/upload/upload.component';
    import { RouterModule, Routes, CanActivate, CanActivateChild } from '@angular/router';
    import { ProductComponent } from './components/product/product.component';
    import { CategoryComponent } from './components/category/category.component';

    export const appRoutes = [
        {
          path: 'category',
          component: CategoryComponent,
          CanActivate: [ AuthGuard ]
        },
        {
          path: 'product',
          component: ProductComponent
        },
        {
          path : 'upload',
          component : UploadComponent
        },
        {
          path : 'register',
          component: RegistrationComponent
        },
        {
          path : 'login',
          component: LoginComponent
        }
    ];

---

    //app.module
    import { AuthInterceptor } from './interceptors/auth-interceptor.service';

    import { HttpClientModule } from '@angular/common/http';

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {BrowserAnimationsModule} from '@angular/platform-
     browser/animations';


    import { HttpModule } from '@angular/http';
    import { ReactiveFormsModule } from '@angular/forms';
    import { MatNativeDateModule } from '@angular/material';
    import { RouterModule, Routes } from '@angular/router';
    import { appRoutes } from './routes';
    import {HTTP_INTERCEPTORS} from '@angular/common/http';
    import { AuthGuard } from './guards/auth.guard';

    @NgModule({
      declarations: [
        AppComponent,
        CategoryComponent,
        ProductComponent,
        UploadComponent,
        RegistrationComponent,
        LoginComponent
      ],
      imports: [
        RouterModule.forRoot(appRoutes),
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        MatNativeDateModule,
        Material,
        HttpModule,
        HttpClientModule,
        ReactiveFormsModule
      ],
      providers: [
        CategoryService, 
        ProductService , 
        UploadService, 
        UserService, 
        AuthGuard, 
        {
          'provide': HTTP_INTERCEPTORS,
          'useClass': AuthInterceptor,
          'multi': true,
        },
    ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Answer 1

You forgot to provide it in app.module. Add AuthGuard to providers array. Also it should be canActivate , not CanActivate.