Angular项目构建报错求助：模块未找到及CSS加载异常

问题1：无法解析'app.component.css?ngResource'模块 #

• 同步Angular CLI版本：先全局卸载旧版本npm uninstall -g @angular/cli，再安装最新稳定版npm install -g @angular/cli@latest，项目内同步更新npm install @angular/cli@latest --save-dev
• 清理依赖环境：删除项目根目录的node_modules文件夹、package-lock.json（或yarn.lock）文件，执行npm install重新安装依赖
• 校验资源配置：打开angular.json，检查styles数组配置，确保路径正确且无?ngResource这类多余后缀，例如正确配置应为"styles": ["src/styles.css"]

问题2：无法解析webpack-dev-server相关模块 #

• 匹配依赖版本：执行npm ls webpack-dev-server查看当前版本，确认其与Angular CLI内置webpack版本兼容（如Angular 16对应webpack-dev-server 4.x），版本不兼容时手动安装对应版本npm install webpack-dev-server@<兼容版本号> --save-dev
• 清理缓存后重装：同问题1的依赖清理步骤，避免缓存导致的依赖异常
• 检查自定义webpack配置：若项目存在webpack.config.js，确认文件中webpack-dev-server的引入路径、配置项无错误

问题3：CSS加载器未返回字符串 #

• 移除手动安装的加载器：若手动安装过css-loader或style-loader，执行npm uninstall css-loader style-loader，让Angular CLI使用内置的兼容版本加载器
• 校验组件样式配置：检查所有@Component装饰器中的styleUrls路径，确保指向存在的CSS文件且无拼写错误
• 检查CSS文件语法：确认所有CSS文件无语法错误（如未闭合的大括号、无效属性值），避免加载器解析失败

ng build时CSS语法警告及重复报错 #

• 修复CSS语法问题：使用CSS校验工具（如stylelint）扫描所有CSS文件，修复未闭合规则、无效属性、重复选择器等问题
• 调整构建配置：打开angular.json，若开启了strict模式，可根据需要调整build.options中的警告规则，优先修复语法而非关闭警告
• 清理构建缓存：执行ng build --clean，或手动删除dist文件夹后重新构建

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