使用独立组件引入MatSlideToggle时触发imports静态分析错误

错误原因分析 #

你的代码存在两个关键问题：

1. 模板错误引用组件自身：boton.html中使用了组件自己的选择器<app-boton>，导致组件递归嵌套，同时没有正确渲染MatSlideToggle组件。
2. 组件类名不符合规范：组件类名使用小写boton，可能导致Angular的静态解析器无法正确识别组件，触发imports相关错误。

修复步骤 #

1. 修正组件模板 #

将boton.html中的内容替换为MatSlideToggle的正确标签：

<mat-slide-toggle>Toggle</mat-slide-toggle>

2. 规范组件类名 #

将组件类名改为大驼峰格式（Angular官方推荐规范），同时确保选择器与类名逻辑一致：

import { Component } from '@angular/core';
import { MatSlideToggle } from '@angular/material/slide-toggle';

@Component({
  selector: 'app-boton',
  standalone: true,
  imports: [MatSlideToggle],
  templateUrl: './boton.html',
  styleUrl: './boton.css',
})
export class BotonComponent {} // 改为大驼峰类名

3. 验证依赖版本 #

确认你的Angular与Angular Material版本兼容（当前21.2.9与21.2.6属于同大版本，无兼容性问题）。

完成以上修改后，静态解析错误应该会消失，组件能正确渲染滑动开关。

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