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!

Answer 2

You need to add RoleGuardService in app.module.ts

here is the example:

import { AuthGuard, DisableAuthGuard} from '../../_guards/auth.guard';
@NgModule({
providers: [ 
...
RoleGuardService
],
imports: [ 
...
]
}
})

Answer 3

The initial error is caused by not adding the RoleGuardService to your providers.

@NgModule({
  ...
  providers: [AuthGuard, DisableAuthGuard, RoleGuardService, {
    provide: RECAPTCHA_SETTINGS,
    useValue: {
      siteKey: environment.recaptchasiteKey,
    } as RecaptchaSettings,
  }]
  ...
})

The subsequent error has to do with an injection in your RoleGuardService. You have private location: Location in your constructor but no import statement for Angular's Location.

import { Location } from '@angular/common';

Answer 4

As per the answers above, list RoleGuardService under providers, and if this service is provided from another module, and you want to use it in AppModule, make sure to import that module in AppModule as well.