Not able to add nebular source to ngx-admin

[sunnychan16]

Issue type

I'm submitting a ... (check one with "x")

• bug report
• feature request

Issue description

Current behavior:

Sorry to bother if this is some stupid question, I am still picking up Angular and Nebular.

I am trying to do some customization to to ngx-admin, but I am not able to compile after I added the source of nebular into the project.

Expected behavior:

It should compile after adding the source.

Steps to reproduce:

Checkout both nebular and ngx-admin. Put nebular's
nebular/src/framework/auth folder into
ngx-admin/src/app/nebular/src/framework/auth

Related code:
Here is the response I got for trying to run the project.

> ngx-admin@3.1.0 start /Users/USER_NAME/FOLDER_NAME/web_research/ngx-admin
> ng serve

** Angular Live Development Server is listening on localhost:4201, open your browser on http://localhost:4201/ **

ERROR in node_modules/@angular/cdk/schematics/ng-update/html-parsing/elements.d.ts(8,10): error TS2305: Module '"/Users/USER_NAME/FOLDER_NAME/web_research/ngx-admin/node_modules/parse5/lib/index"' has no exported member 'DefaultTreeElement'.
node_modules/@angular/cdk/schematics/utils/html-head-element.d.ts(9,10): error TS2305: Module '"/Users/USER_NAME/FOLDER_NAME/web_research/ngx-admin/node_modules/parse5/lib/index"' has no exported member 'DefaultTreeElement'.
node_modules/@angular/cdk/schematics/utils/parse5-element.d.ts(8,10): error TS2305: Module '"/Users/USER_NAME/FOLDER_NAME/web_research/ngx-admin/node_modules/parse5/lib/index"' has no exported member 'DefaultTreeElement'.


Date: 2019-02-20T06:40:36.752Z
Hash: 23b115ff3191ace3990f
Time: 24666ms
chunk {main} main.js, main.js.map (main) 1.89 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 92.1 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 1.3 MB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 3.87 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 327 kB [initial] [rendered]
ℹ ｢wdm｣: Failed to compile.

Other information:

npm, node, OS, Browser

<!--
Node: v10.15.1
npm: 6.8.0
OS: macOS (Mojave)
Browser: Chrome
-->

Angular, Nebular

[package-lock.json.txt](https://github.com/akveo/nebular/files/2883413/package-lock.json.txt)
[package.json.txt](https://github.com/akveo/nebular/files/2883419/package.json.txt)

[nnixaa]

Hi @sunnychan16, could you elaborate on a reason why you need to copy over the library sources, please?

[sunnychan16]

Hi @nnixaa, thank you for the quick response.

I am trying to customize the authorization, since I need to submit a different structure of body to the login api to my server.

I got the idea from a earlier post

[nnixaa]

Have you tried following this doс https://akveo.github.io/nebular/docs/auth/custom-auth-components#custom-auth-components?

[sitoftonic]

Hello @nnixaa
I have followed the whole tutorial on here https://akveo.github.io/nebular/docs/auth/custom-auth-components#custom-auth-components, but it only shows how to customize the Login Component. Then, if I'm trying to customize the attributes that are sent to the API to make the register (for example) I have to customize the methods of the component, or this is what I understand.

I have the same issue as @sunnychan16, exactly the same posted in this issue.

[ghost]

I have followed the example here : https://akveo.github.io/nebular/docs/auth/custom-auth-components#custom-auth-components, but I simply created my own NgxAuthComponent. I registered in it auth-routing.module.ts as instructed in the link posted above but when I run the app, my page is never displayed, it just stays in loading stage. I checked for errors in the browser and there was none.

created NgxAuthComponent to replace NbAuthComponent : (src/pages/auth/auth.module.ts)

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { NgxAuthRoutingModule } from './auth-routing.module';
import { NgxAuthComponent } from './auth.component';

import {
NbAlertModule,
NbButtonModule,
NbCheckboxModule,
NbCardModule,
NbLayoutModule,
NbInputModule
} from '@nebular/theme';

import { NbAuthModule } from '@nebular/auth';

@NgModule({
imports: [
CommonModule,
FormsModule,
RouterModule,
NbAlertModule,
NbInputModule,
NbButtonModule,
NbCardModule,
NbLayoutModule,
NbCheckboxModule,
NgxAuthRoutingModule,
NbAuthModule,
],
declarations: [
NgxAuthComponent
],
})
export class NgxAuthModule {
}

create auth.component (from nebular)

import { NbAuthService } from '@nebular/auth';

import { Component, OnDestroy } from '@angular/core';
import { Location } from '@angular/common';

import { takeWhile } from 'rxjs/operators';

//Just trying to take away the pesky back button
@component({
selector: 'ngx-auth',
styleUrls: ['./auth.component.scss'],
template: alert('test'); <nb-layout> <nb-layout-column> <nb-card> <nb-card-body> <nb-auth-block> <router-outlet></router-outlet> </nb-auth-block> </nb-card-body> </nb-card> </nb-layout-column> </nb-layout>,
})
export class NgxAuthComponent implements OnDestroy {

private alive = true;

subscription: any;

authenticated: boolean = false;
token: string = '';

// showcase of how to use the onAuthenticationChange method
constructor(protected auth: NbAuthService, protected location: Location) {

this.subscription = auth.onAuthenticationChange()
  .pipe(takeWhile(() => this.alive))
  .subscribe((authenticated: boolean) => {
    this.authenticated = authenticated;
  });

}

back() {
this.location.back();
return false;
}

ngOnDestroy(): void {
this.alive = false;
}

}

create auth-routing.module.ts (src/app/pages/auth/auth-routing.module.ts)

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NbLoginComponent, NbAuthComponent } from '@nebular/auth';

export const routes: Routes = [
{
path: 'auth',
component: NbAuthComponent, // <-- Notice this here the new instance
children: [
{
path: 'login',
component: NbLoginComponent,
},
],
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class NgxAuthRoutingModule {
}

registered this into the app routing

const routes: Routes =[
{
path: 'auth',
loadChildren: 'app/pages/auth/auth.module#NgxAuthModule',
},

but nothing is displayed!!!!