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
4
Answers
the error, you’ve posted says you’re using
NbIsGrantedDirective
and this directive requiresNbAccessChecker
. To provide theNbAccessChecker
, please, installnpm i @nebular/security
and importSecurityModule
into your application. Detailed documentation you may find here.You need to provide this also you can check ngx-admin for complete example in core.module.ts
{
provide: NbRoleProvider, useClass: NbSimpleRoleProvider,
}
you shall import NbSecurityModule in your AppModule. it solve for me.
In your app.module.ts file add this:
imports: [
…
NbSecurityModule.forRoot(),
…
]