Angular开发模式下TypeScript栈追踪不显示问题排查求助

问题背景 #

我使用Fuse Angular模板搭建项目以快速开发，无需编写大量组件。操作步骤如下：

• 克隆仓库：ts-prototype（main分支持续更新，已保留异常代码；未开发的angularTheme分支也存在该异常）
• 执行 cd client
• 执行 npm install
• 执行 npm run dev（浏览器自动打开）
• 打开开发者工具控制台

当GUI加载完成后，点击登录按钮，我已编写代码抛出并记录异常，但栈追踪仅显示JavaScript信息，而非TypeScript信息。使用同版本（18）的全新Angular项目则可正常显示TypeScript栈追踪。我尝试对比两个项目并移植配置，但过程中栈追踪功能失效。也曾尝试对比基础React新项目并合并配置，但未解决问题。

我的疑问：

1. 如何排查该问题的原因？
2. JavaScript SourceMap与TypeScript SourceMap的工作原理是什么？能否查看中间文件进行检查？

一、排查TypeScript栈追踪失效的步骤 #

1. 检查核心配置文件
   • 打开 tsconfig.json，确认 compilerOptions.sourceMap 设为 true，inlineSourceMap 和 inlineSources 保持默认 false（开发环境无需内联SourceMap）。
   • 查看 angular.json，在 architect.build.configurations.development 节点下，确保 sourceMap 为开启状态，且 hidden、scripts 等子选项未被错误设置为 false。
2. 验证浏览器SourceMap开关
   • 在Chrome开发者工具中，进入「设置 → 偏好设置 → 源代码」，勾选「启用JavaScript源映射」和「启用CSS源映射」，确保浏览器支持SourceMap解析。
3. 确认构建产物的映射关联
   • 启动项目后，在开发者工具的「源代码」面板中，查看编译后的JS文件头部是否存在 //# sourceMappingURL=xxx.js.map 注释。
   • 切换到「网络」面板，搜索 .map 后缀的文件，检查其HTTP状态码是否为200，确认SourceMap文件能正常加载。
4. 对比全新Angular项目的配置与依赖
   • 生成同版本的全新Angular项目，导出其 tsconfig.json、angular.json 和 package.json，与当前项目逐一对比：
     • 重点核对 @angular-devkit/build-angular、typescript 等核心依赖的版本是否一致；
     • 检查构建配置中与SourceMap、代码转译相关的所有选项差异。
5. 测试异常抛出逻辑
   • 编写最简同步抛出异常的测试代码（如 throw new Error('Test TS stack trace')），排除异步回调或第三方库封装导致的SourceMap失效问题。
6. 清理缓存重新构建
   • 删除 node_modules、dist 目录，执行 npm ci 重新安装依赖，再运行 npm run dev 重新构建，避免旧编译产物干扰。

二、SourceMap工作原理与中间文件检查 #

工作原理 #

• TypeScript SourceMap：TypeScript编译器（tsc）将TS源码编译为JS时，会生成.map格式的SourceMap文件，其中存储了TS源码与编译后JS代码的位置映射（行号、列号、文件名）。浏览器加载JS文件时，通过头部的sourceMappingURL找到对应.map文件，将JS栈追踪的位置映射回原始TS源码。
• JavaScript SourceMap：多用于JS代码压缩、Babel转译等场景，作用是将处理后的JS代码映射回原始JS源码。在Angular项目中，核心依赖的是TS编译生成的SourceMap，后续构建优化（如代码压缩）会基于原始SourceMap生成新的映射，确保最终产物仍能关联到TS源码。

中间文件检查方法 #

1. 查看编译产物
   • Angular开发环境的构建产物默认存放在dist目录，可直接查看其中的JS文件及其对应的.map文件。
   • 若需查看TS直接编译为JS的中间产物，可执行tsc命令（确保tsconfig.json中outDir已配置），在指定输出目录中查看未经过Angular优化的JS和.map文件。
2. 解析SourceMap内容
   • 在浏览器开发者工具的「源代码」面板中，若SourceMap映射成功，可直接看到TS源码文件，右键选择「查看源代码」验证映射准确性。
   • 使用source-map-explorer工具可视化解析：安装后执行source-map-explorer dist/**/*.js，查看源码与编译后代码的映射关系。

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