运行`ng add @angular/material`后'app-navbar'组件无法渲染

• 核对AppModule的组件声明与导入
  确认AppNavbarComponent已经在app.module.ts的declarations数组里注册。如果navbar是独立模块的一部分，那得保证该模块被导入到AppModule，同时navbar组件在其模块的declarations和exports中都有配置。
  示例代码：

  // app.module.ts
  import { AppNavbarComponent } from './app-navbar/app-navbar.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      AppNavbarComponent // 必须存在这条声明
    ],
    imports: [
      // 确保Material相关模块导入正确，比如MatSelectModule等
      MatSelectModule
    ]
  })
  export class AppModule { }
  

• 排查Material安装后的配置冲突
  ng add @angular/material会自动修改AppModule配置，可能不小心覆盖或删除了原有的navbar组件声明/导入。如果有安装前的代码备份，对比检查一下；没有的话，仔细看AppModule里的代码，有没有误删内容。另外检查Material模块的导入路径和拼写，比如@angular/material/select这类路径不能写错，否则会导致模块解析失败，间接影响其他组件识别。

• 清理Angular缓存并重新构建
  缓存可能导致组件元数据没有更新，执行以下命令清理缓存后重启服务：

  ng cache clean
  ng serve --aot
  

• 确认组件选择器拼写正确
  打开app-navbar.component.ts，检查@Component装饰器里的selector是否确实是app-navbar，有没有拼写错误：

  @Component({
    selector: 'app-navbar', // 确保选择器和模板里用的一致
    templateUrl: './app-navbar.component.html',
    styleUrls: ['./app-navbar.component.css']
  })
  export class AppNavbarComponent { }
  

• 检查懒加载模块配置
  如果navbar组件属于某个懒加载模块，要确保该模块被正确加载；如果navbar是全局使用的组件，建议放到共享模块中，再把共享模块导入到所有需要使用navbar的模块里。

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