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

Я пытаюсь использовать небулярные компоненты, такие как страница входа, карты и т. д., в своем проекте, но по какой-то причине, когда я это делаю, страница входа кажется немного странной, даже если я не изменил ни один из 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 { }

Ошибка:

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)

вы должны поместить некоторый код примера, чтобы увидеть, что вы делаете.

Cyberguille 22.05.2019 15:29
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
1
906
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Чтобы просто начать, добавьте в файл 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();
};

Спасибо за вашу помощь, но когда я пытался это сделать, я продолжал получать эту ошибку: undefined ^ Нет миксина с именем nb-install-global

stackssssss 22.05.2019 16:36

Я обновил свой ответ. Попробуйте еще раз и убедитесь, что у вас установлены все необходимые пакеты.

ViqMontana 22.05.2019 16:40

вы имеете в виду как @nebular/theme, @nebular/auth, @nebular/security и @nebular/security?

stackssssss 22.05.2019 16:42

Да + @nebular/bootstrap

ViqMontana 22.05.2019 16:45

Да, я установил все это, но я получаю другую ошибку. вставлю в основной пост

stackssssss 22.05.2019 16:48

Другие вопросы по теме