I'm trying to using nebular components like login page, cards etc. in my project but for some reason when I do so the login page seems a bit weird even thought I have not modified any of the html or css of the login page.
It's supposed to look like this
Here's my app module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { FooterComponent } from './footer/footer.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FormsComponent } from './forms/forms.component';
import { ButtonsComponent } from './buttons/buttons.component';
import { TablesComponent } from './tables/tables.component';
import { TypographyComponent } from './typography/typography.component';
import { IconsComponent } from './icons/icons.component';
import { AlertsComponent } from './alerts/alerts.component';
import { AccordionsComponent } from './accordions/accordions.component';
import { BadgesComponent } from './badges/badges.component';
import { ProgressbarComponent } from './progressbar/progressbar.component';
import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
import { PaginationComponent } from './pagination/pagination.component';
import { DropdownComponent } from './dropdown/dropdown.component';
import { TooltipsComponent } from './tooltips/tooltips.component';
import { CarouselComponent } from './carousel/carousel.component';
import { TabsComponent } from './tabs/tabs.component';
import { NbAuthModule, NbPasswordAuthStrategy, NbAuthJWTToken } from '@nebular/auth';
import { NbThemeModule } from '@nebular/theme';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
SidebarComponent,
FooterComponent,
DashboardComponent,
FormsComponent,
ButtonsComponent,
TablesComponent,
TypographyComponent,
IconsComponent,
AlertsComponent,
AccordionsComponent,
BadgesComponent,
ProgressbarComponent,
BreadcrumbsComponent,
PaginationComponent,
DropdownComponent,
TooltipsComponent,
CarouselComponent,
TabsComponent
],
imports: [
BrowserModule,
HttpClientModule,
RouterModule,
AppRoutingModule,
FormsModule,
NgbModule,
NbThemeModule.forRoot(),
NbAuthModule.forRoot({
strategies: [
NbPasswordAuthStrategy.setup({
name: 'email',
baseEndpoint: 'http://localhost:8082',
token: {
class: NbAuthJWTToken,
key: 'token',
},
login: {
endpoint: '/auth/signin',
method: 'post',
},
register: {
endpoint: '/registration',
method: 'post',
},
logout: {
endpoint: '/auth/sign-out',
method: 'post',
},
requestPass: {
endpoint: '/auth/request-pass',
method: 'post',
},
resetPass: {
endpoint: '/auth/reset-pass',
method: 'post',
},
}),
],
forms: {
login: {
redirectDelay: 0,
showMessages: {
success: true,
},
},
register: {
redirectDelay: 0,
showMessages: {
success: true,
},
},
requestPassword: {
redirectDelay: 0,
showMessages: {
success: true,
},
},
resetPassword: {
redirectDelay: 0,
showMessages: {
success: true,
},
},
logout: {
redirectDelay: 0,
},
},
}),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here's my routing module:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FormsComponent } from './forms/forms.component';
import { ButtonsComponent } from './buttons/buttons.component';
import { TablesComponent } from './tables/tables.component';
import { IconsComponent } from './icons/icons.component';
import { TypographyComponent } from './typography/typography.component';
import { AlertsComponent } from './alerts/alerts.component';
import { AccordionsComponent } from './accordions/accordions.component';
import { BadgesComponent } from './badges/badges.component';
import { ProgressbarComponent } from './progressbar/progressbar.component';
import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
import { PaginationComponent } from './pagination/pagination.component';
import { DropdownComponent } from './dropdown/dropdown.component';
import { TooltipsComponent } from './tooltips/tooltips.component';
import { CarouselComponent } from './carousel/carousel.component';
import { TabsComponent } from './tabs/tabs.component';
import { NbAuthComponent, NbRegisterComponent, NbLogoutComponent, NbRequestPasswordComponent, NbResetPasswordComponent, NbLoginComponent } from '@nebular/auth';
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'forms', component: FormsComponent },
{ path: 'buttons', component: ButtonsComponent },
{ path: 'tables', component: TablesComponent },
{ path: 'icons', component: IconsComponent },
{ path: 'typography', component: TypographyComponent },
{ path: 'alerts', component: AlertsComponent },
{ path: 'accordions', component: AccordionsComponent },
{ path: 'badges', component: BadgesComponent },
{ path: 'progressbar', component: ProgressbarComponent },
{ path: 'breadcrumbs', component: BreadcrumbsComponent },
{ path: 'pagination', component: PaginationComponent },
{ path: 'dropdowns', component: DropdownComponent },
{ path: 'tooltips', component: TooltipsComponent },
{ path: 'carousel', component: CarouselComponent },
{ path: 'tabs', component: TabsComponent },
{
path: 'auth',
component: NbAuthComponent,
children: [
{
path: '',
component: NbLoginComponent,
},
{
path: 'login',
component: NbLoginComponent,
},
{
path: 'register',
component: NbRegisterComponent,
},
{
path: 'logout',
component: NbLogoutComponent,
},
{
path: 'request-password',
component: NbRequestPasswordComponent,
},
{
path: 'reset-password',
component: NbResetPasswordComponent,
},
],
},
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
The error:
ERROR in ./src/app/app.component.scss Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined ^ No mixin named nb-install-global in C:\Users\Adam\Downloads\Compressed\StarAdmin-Free-Angular-Admin-Template-master\node_modules@nebular\theme\styles_globals.scss (line 17, column 12)
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined ^ No mixin named nb-install-global in C:\Users\Adam\Downloads\Compressed\StarAdmin-Free-Angular-Admin-Template-master\node_modules@nebular\theme\styles_globals.scss (line 17, column 12)
ERROR in ./src/app/navbar/navbar.component.scss Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined ^ No mixin named nb-install-global in C:\Users\Adam\Downloads\Compressed\StarAdmin-Free-Angular-Admin-Template-master\node_modules@nebular\theme\styles_globals.scss (line 17, column 12)
ERROR in ./src/app/sidebar/sidebar.component.scss Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined ^ No mixin named nb-install-global in C:\Users\Adam\Downloads\Compressed\StarAdmin-Free-Angular-Admin-Template-master\node_modules@nebular\theme\styles_globals.scss (line 17, column 12)
ERROR in ./src/app/footer/footer.component.scss Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined ^ No mixin named nb-install-global in C:\Users\Adam\Downloads\Compressed\StarAdmin-Free-Angular-Admin-Template-master\node_modules@nebular\theme\styles_globals.scss (line 17, column 12)
ERROR in ./src/app/dashboard/dashboard.component.scss Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined ^ No mixin named nb-install-global in C:\Users\Adam\Downloads\Compressed\StarAdmin-Free-Angular-Admin-Template-master\node_modules@nebular\theme\styles_globals.scss (line 17, column 12)
You don't have the nebular styles imported. Take a look at this link to see how to integrate the theme into your project.
To simply get started, add the following to your styles.scss file:
@import '~@nebular/theme/styles/globals';
@import '~@nebular/bootstrap/styles/globals';
// install the framework and custom global styles
@include nb-install() {
// framework global styles
@include nb-theme-global();
@include nb-bootstrap-global();
};