升级到Angular 12后自定义Angular库组件source maps无法调试

数据老陈

2026-9-29

问题根因

Angular 12 起CLI对自定义库的默认构建规则调整为生产模式，默认关闭source map生成，同时主应用默认的sourceMap配置不再默认解析第三方依赖的映射文件，因此即使主应用开启sourceMap也无法调试自定义库代码。

操作步骤

调整自定义Angular库的构建配置
打开自定义库项目的angular.json，找到对应库项目的build配置，新增或修改development配置项，明确开启sourceMap：

"projects": {
  "your-library-name": {
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:ng-packagr",
        "configurations": {
          "production": {
            // 原有生产配置保留
          },
          "development": {
            "sourceMap": true,
            "optimization": false,
            "buildOptimizer": false
          }
        },
        "defaultConfiguration": "production"
      }
    }
  }
}

构建库时指定使用development配置：
ng build your-library-name --configuration development
确认构建产物目录下，每个js文件都对应生成了同名的.map映射文件。

调整主应用的sourceMap配置
你当前主应用的sourceMap仅设置为布尔值true，需要改为颗粒度配置，开启第三方依赖sourceMap解析：

"development": {
  "optimization": false,
  "sourceMap": {
    "scripts": true,
    "styles": true,
    "vendor": true
  },
  "namedChunks": true,
  "extractLicenses": false,
  "vendorChunk": true,
  "buildOptimizer": false,
  "budgets": []
}