Angular 6: Uncaught (in promise): Error: StaticInjectorError(AppModule)[RoleGuardService]

Question

I want to use RoleGuard service in one of my Angular 6 project. I have created a file - 'role-guard.service.ts' under "_guards" folder. Now in the routes file, I have declared the same as below and try to implement the same. Please note, I have a shared module and I did not declare the roleguardservice within the export.

import { RoleGuardService } from '../../_guards/role-guard.service';
const routes: Routes = [
    { path: 'edit-account-info', component: EditAccountInfoComponent, canActivate: [RoleGuardService] },
    ....
    ....
    ]
}

Below is my app.module.ts file:

import { AuthGuard, DisableAuthGuard} from '../../_guards/auth.guard';
....
....
exports : [
    // 
  ],
  providers: [AuthGuard, DisableAuthGuard, {
    provide: RECAPTCHA_SETTINGS,
    useValue: {
      siteKey: environment.recaptchasiteKey,
    } as RecaptchaSettings,
  }]

I want to change the routes depends on user roles. Like, if user role type 1, then he will redirect to "edit-account-info" otherwise (if user role type 2) he will redirect to "agent/edit-account-info". If user role type 2 wants to access the path "edit-account-info" he will go to "unauthorize" page.

But to implement it, when I want to access the page "edit-account-info" it shows me the error:

Uncaught (in promise): Error: StaticInjectorError(AppModule)[RoleGuardService]: StaticInjectorError(Platform: core)[RoleGuardService]: NullInjectorError: No provider for RoleGuardService! Error: StaticInjectorError(AppModule)[RoleGuardService]: StaticInjectorError(Platform: core)[RoleGuardService]: NullInjectorError: No provider for RoleGuardService! ... ....

Below is the role-guard.sevice.ts file content:

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router';
//import { AuthGuard } from './auth.guard';
import { CommonService } from './../services/common.service';
import { AuthGuard, DisableAuthGuard} from './auth.guard';

@Injectable()
export class RoleGuardService implements CanActivate {
  private userDetails: any;
  public user_salt: any;
  public roleName: any;

  constructor(
    //public auth: AuthService, 
    public router: Router,
    private commService: CommonService,
    private location: Location,
    ) {

    }

  canActivate(route: ActivatedRouteSnapshot): boolean {
    this.userDetails = this.commService.getSession('user');
    this.user_salt = this.commService.getSession('user_salt');
    const resultStorage = JSON.parse(this.commService.localstorageDecryption(this.userDetails, this.user_salt, 'N'));

    if (this.roleName === resultStorage.type) {
      return true;
    }

    // navigate to not found page
    this.router.navigate(['/404']);
    return false;
  }

}

Answer 1

Here you have to import service and Location in your app.module.ts and add it in providers array like below.

   import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
   import { RoleGuardService } from '../../_guards/role-guard.service';     
   import { AuthGuard, DisableAuthGuard} from '../../_guards/auth.guard';
    ....
    ....
    exports : [
        // 
      ],
      providers: [AuthGuard, RoleGuardService, 
        Location, {provide: LocationStrategy, useClass: PathLocationStrategy}
        DisableAuthGuard, {
        provide: RECAPTCHA_SETTINGS,
        useValue: {
          siteKey: environment.recaptchasiteKey,
        } as RecaptchaSettings,
      }]

Hope this will help!