Nebular: No provider for NbAuthService!

[wilson-young]

I have copied /framework/auth directory to my project src/app directory.

and i imported auth module into my app module

`/**

• @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 { HttpModule } from '@angular/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 { NbAuthModule } from "./auth/auth.module";

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

NgbModule.forRoot(),
ThemeModule.forRoot(),
CoreModule.forRoot(),

NbAuthModule,

],
bootstrap: [AppComponent],
providers: [
{ provide: APP_BASE_HREF, useValue: '/' },
],
})
export class AppModule {
}
and change my app-routing.module.ts to get auth components from copied directory
import {
NbAuthComponent,
NbLoginComponent,
NbLogoutComponent,
NbRegisterComponent,
NbRequestPasswordComponent,
NbResetPasswordComponent,
} from './auth/components/index';`

but when i try to access http://localhost:4200/#/auth/login i got error : ERROR Error: Uncaught (in promise): Error: No provider for NbAuthService!
Error: No provider for NbAuthService!

can anyone help me?
Thanks

[wilson-young]

in auth.component.ts i add a providers: [NbAuthService]
is it the correct way? but now the error change to core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for NbTokenService!

[nnixaa]

@wilson-young have you resolved the issue? Please provide a complete description with code examples and steps. Thanks.

[wilson-young]

@nnixaa,
Currently I have copied /framework/auth directory to my project src/app directory.

From the issue #12, u have said

In your particular case make sure that your app.routes correctly linked with your copied auth components, plus, as you copied them you have to tell Angular about that - so you need import them in some of your Angular modules (depending on your project structure). Hope this helps.

so i imported auth module into my app module

and i changed the import part in app-routing.module.ts

i also tried the add code in app.module as i see in documentation:

but i get the error nbEmailPassAuthProvider not found

i think my problem is i have done a wrong way to connect a custom auth directory into my ngx-admin project. can u help me with the best practice step for this issue? for customize auth module.

[wilson-young]

currently i get error when i try to access #/auth/login.

[nnixaa]

@wilson-young so as from the error - please import NbEmailPassAuthProvider in the app module and register it in providers section.

[wilson-young]

Thanks @nnixaa for respond, when i import

it will trigger error :
Can't export value NbEmailPassAuthProvider from NbAuthModule as it was neither declared nor imported!

note: can we have a more detail documentation about this case? about how to customize auth component, changing default register layout (because i think i need more user information in sign up page).

sorry for brothering you.
Thanks

[nnixaa]

@wilson-young we definitely will. So far it's hard to tell what's causing your issue. Generally, there is nothing special in the auth module - just a bunch of services and components. You can deploy a reproducible example to https://plnkr.co so that we can take a look.

[wilson-young]

app.zip

i cannot upload nebular auth module and ngx-admin to plunker,
so i attached the zip of my app directory.

[naumanahmad17]

@wilson-young have you sort out the issue ???

[wilson-young]

@naumanahmad17, no I haven't, I temporary using my own auth module.

[naumanahmad17]

@wilson-young thanks for the replay :). i am also going that way :)

[airportly]

any update on any documentation with examples of using an external auth provider such as auth0

[nnixaa]

Hey Guys, we updated the Auth section of the documentation. Please read through the articles here https://akveo.github.io/nebular/#/docs/auth/introduction, hope this would be helpful!

[wilson-young]

@nnixaa, thanks for the update, i will try with new project later. thanks

[thovo]

@wilson-young can you do it now?
I followed the tutorial and just found out that I couldn't include just only source, when compiled, the compiler said I was missing a service inside auth.component so I copied the whole source include service. It worked but it didn't recognize router-outlet so I did added RouterModule into theme.module.ts . @nnixaa I think you may need to update the tutorial or I did something wrong.

[thovo]

And I currently also stopped at this error: Error: No provider for NbAuthService!

[thovo]

Okay, after moving around, it worked for me now, I can now customize the all auth part as I wish.
Ironically, when I followed the tutorial, it just leaded me to new errors.

• So to be simple, you need to copy all the source files, include also services, providers and etc.
• Add these lines in app.module.ts

import { NbAuthModule } from './@theme/components/auth/auth.module';
import { NbEmailPassAuthProvider } from './@theme/components/auth/providers/email-pass-auth.provider';

NbAuthModule.forRoot({
      providers: {
        email: {
          service: NbEmailPassAuthProvider,
          config: {},
        }
      }
    })

• Compile again, stop the terminal first and restart it. Go to login component or any component you want, modify some text to see if it works.
• If it works as expected, drink wine
• Else, use hammer when deal with your boss

[manojvs]

An extension of the suggestion from @thovo - copying all source files from https://github.com/akveo/nebular/tree/master/src/framework/auth to 'theme/components/auth'

core.module.ts
import { NbAuthModule, NbDummyAuthProvider } from '../@theme/components/auth'; // '@nebular/auth';

app-routing.module.ts

import {
  NbAuthComponent,
  NbLoginComponent,
  NbLogoutComponent,
  NbRegisterComponent,
  NbRequestPasswordComponent,
  NbResetPasswordComponent,
} from './@theme/components/auth'; //'@nebular/auth';

theme.module.ts (instead of app.module.ts)

import { NbAuthModule } from './components/auth/auth.module';
import { NbEmailPassAuthProvider } from './components/auth/providers/email-pass-auth.provider';

NbAuthModule.forRoot({
      providers: {
        email: {
          service: NbEmailPassAuthProvider,
          config: {},
        }
      }
    }).providers,

[nnixaa]

Hi @manojvs, @thovo, there is no need to copy _ALL_ sources to modify components templates. Just copy the components, change the references to the services and providers to be still imported from the Nebular and that's it. Otherwise, you end up not being able to update your code to a newer version of Nebular, as you will need to merge every file one by one.

[nnixaa]

Closing this one as the conversation is out of the initial topic.

[AppHero2]

I was trying to integrate firebase registration with nebular. How can I do this? any example?

[SalahudinMalik]

@wilson-young @nnixaa it work correctly but when I build using ng build --prod it gets components from node modules

[ghost]

An extension of the suggestion from @thovo - copying all source files from https://github.com/akveo/nebular/tree/master/src/framework/auth to 'theme/components/auth'

core.module.ts
import { NbAuthModule, NbDummyAuthProvider } from '../@theme/components/auth'; // '@nebular/auth';

app-routing.module.ts

import {
  NbAuthComponent,
  NbLoginComponent,
  NbLogoutComponent,
  NbRegisterComponent,
  NbRequestPasswordComponent,
  NbResetPasswordComponent,
} from './@theme/components/auth'; //'@nebular/auth';

theme.module.ts (instead of app.module.ts)

import { NbAuthModule } from './components/auth/auth.module';
import { NbEmailPassAuthProvider } from './components/auth/providers/email-pass-auth.provider';

NbAuthModule.forRoot({ providers: { email: { service: NbEmailPassAuthProvider, config: {}, } } }).providers,

that is the right answer but you should do it according to the change list in in this address

[wozaisuzhou]

based on the current version of nebular , you just need to import the library
import {NbThemeModule, NbLayoutModule, NbSidebarModule, NbButtonModule, NbMenuModule, NbSidebarService} from '@nebular/theme';

and then add the "NbSidebarService" to your provider :

providers: [NbSidebarService],

it should be working