No provider for InjectionToken Nebular Auth Options in ngx-admin angular 5

I have installed ngx-admin theme and want to customize my login auth component.

Below is what i have done to override the default auth component.

Followed this documentation exact as given

https://akveo.github.io/nebular/#/docs/auth/configuring-ui

Not sure if i have to keep auth.component.d and auth.module files inside the auth folder.

Inside the src/app/theme/components/auth folder i have files like:

Under src\app\theme\components\auth\login\login.component.d.ts

import { Router } from '@angular/router';

import { NbAuthService } from '../../../../../../@nebular/auth/services/auth.service';
...
...

src\app\theme\components\auth\auth.component.js

UPDATE: after regsitering NdTokenSerive i get another error, why is it so complicated just to extend auth component!!!

import { NbAuthService } from '../../../../../@nebular/auth/services/auth.service';
import { NbTokenService } from '../../../../../@nebular/auth/services/token.service';

 NbAuthComponent.decorators = [
    { type: Component, args: [{
                selector: 'nb-auth',
                styles: [":host /deep/ nb-layout .layout .layout-container .content .columns nb-layout-column{padding:2.5rem}:host /deep/ nb-card{height:calc(100vh - 2 * 2.5rem)}:host /deep/ nb-card{margin:0}:host /deep/ .flex-centered{margin:auto}:host /deep/ nb-card-body{display:flex}@media (max-width: 550px){:host /deep/ /deep/ nb-layout .layout .layout-container .content .columns nb-layout-column{padding:0}:host /deep/ nb-card{border-radius:0;height:100vh}} "],
                template: "\n    <nb-layout>\n      <nb-layout-column>\n        <nb-card>\n          <nb-card-body>\n            <div class=\"flex-centered col-xl-4 col-lg-6 col-md-8 col-sm-12\">\n                         </div>\n          </nb-card-body>\n        </nb-card>\n      </nb-layout-column>\n    </nb-layout>\n  ",
                providers: [NbAuthService,NbTokenService]    //UPDATED
            },] },
];

\src\app@theme\components\auth\login\login.component.js

NbLoginComponent.decorators = [
{
  type: Component,
  args: [
    {
      selector: 'nb-login',
      template:`LOGIN123`,   //also here if i put html in seperate file, using templateUrl, i get 'unable to load login.component.html'
      
    }
  ]
}
];

src\app@theme\components\auth\login\login.component.js

import { Component, Inject } from "@angular/core";
import { Router } from "@angular/router";
import { NB_AUTH_OPTIONS_TOKEN } from "../../../../../../@nebular/auth/auth.options";
import { getDeepFromObject } from "../../../../../../@nebular/auth/helpers";
import { NbAuthService } from "../../../../../../@nebular/auth/services/auth.service";

src\app@theme\theme.module.ts

import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { NbLoginComponent } from './components/auth/login/login.component';
import { NbAuthComponent } from './components/auth/auth.component';

const COMPONENTS = [
 NbLoginComponent,
 NbAuthComponent
];

@NgModule({
  imports: [...BASE_MODULES, ...NB_MODULES],
  exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS, ...PIPES],
  declarations: [...COMPONENTS, ...PIPES],
})

\src\app\app-routing.module.ts

import { NbLoginComponent } from './@theme/components/auth/login/login.component';
import { NbAuthComponent } from './@theme/components/auth/auth.component';

const routes: Routes = [
  { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule' },
  {
    path: 'auth',
    component: NbAuthComponent,
    children: [
      {
        path: '',
        component: NbLoginComponent,
      },
     {
        path: 'login',
        component: NbLoginComponent,
      }

Error trace:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[NbTokenService]: StaticInjectorError[NbTokenService]: NullInjectorError: No provider for NbTokenService! Error: StaticInjectorError[NbTokenService]: StaticInjectorError[NbTokenService]: NullInjectorError: No provider for NbTokenService! at _NullInjector.get (core.js:993) at resolveToken (core.js:1281) at tryResolveToken (core.js:1223)

Facing same issue from this github post: https://github.com/akveo/nebular/issues/37

If any1 resolved please provide complete answer!!

[abdelrhman92]

I am facing the same issue here. I have copied the source code from ‘frameworks/auth’. Deleted the services and other stuff ‘as recommended in the docs’ left only the components, auth-options and token. so my imports in the new login components looks like this :

import { Component, Inject } from '@angular/core'; import { Router } from '@angular/router'; import { NB_AUTH_OPTIONS, NbAuthSocialLink } from '../../auth.options'; import { getDeepFromObject } from '@nebular/auth/helpers'; import { NbAuthService, NbAuthResult } from '@nebular/auth/services/auth.service';

and I did the rest of the steps, changed the routing to the new components but I got error this error

Error: StaticInjectorError(AppModule)[LoginComponent -> InjectionToken Nebular Auth Options]: StaticInjectorError(Platform: core)[LoginComponent -> InjectionToken Nebular Auth Options]: NullInjectorError: No provider for InjectionToken Nebular Auth Options! at _NullInjector.get (core.js:1002) at resolveToken (core.js:1300) at tryResolveToken (core.js:1242) at StaticInjector.get (core.js:1110) at resolveToken (core.js:1300) at tryResolveToken (core.js:1242) at StaticInjector.get (core.js:1110) at resolveNgModuleDep (core.js:10850) at NgModuleRef_.get (core.js:12083) at resolveDep (core.js:12573)

[AmruthaSushanth]

Customizing Auth into other folder without using @nebular/auth

ERROR Error: "Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[NbAuthService -> NbAuthService -> NbAuthService]: NullInjectorError: No provider for NbAuthService! get@http://localhost:4200/vendor.js:36037:27 get@http://localhost:4200/vendor.js:50031:33 get@http://localhost:4200/vendor.js:50031:33 get@http://localhost:4200/vendor.js:50031:33 get@http://localhost:4200/vendor.js:67332:33 get@http://localhost:4200/vendor.js:65066:35

I have also this error… I put NbAuthModule.forRoot({ strategies: [ NbPasswordAuthStrategy.setup({ name: ‘email’, }), ], forms: {}, }),

inside app.module.ts But I got another error

ERROR in ./src/app/app.module.ts like Module not found: Error: Can’t resolve ‘./framework/auth/auth.module’ in ‘/home/amrutha/Documents/assignment/ngx-admin-starter-kit/src/app’ ERROR in ./src/app/app.module.ts Module not found: Error: Can’t resolve ‘./framework/auth/public_api’ in ‘/home/amrutha/Documents/assignment/ngx-admin-starter-kit/src/app’… Anyone please help me for solve this issue for customizing the ngx-admin Auth