Angular 12 library source maps unavailable

Question

After upgrading to Angular 12, the source maps of a custom Angular library component are not available for debugging anymore.

Here is part of angular.json from the Angular application module, which consumes the library:

"projects": {
  "myapp": {
    "build": {
      "configurations": {
        "development": {
          "optimization": false,
          "sourceMap": true,
          "namedChunks": true,
          "extractLicenses": false,
          "vendorChunk": true,
          "buildOptimizer": false,
          "budgets": []
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "myapp:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "myapp:build:production"
        },
        "development": {
          "browserTarget": "myapp:build:development"
        }
      },
      "defaultConfiguration": "development"
    }
  }
}

Answer 1

Simply setting sourceMap: "true" is not sufficient in this case.

In order to make library sources available, use the following instead and set sourceMap.vendor to true:

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