Angular 15：无法在浏览器开发者工具中找到自定义库代码

一、配置库构建生成源码映射 #

1. 修改库的TypeScript配置
   编辑test-libs/projects/test-lib/tsconfig.lib.json和tsconfig.lib.prod.json，在compilerOptions中添加/确认以下配置：

"compilerOptions": {
  // 其他原有配置...
  "sourceMap": true,
  "inlineSources": true
}

• sourceMap: 生成对应源码映射文件
• inlineSources: 将源码内容嵌入到映射文件中，避免浏览器因路径问题找不到源文件

2. 配置ng-packagr生成源码映射
   在test-libs/projects/test-lib/ng-package.json中添加sourceMap配置：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/test-lib",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "sourceMap": true
}

二、确保应用正确加载库的源码映射 #

1. 确认应用开发构建配置
   检查test-app/angular.json中build的development配置，确保以下参数已开启：

"development": {
  "buildOptimizer": false,
  "optimization": false,
  "vendorChunk": true,
  "extractLicenses": false,
  "sourceMap": true,
  "namedChunks": true
}

• sourceMap: true: 开启应用自身的源码映射
• vendorChunk: true: 将第三方依赖（含自定义库）打包为独立chunk，便于开发者工具识别

2. 验证符号链接配置
   确认test-app/angular.json的build.options中已设置"preserveSymlinks": true，保证应用能正确解析本地链接的库文件。

三、重新构建并验证 #

1. 停止当前运行的库watch和应用serve进程
2. 重启库的监听构建：cd test-libs && npm run watch
3. 重启应用：cd test-app && npm start
4. 打开浏览器开发者工具，在Sources面板中查找：
   • 库源文件通常在webpack:///node_modules/test-lib路径下
   • 或直接在webpack:///根目录下定位到库的源码文件

额外检查点 #

• 确认浏览器开发者工具设置中，已启用Enable JavaScript source maps和Enable CSS source maps
• 检查test-libs/dist/test-lib目录下是否生成了.js.map和.d.ts.map文件，若未生成则说明库构建未正确生成源码映射

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