如何在Nebular中正确实现侧边栏？添加后页面空白无报错

按照Nebular官方文档编写代码添加侧边栏后，页面显示空白且无任何错误提示，移除<nb-sidebar>组件后页面恢复正常。

home.component.html 代码 #

<nb-layout windowMode>
    <nb-layout-header fixed>
        <nb-form-field>
            <nb-icon nbPrefix icon="search-outline"></nb-icon>
            <input type="text" nbInput fullWidth shape="round" placeholder="Search">
        </nb-form-field>
        <button nbButton outline shape="round" size="medium" status="primary"><nb-icon icon="plus-outline"></nb-icon>Upload</button>
        <nb-actions>
            <nb-action title="Messages" icon="message-circle-outline" badgeDot badgePosition="top right" badgeStatus="danger"></nb-action>
            <nb-action title="Notifications" icon="bell-outline" badgeDot badgePosition="top right" badgeStatus="danger"></nb-action>
        </nb-actions>
        <nb-user size="medium" name="Tzuyu Chou" picture="https://i.pinimg.com/originals/98/98/c6/9898c6313b8270b8dcc4269c47c3ef9a.jpg"></nb-user>
    </nb-layout-header>
    <nb-sidebar></nb-sidebar>
    <nb-layout-column>Content</nb-layout-column>
</nb-layout>

home.module.ts 代码 #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { NbActionsModule, NbButtonModule, NbContextMenuModule, NbFormFieldModule, NbIconModule, NbInputModule, NbLayoutModule, NbMenuModule, NbSearchModule, NbSidebarModule, NbTabsetModule, NbUserModule } from '@nebular/theme';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    CommonModule,
    RouterModule,
    NbLayoutModule,
    NbActionsModule,
    NbIconModule,
    NbContextMenuModule,
    NbTabsetModule,
    NbButtonModule,
    NbSearchModule,
    NbUserModule,
    NbFormFieldModule,
    NbInputModule,
    NbSidebarModule,
    NbMenuModule,
  ]
})
export class HomeModule { }

排查方向及解决建议 #

• 确认Sidebar模块导入正确性：如果是根模块，需使用NbSidebarModule.forRoot()导入；特性模块直接导入NbSidebarModule即可，检查当前模块的导入方式是否符合版本要求。
• 给侧边栏添加基础内容或属性：空的<nb-sidebar>可能触发布局异常，尝试添加tag属性和默认内容：

  <nb-sidebar tag="main-sidebar">
    <div>侧边栏测试内容</div>
  </nb-sidebar>
  

• 检查布局组件语法：部分Nebular版本中，侧边栏需使用<nb-layout-sidebar>而非<nb-sidebar>，对照官方文档确认当前版本的正确组件名称。
• 排查样式冲突：打开浏览器开发者工具的元素面板，查看<nb-sidebar>元素是否存在，是否被设置了visibility: hidden、display: none或超出视口的定位样式。
• 版本兼容性检查：确认当前使用的Nebular版本与官方文档版本一致，不同版本的布局组件结构可能有差异。

内容的提问来源于stack exchange，提问作者Juanito Baldo