为什么运行`ng serve`时突然出现WebPack相关执行报错

报错原因与解决方案 #

这个报错的核心是webpack-dev-server初始化失败，服务实例未正常生成，导致调用address()方法时读取的目标对象为undefined。结合你使用Angular 13的场景，对应解决方法如下：

• 排查端口占用：默认4200端口被其他程序占用时会触发该问题，可先尝试指定端口启动验证：

  ng serve --open --port 4300
  

• 匹配SSL配置：你package.json的start脚本默认配置了SSL证书参数，但你直接执行ng serve --open时未携带对应配置，若angular.json中默认开启了ssl却没有配置合法证书路径也会导致启动失败。你可以直接运行项目预设的启动命令npm start，或者临时关闭ssl测试：

  ng serve --open --ssl false
  

• 修复依赖兼容问题：你当前使用的@angular-devkit/build-angular@13.0.1存在已知的webpack-dev-server调用兼容bug，将该依赖版本固定为~13.2.6，删除node_modules目录和package-lock.json文件后重新执行npm install即可解决。
• 统一CLI版本：若全局Angular CLI版本和项目本地的13.0.1版本不一致，可执行npx ng serve --open调用项目本地的CLI启动，避免版本不匹配问题。

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