卸载Angular Material后ng serve无法启动如何解决？可与Bootstrap兼容吗？

卸载Angular Material后启动报错解决方案 #

错误根因 #

执行npm uninstall @angular/material仅移除了node_modules中的依赖包，安装Angular Material时自动写入angular.json的全局样式引用配置未被同步删除，Webpack编译时仍会读取对应路径的Material样式文件，因此触发文件不存在的报错。

修复步骤 #

• 打开项目根目录下的angular.json配置文件，依次定位到projects > 你的项目名称 > architect > build > options > styles数组，删除所有包含@angular/material路径的样式条目，常见的如预构建主题路径："./node_modules/@angular/material/prebuilt-themes/xxx.css"
• 再检查同层级architect > test > options > styles数组，同样删除所有Material相关的样式引用
• 删除项目根目录的node_modules文件夹、package-lock.json（使用yarn则删除yarn.lock）
• 执行npm install重新安装所有依赖
• 可选操作：执行npm cache clean --force清理npm全局缓存，避免残留文件影响
• 重新执行ng serve即可正常启动项目

Bootstrap与Angular Material混用说明 #

结论：两者可以同时在项目中使用，但需要主动处理潜在冲突，无规划的混用不推荐
需要注意的冲突点和规避方案：

• 全局样式冲突：两者都自带全局基础样式重置规则，可能出现盒模型、默认字体、全局边距表现不符合预期的问题，可调整angular.json中styles数组的加载顺序，需要优先生效的样式放在数组末尾，后加载的样式会覆盖前面的同名规则
• 组件样式冲突：部分组件类名、交互规则可能重合，比如按钮、表单控件的默认样式会互相覆盖，建议仅选用其中一个作为主组件库，另一个仅按需引入个别组件，同时可通过组件的ViewEncapsulation配置或者自定义类名前缀隔离样式
• 交互逻辑冲突：两者都自带模态框、下拉菜单、提示类组件的层级管理逻辑，容易出现z-index层级错乱问题，可统一修改其中一个库的全局z-index基础配置，避免层级冲突

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