Angular2 - Nebular theme API endpoints - api

Question

I am developing application under Angular2 and I choose Nebular frontend - https://akveo.github.io/nebular/#/home
Documentation is not really detailed for me and I am not expert in Angular2.
I am struggling in part - API endpoints https://akveo.github.io/nebular/#/docs/auth/configuring-a-provider
Where I can save the API basepoint? In which file or part of file?
Affected code:
{
baseEndpoint: 'http://...
...
My code (core.module.js):
import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '#angular/core';
import { CommonModule } from '#angular/common';
import { NbEmailPassAuthProvider, NbAuthModule } from '#nebular/auth';
import { throwIfAlreadyLoaded } from './module-import-guard';
import { DataModule } from './data/data.module';
import { AnalyticsService } from './utils/analytics.service';
import { environment } from './../../environments/environment';
const NB_CORE_PROVIDERS = [
...DataModule.forRoot().providers,
...NbAuthModule.forRoot({
providers: {
email: {
service: NbEmailPassAuthProvider,
config: {
delay: 3000,
login: {
rememberMe: true,
},
},
},
},
forms: {
validation: {
password: {
required: true,
minLength: 6,
maxLength: 255,
},
email: {
required: true,
}
}
}
}).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,
],
};
}
}

Answer 1

I'm trying to put it to work and i'm at the same part of the manual.
As i could understand, the baseEndpoint: 'http://... thing and others configuration goes on the authentication provider config variable. Looks like it's of the type NgEmailPassAuthProviderConfig (defined on #nebular/auth/providers/email-pass-auth.options).
#NgModule({
imports: [
// ...
NbAuthModule.forRoot({
providers: {
email: {
service: NbEmailPassAuthProvider,
config: {
baseEndpoint: 'http://localhost:8080', // <-- here
login: {
rememberMe: true,
},
},
},
},
}),
],
});
I already managed to put it to call a api method on a Spring rest API. I can see the HttpResponse on browser with status: 200 but still getting "Oh snap!
Something went wrong." message on the NbLoginComponent.

Answer 2

In order to create the api correctly follow these steps
1) implement this on your localhost :
2) add this code to core.module.ts
strategies: [
NbPasswordAuthStrategy.setup({
name: 'email',
login: {
requireValidToken: false,
},
baseEndpoint: 'http://localhost:4400/api/auth/',
logout: {
redirect: {
success: '/auth/login',
failure: '/auth/login',
},
},
requestPass: {
redirect: {
success: '/auth/reset-password',
},
},
resetPass: {
redirect: {
success: '/auth/login',
},
},
errors: {
key: 'data.errors',
},
}),
],

Answer 3

I propose to create a proxy proxy.conf.json in the root of the project with content
{
   "/api/*": {
     "target": "http://localhost",
     "secure": false,
     "logLevel": "debug"
   }
}
then start the angular application with the command
$ ng serve --port 8097 --proxy-config proxy.conf.json
remember the * 8097 * port you mentioned in the ng serve command
to finish adding your base url as follows:
{
baseEndpoint: '/api/',
...
for more information about proxy config refer you to https://morioh.com/p/07bddb33e3ab
I hope this help