为何Angular的JavaScript控制台错误消息格式异常混乱？

触发该问题的常见原因 #

• 开发环境sourcemap配置关闭：若你修改过angular.json中sourceMap属性为false，编译后的代码会失去源码映射，错误栈无法关联到原始开发代码，就会出现无法阅读的混淆内容
• 错误使用生产模式启动本地服务：如果执行启动命令时带了生产配置参数（如ng serve --prod、ng serve -c production），生产构建默认会压缩代码、裁剪完整错误提示，仅输出混淆后的简化错误信息
• 浏览器控制台配置或插件干扰：浏览器控制台开启了相似消息分组、错误信息折叠规则，或者安装了日志拦截类浏览器插件，会打乱Angular输出的结构化错误内容
• 全局错误逻辑被篡改：项目内自定义了Angular全局ErrorHandler，或是接入的埋点、监控类第三方SDK改写了错误输出逻辑，会覆盖原生的Angular标准错误提示

修复步骤 #

• 检查angular.json中architect.serve.options配置项，确保sourceMap设为true，使用不带生产参数的ng serve命令启动开发服务
• 重置浏览器控制台为默认配置，临时禁用所有浏览器插件后重试复现问题
• 临时注释项目内的自定义全局错误拦截逻辑，排查是否为第三方依赖篡改了错误输出

调整后重新复现场景，即可看到预期的Can't bind to 'ngModel' since it isn't a known property of 'input'标准错误提示。

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