如何调试通过npm link本地关联的Angular库？

以下是针对你遇到的Unbound Breakpoint和调试跳转异常的解决步骤：

1. 调整库的构建配置，确保完整源映射生成 #

• 打开库项目的angular.json，找到对应库的architect.build.configurations.development节点，确保sourceMap配置完整：

  "sourceMap": {
    "scripts": true,
    "styles": true,
    "vendor": true
  }
  

• 检查库的tsconfig.lib.json，确保开启sourceMap和declarationMap：

  "compilerOptions": {
    "sourceMap": true,
    "declarationMap": true,
    // 其他配置...
  }
  

• 重新执行库的构建命令：ng build --watch --configuration development

2. 开启应用的软链接保留配置 #

在应用项目的angular.json中，找到projects.[你的应用名].architect.build.options，添加preserveSymlinks: true：

"options": {
  // 现有配置...
  "preserveSymlinks": true
}

该配置会让Angular保留npm link的软链接路径，避免解析到实际文件路径导致源映射关联失败。

3. 改用Angular框架实例化组件（避免手动new） #

你当前手动new MfeSelComponent()的方式不符合Angular组件实例化逻辑，框架无法正确关联调试信息。正确做法是：

• 在应用的AppModule中导入库的模块（比如MfeSelModule）
• 在AppComponent的模板中使用组件选择器：

  <lib-mfe-sel></lib-mfe-sel>
  

组件由Angular框架实例化后，调试断点才能正确绑定到组件源文件。

4. 配置VS Code调试的源映射解析 #

打开应用项目的.vscode/launch.json，确保sourceMaps开启，并添加库的路径到resolveSourceMapLocations：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "node_modules/[你的库名]/**"
      ]
    }
  ]
}

该配置让VS Code能正确解析npm链接库的源映射，关联到本地源文件。

5. 清理缓存并重启 #

• 删除库的dist文件夹，重新构建
• 清除应用的node_modules/.cache文件夹
• 重启应用的ng serve和VS Code，确保所有旧缓存被清除

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