Nebular component do not show in angular app, console show error: Cannot read property 'defaultView' of undefined

Question

I am working on an application with angular and nebular frameworks.

I am trying to use the nebular component on my app.component .html file but when the page load it does in blank and the console it show me the follow error:

ERROR TypeError: Cannot read property 'defaultView' of undefined at NbViewportRulerAdapter._getWindow (scrolling.js:665) at scrolling.js:580 at ZoneDelegate.invoke (zone-evergreen.js:364) at Zone.run (zone-evergreen.js:123) at NgZone.runOutsideAngular (core.js:27364) at new ViewportRuler (scrolling.js:578) at new NbViewportRulerAdapter (index.js:2406) at Object.NbViewportRulerAdapter_Factory [as factory] (index.js:2433) at R3Injector.hydrate (core.js:11249) at R3Injector.get (core.js:11071).

I have add it other components from nebular and it load with no problem but when i try to use this, do not display anythig in the page. I made the imports and instalation following th nebular documentation I simply don't get what could be wrong.

this is my app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { NbCardModule, NbLayoutModule, NbMenuModule, NbSidebarModule, NbThemeModule, NbInputModule, NbSearchModule,
  NbIconModule,
  NbActionsModule,
  NbListModule,
  NbSelectModule,
  NbAccordionModule,
  NbCheckboxModule,
  NbDatepickerModule,
  } from '@nebular/theme';
import { NbSidebarToggleComponent } from './nb-sidebar-toggle/nb-sidebar-toggle.component';
import { MenuLeftComponent } from './menu-left/menu-left.component';
import { SearchPageComponent } from './search-page/search-page.component';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { ProjectDetailsComponent } from './project-details/project-details.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ProjectConfigurationComponent } from './project-configuration/project-configuration.component';
import { ProjectAutomationComponent } from './project-automation/project-automation.component';

@NgModule({
  declarations: [
    AppComponent,
    NbSidebarToggleComponent,
    MenuLeftComponent,
    SearchPageComponent,
    ProjectDetailsComponent,
    ProjectConfigurationComponent,
    ProjectAutomationComponent
  ],
  imports: [
    RouterModule.forRoot([
       {path: '', component: AppComponent},
      {path: 'search', component: SearchPageComponent },
      {path: 'details', component: ProjectDetailsComponent },
      // {path: 'config', component: ProjectConfigurationComponent },
      // {path: 'automation', component: ProjectAutomationComponent }
    ]),
    NbSelectModule,
    BrowserModule,
    // RouterModule.forRoot([]),
    NbThemeModule.forRoot({name: 'default'}),
    NbSidebarModule.forRoot(),
    NbLayoutModule,
    NbCardModule,
    NbMenuModule.forRoot(),
    NbInputModule,
    NbSearchModule,
    NbEvaIconsModule,
    NbIconModule,
    BrowserAnimationsModule,
    NgbModule,
    NbActionsModule,
    NbListModule,
    NbAccordionModule,
    NbCheckboxModule,
    NbDatepickerModule.forRoot()

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

app.component.ts

    import { Component, NgModule } from '@angular/core';
import { NbSidebarService} from '@nebular/theme';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'dashboard-app';
  constructor(private sidebarService: NbSidebarService){

  }

  toggleCompact() {

    this.sidebarService.toggle(true, 'left');
  }
}