StaticInjectorError(AppModule)[NbIsGrantedDirective -> NbAccessChecker]

Question

I am using NbAuthJWTToken with ngx-admin to make authentication but I got this error :

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[NbIsGrantedDirective -> NbAccessChecker]: StaticInjectorError(Platform: core)[NbIsGrantedDirective -> NbAccessChecker]: NullInjectorError: No provider for NbAccessChecker! Error: StaticInjectorError(AppModule)[NbIsGrantedDirective -> NbAccessChecker]: StaticInjectorError(Platform: core)[NbIsGrantedDirective -> NbAccessChecker]: NullInjectorError: No provider for NbAccessChecker! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:717) at resolveToken (core.js:954) at tryResolveToken (core.js:898) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795) at resolveToken (core.js:954) at tryResolveToken (core.js:898) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795) at resolveNgModuleDep (core.js:17739) at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:18428) at resolveNgModuleDep (core.js:17739) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:14134) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595)

This is my files content: app.module.ts:

/**
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */
import { APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { CoreModule } from './@core/core.module';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ThemeModule } from './@theme/theme.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppService } from './app.service';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,

    NgbModule.forRoot(),
    ThemeModule.forRoot(),
    CoreModule.forRoot(),
  ],
  bootstrap: [AppComponent],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' },
    AppService
  ],
})
export class AppModule {
}

app.routing:

import { ExtraOptions, RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { AuthGuard } from './guards/auth.guard';

const routes: Routes = [
  { path: 'pages',canActivate: [AuthGuard], loadChildren: './pages/pages.module#PagesModule' },
  {
    path: 'auth',
    loadChildren: './@theme/components/auth/auth.module#AuthModule',
  },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

const config: ExtraOptions = {
  useHash: true,
};

@NgModule({
  imports: [RouterModule.forRoot(routes, config)],
  exports: [RouterModule],
})
export class AppRoutingModule {
}

core.module:

import {
  ModuleWithProviders,
  NgModule,
  Optional,
  SkipSelf
} from "@angular/core";
import { CommonModule } from "@angular/common";
import {
  NbAuthModule,
  NbDummyAuthStrategy,
  NbPasswordAuthStrategy,
  NbAuthJWTToken
} from "@nebular/auth";
import { NbSecurityModule, NbRoleProvider } from "@nebular/security";
import { of as observableOf } from "rxjs";

import { throwIfAlreadyLoaded } from "./module-import-guard";
import { DataModule } from "./data/data.module";
import { AnalyticsService } from "./utils/analytics.service";
import { environment } from './../../environments/environment';

const socialLinks = [
  {
    url: "https://github.com/akveo/nebular",
    target: "_blank",
    icon: "socicon-github"
  },
  {
    url: "https://www.facebook.com/akveo/",
    target: "_blank",
    icon: "socicon-facebook"
  },
  {
    url: "https://twitter.com/akveo_inc",
    target: "_blank",
    icon: "socicon-twitter"
  }
];

export const NB_CORE_PROVIDERS = [
  ...DataModule.forRoot().providers,
  ...NbAuthModule.forRoot({
    strategies: [
      NbPasswordAuthStrategy.setup({
        name: "email",
        token: {
          class: NbAuthJWTToken,
          key: "token"
        },
        baseEndpoint: environment.apiEndpoint,
        login: {
          endpoint: "/login",
          method: "post"
        },
        requestPass: {
          endpoint: "/forgot",
          method: "post",
          redirect: {
            success: '/auth/reset-password',
            failure: null,
          },
        },
        resetPass: {
          endpoint: "/reset",
          method: "put",
          redirect: {
            success: '/auth/login',
            failure: null,
          },
          resetPasswordTokenKey: 'reset_password_token',
        },
        logout: {
          alwaysFail: false,
          endpoint: '/logout',
          method: 'delete',
          redirect: {
            success: '/auth/login',
            failure: null,
          },
        },
        register: {
          alwaysFail: false,
          endpoint: '/register',
          method: 'post',
          redirect: {
            success: '/auth/login',
            failure: null,
          },
        }
      })
    ],
    forms: {
      login: {
        redirectDelay: 0,
        strategy: 'email',
        rememberMe: true,
        showMessages: {
          success: true,
        },
      },
      register: {
        redirectDelay: 0,
        showMessages: {
          success: true,
        },
      },
      requestPassword: {
        redirectDelay: 0,
        showMessages: {
          success: true,
        },
      },
      resetPassword: {
        redirectDelay: 0,
        showMessages: {
          success: true,
        },
      },
      logout: {
        redirectDelay: 500,
      },
      validation: {
        name: {
          required: true,
        },
        phone: {
          required: true,
          minLength: 8,
          maxLength: 12,
        },
        password: {
          required: true,
        },
        email: {
          required: true
        },
        idNumber: {
          required: true,
          minLength: 8,
          maxLength: 12,
        },
      },
    }
  }).providers,
  AnalyticsService
];

@NgModule({
  imports: [CommonModule],
  exports: [NbAuthModule],
  declarations: []
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    throwIfAlreadyLoaded(parentModule, "CoreModule");
  }

  static forRoot(): ModuleWithProviders {
    return <ModuleWithProviders>{
      ngModule: CoreModule,
      providers: [...NB_CORE_PROVIDERS]
    };
  }
}

I also added the nebular auth component to my project and guards folder too

Answer 1

you shall import NbSecurityModule in your AppModule. it solve for me.

Answer 2

In your app.module.ts file add this:

imports: [ ... NbSecurityModule.forRoot(), ... ]

Answer 3

the error, you've posted says you're using NbIsGrantedDirective and this directive requires NbAccessChecker. To provide the NbAccessChecker, please, install npm i @nebular/security and import SecurityModule into your application. Detailed documentation you may find here.

Answer 4

You need to provide this also you can check ngx-admin for complete example in core.module.ts { provide: NbRoleProvider, useClass: NbSimpleRoleProvider, }