Ionic项目运行报错：Schema验证失败与npm连接等待问题

问题描述 #

1. 执行ng serve --port=8100时触发Schema验证错误：

E:\IonicProj\Moodle IOS\Moodle>ng serve --port=8100
Error: Schema validation failed with the following errors:
Data path "" must NOT have additional properties(stylePreprocessorOptions).
E:\IonicProj\Moodle IOS\Moodle\node_modules@angular\cli\node_modules\rxjs\internal\util\hostReportError.js:4
setTimeout(function () { throw err; }, 0);
^

SchemaValidationException [Error]: Schema validation failed with the following errors:
Data path "" must NOT have additional properties(stylePreprocessorOptions).
...（完整堆栈信息省略）

2. 执行ionic serve时，控制台持续输出[INFO] Waiting for connectivity with npm...，无法正常启动项目。

环境信息 #

• Ionic：
  CLI 7.1.1，Framework @ionic/angular 6.7.5，@angular-devkit/build-angular 15.2.8，@ionic/angular-toolkit 6.0.0
• Capacitor：CLI 5.2.3，Android 5.2.3
• Angular：CLI 15.2.8，Core 15.2.8，@angular-devkit/architect 0.1101.2
• 系统：Node v16.14.2，npm 9.5.0，Windows 10

已尝试更新Ionic、npm、Node版本，以及多种启动命令，问题仍未解决。

解决方案 #

1. 修复Schema验证错误

核心原因是@angular-devkit/architect版本（0.1101.2）与其他@angular-devkit包（15.2.8）版本不兼容，导致配置Schema校验失败。

• 统一@angular-devkit包版本：

npm install @angular-devkit/architect@15.2.8 --save-dev

• 清除Angular缓存：

ng cache clean --all

• 重新安装依赖：

rm -rf node_modules package-lock.json
npm install

2. 修复ionic serve卡在npm连接的问题

• 切换npm镜像（针对国内网络环境）：

npm config set registry https://registry.npmmirror.com/

• 降级Ionic CLI适配现有框架版本：Ionic CLI 7.x与@ionic/angular 6.x存在兼容性差异，降级到适配版本：

npm install -g @ionic/cli@6.20.0

• 重新启动项目：

ionic serve --port=8100

3. 额外检查

• 确认angular.json中无多余的stylePreprocessorOptions配置（你提供的配置中不存在该字段，无需修改）；
• Node 16.14.2符合Angular 15.x的版本要求，无需更换。

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