创建Angular项目后执行ng serve出现模块未找到错误求助

针对重置系统后新建Angular项目运行ng serve出现的模块解析错误、CSS加载失败问题，可按以下步骤排查解决：

• 清理依赖与缓存

  1. 删除项目根目录下的node_modules文件夹和package-lock.json文件
  2. 执行npm cache clean --force清除npm全局缓存
  3. 重新安装项目依赖：npm install

• 对齐Angular CLI版本

  1. 查看全局CLI版本：ng version
  2. 查看项目本地CLI版本（package.json中@angular/cli字段）
  3. 若版本不一致，全局安装对应版本：npm install -g @angular/cli@<项目本地版本号>，或更新本地依赖：npm install @angular/cli@<全局版本号> --save-dev

• 规避路径与权限问题

  1. 确保项目路径无中文、空格或特殊字符
  2. 使用WSL时，在Ubuntu原生文件系统（如/home/你的用户名/目录下）创建并运行项目，避免访问Windows挂载的/mnt/c等路径，防止跨文件系统的路径解析和权限冲突

• 验证CSS文件状态

  1. 检查src/app/app.component.css是否存在且内容正常，无损坏或为空
  2. 临时注释app.component.ts中的styleUrls配置，重新运行ng serve，若编译正常则说明CSS文件或加载配置存在问题，可重新创建CSS文件恢复配置

• 更新Webpack相关依赖
  执行npm update webpack-dev-server --save-dev，将webpack-dev-server更新至与当前Angular版本兼容的版本

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