Angular v17中Mat Sidenavbar无报错却不显示，求助实现左侧侧边栏

1. 检查Material模块导入 #

Angular 17默认使用独立组件，需在用到Mat Sidenav的组件（侧边栏组件、App组件）中直接导入所需Material模块，而非通过NgModule：

// 组件的.ts文件
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';
import { RouterModule } from '@angular/router';

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

若仍使用NgModule结构，需在AppModule的imports数组中添加MatSidenavModule等相关模块。

2. 确认Sidenav核心结构完整性 #

模板必须包含mat-sidenav-container、mat-sidenav、mat-sidenav-content三个核心元素，缺失会导致页面空白：

<!-- app.component.html -->
<mat-sidenav-container class="sidenav-container">
  <!-- 左侧侧边栏 -->
  <mat-sidenav mode="side" opened>
    <mat-nav-list>
      <a mat-list-item routerLink="/dashboard" routerLinkActive="active">仪表盘</a>
      <a mat-list-item routerLink="/profile" routerLinkActive="active">个人信息</a>
    </mat-nav-list>
  </mat-sidenav>
  <!-- 右侧内容区域（路由出口） -->
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

3. 添加基础样式 #

Mat Sidenav需要容器占满视口才能正常显示，在全局样式或组件样式中添加：

.sidenav-container {
  height: 100vh;
  width: 100%;
}

mat-sidenav {
  width: 240px;
}

4. 配置路由实现内容切换 #

在app.routes.ts中定义路由规则，确保目标组件已正确导入：

import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';

export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'profile', component: ProfileComponent }
];

同时在main.ts中启用路由：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideAnimations() // Material动画必须启用
  ]
});

5. 验证独立组件配置 #

确保AppComponent未被声明在NgModule中，所有依赖的模块（如Router、Material模块）都已在组件的imports数组中导入，避免因依赖缺失导致组件无法渲染。

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