Мой макет страницы входа испортился при использовании компонентов nebular / auth - PullRequest
Новая
       15

Мой макет страницы входа испортился при использовании компонентов nebular / auth

0 голосов
/ 22 мая 2019

Я пытаюсь использовать в своем проекте небулярные компоненты, такие как страница входа, карточки и т. Д., Но по какой-то причине, когда я это делаю, страница входа выглядит немного странно, даже если я не изменил ни один из html или css страница входа.

Это выглядит так

Это должно выглядеть так

Вот мой модуль приложения: 

    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 { }

Вот мой модуль маршрутизации: 

    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 { }

Ошибка:

ОШИБКА в ./src/app/app.component.scss Сборка модуля не удалась (из ./node_modules/sass-loader/lib/loader.js):

не определено ^ Нет миксина с именем nb-install-global в C: \ Users \ Adam \ Downloads \ Compressed \ StarAdmin-Free-Angular-Admin-Template-master \ node_modules @ nebular \ theme \ styles_globals.scss (строка 17, столбец 12)

ОШИБКА в ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss- ! загрузчик / ЦСИ ?? встроенный ./ node_modules / дерзость-погрузчик / Библиотека / loader.js ?? исх - 14-3 ./ ЦСИ / styles.scss) Сборка модуля не удалась (из ./node_modules/sass-loader/lib/loader.js):

не определено ^ Нет миксина с именем nb-install-global в C: \ Users \ Adam \ Downloads \ Compressed \ StarAdmin-Free-Angular-Admin-Template-master \ node_modules @ nebular \ theme \ styles_globals.scss (строка 17, столбец 12)

ОШИБКА в ./src/app/navbar/navbar.component.scss Сборка модуля не удалась (из ./node_modules/sass-loader/lib/loader.js):

не определено ^ Нет миксина с именем nb-install-global в C: \ Users \ Adam \ Downloads \ Compressed \ StarAdmin-Free-Angular-Admin-Template-master \ node_modules @ nebular \ theme \ styles_globals.scss (строка 17, столбец 12)

ОШИБКА в ./src/app/sidebar/sidebar.component.scss Сборка модуля не удалась (из ./node_modules/sass-loader/lib/loader.js):

не определено ^ Нет миксина с именем nb-install-global в C: \ Users \ Adam \ Downloads \ Compressed \ StarAdmin-Free-Angular-Admin-Template-master \ node_modules @ nebular \ theme \ styles_globals.scss (строка 17, столбец 12)

ОШИБКА в ./src/app/footer/footer.component.scss Сборка модуля не удалась (из ./node_modules/sass-loader/lib/loader.js):

не определено ^ Нет миксина с именем nb-install-global в C: \ Users \ Adam \ Downloads \ Compressed \ StarAdmin-Free-Angular-Admin-Template-master \ node_modules @ nebular \ theme \ styles_globals.scss (строка 17, столбец 12)

ОШИБКА в ./src/app/dashboard/dashboard.component.scss Сборка модуля не удалась (из ./node_modules/sass-loader/lib/loader.js):

не определено ^ Нет миксина с именем nb-install-global в C: \ Users \ Adam \ Downloads \ Compressed \ StarAdmin-Free-Angular-Admin-Template-master \ node_modules @ nebular \ theme \ styles_globals.scss (строка 17, столбец 12)

1 Ответ

0 голосов
/ 22 мая 2019

У вас нет импортированных небулярных стилей. Взгляните на эту ссылку, чтобы узнать, как интегрировать тему в ваш проект.

Чтобы просто начать, добавьте в свой файл styles.scss следующее: 

@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();
};
...