title: I am getting error while I am using route guards in Angular, Error is showing like this, Cannot find name 'next'
body: <p>I am using Route guards in my angular project, and I am implementing route guards for Service component in my angular project. Now I am struck with one error and the error will be shown like this in the visual studio editor,  ->    Cannot find the name 'next'.<br>
  The error is showing when I am trying to use next keyword in auth.guard.ts  in angular project.</p>
  
  <p>In auth.guard.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanActivate } from '@angular/router';
  import { Observable } from 'rxjs';
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class AuthGuard implements CanActivate {
    user = {
      role: 'ADMIN'
    }
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable&lt;boolean | UrlTree&gt; | Promise&lt;boolean | UrlTree&gt; {
      if(user.data[0] == this.user.role)
      return true;
      throw new Error("Method not implemented.");
    }
  
  }
  
  </code></pre>
  
  <p>In app-routing.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { HomeComponent } from './home/home.component';
  import { AboutusComponent } from './aboutus/aboutus.component';
  import { ServicesComponent } from './services/services.component';
  import { AuthGuard } from './guards/auth.guard';
  
  const routes: Routes = [
    {
      path:'',
      component:HomeComponent
    },
    {
      path:'aboutus',
      component:AboutusComponent
    },
    {
      path:'services',
      component:ServicesComponent,
      canActivate: [AuthGuard],
      data: ['ADMIN']
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  
  </code></pre>
  
  <p>In app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { NavbarComponent } from './navbar/navbar.component';
  import { HomeComponent } from './home/home.component';
  import { AboutusComponent } from './aboutus/aboutus.component';
  import { ServicesComponent } from './services/services.component';
  import { AuthGuard } from './guards/auth.guard';
  
  @NgModule({
    declarations: [
      AppComponent,
      NavbarComponent,
      HomeComponent,
      AboutusComponent,
      ServicesComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule
    ],
    providers: [AuthGuard],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  
  </code></pre>