执行ng serve -o报EISDIR错误 重装依赖与Angular CLI仍未解决

该报错的触发本质为 postcss-loader 解析CSS资源时，对一个目标目录执行了文件读取操作，触发操作系统级的EISDIR（非法目录读）异常。这类问题和Angular CLI本身的安装完整性无关，所以单独删除node_modules、重装CLI无法解决。

• 第一步：逐行核查angular.json中的静态资源配置
  打开项目根目录下的angular.json文件，定位到projects.[你的项目名].architect.build.options节点，逐行核对styles、scripts数组内的所有资源路径：

  高频错误场景：误将目录路径作为CSS文件引入，比如本该填写src/styles.css，误写为src/styles（对应本地是一个存放CSS的文件夹而非具体文件）；引入第三方库的CSS时，路径指到了库的目录层级而非实际的.css文件（比如错误写为node_modules/bootstrap/dist/css，正确路径应为node_modules/bootstrap/dist/css/bootstrap.min.css）。

• 第二步：核查组件元数据的CSS引用配置
  打开堆栈中报错的src/app/app.component.ts文件，核对@Component装饰器下的styleUrls配置项，确认每个填写的路径指向真实存在的.css文件，没有误指向同名目录。
• 第三步：解决版本兼容引发的路径解析异常
  当前使用的Angular CLI 11.2.6 搭配Node 15.12.0的组合，存在已知的postcss-loader版本不匹配问题，可按如下步骤修复：
  • 删除项目根目录下的锁文件（npm用户删package-lock.json，yarn用户删yarn.lock）
  • 执行带peer依赖兼容的安装命令重新拉取依赖：npm install --legacy-peer-deps
  • 补装Angular 11生态匹配版本的PostCSS相关依赖：npm i postcss@8.2.15 postcss-loader@4.2.0 --save-dev
• 第四步：排查文件系统层面的异常触发点
  • 检查项目存放路径是否包含中文、空格、特殊字符，避免路径解析器识别偏差
  • 以管理员身份启动终端，再执行ng serve -o，排除权限不足导致的目录结构误读问题

校验小技巧：填完路径后可单独在终端执行dir [你填写的资源路径]，如果返回的是目录文件列表、或者提示路径不存在，说明路径配置有误，需要修正。

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