CODEWITHSUNDEEP
apitemplatesangular2-templatenebular
Maximi
Maximi

Reputation: 569

Angular2 - Nebular theme API endpoints

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,
      ],
    };
  }
}

Upvotes: 2

Views: 1573

Answers (3)

kevin kemta
kevin kemta

Reputation: 90

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

Upvotes: 0

Francis Pinto
Francis Pinto

Reputation: 151

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',
        },
      }),
    ],

Upvotes: 1

vborges
vborges

Reputation: 95

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.

Upvotes: 1

Related Questions