Can't access Webpack debugging after upgrading to Angular 16

Question

I've become the inheritor of a piece of software developed in angular 10. After fighting with it for far too long to update it to angular 16 along with its packages, I've run into an issue.

When I run ng serve -o and inspect the page in Chrome, the webpack folder under source fails to appear. It does appear in the originally compiled angular 10 version, and from what research I have done, it's a problem with upgrading.

I know I need to modify my angular.json file with some change to the serve configuration, but for the life of me, I cannot figure out what. I can't find any examples that look quite like what I'm working with and none of the changes I've toyed with seem to have had any effect.

This is the first angular project I've worked on that I've not built from scratch and, unfortunately, the original developer is long gone.

Here is my Angular.Json file:

    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "newProjectRoot": "projects",
      "projects": {
        "ng-shears": {
          "root": "",
          "sourceRoot": "src",
          "projectType": "application",
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "aot": true,
                "outputPath": "dist",
                "index": "src/index.html",
                "main": "src/main.ts",
                "tsConfig": "src/tsconfig.app.json",
                "polyfills": "src/polyfills.ts",
                "assets": [
                  "src/assets",
                  "src/favicon.ico"
                ],
                "styles": [
                  "src/styles.css",
                  "node_modules/primeicons/primeicons.css",
                  "node_modules/primeng/resources/themes/nova-alt/theme.css",
                  "node_modules/primeng/resources/primeng.min.css",
                  "src/styles.css"
                ],
                "scripts": [
                  "node_modules/jquery/dist/jquery.min.js",
                  "node_modules/moment/min/moment.min.js"
                ]
              },
              "configurations": {
                "production": {
                  "budgets": [
                    {
                      "type": "anyComponentStyle",
                      "maximumWarning": "6kb"
                    }
                  ],
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "namedChunks": false,
                  "aot": true,
                  "extractLicenses": true,
                  "vendorChunk": false,
                  "buildOptimizer": true,
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.prod.ts"
                    }
                  ]
                },
                "qa": {
                  "budgets": [
                    {
                      "type": "anyComponentStyle",
                      "maximumWarning": "6kb"
                    }
                  ],
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.qa.ts"
                    }
                  ]
                }
              }
            },
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",
              "options": {
                "browserTarget": "ng-shears:build"
              },
              "configurations": {
                "production": {
                  "browserTarget": "ng-shears:build:production"
                },
                "qa": {
                  "browserTarget": "ng-shears:build:qa"
                }
              }
            },
            "extract-i18n": {
              "builder": "@angular-devkit/build-angular:extract-i18n",
              "options": {
                "browserTarget": "ng-shears:build"
              }
            },
            "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "main": "src/test.ts",
                "karmaConfig": "./karma.conf.js",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.spec.json",
                "scripts": [
                  "node_modules/jquery/dist/jquery.min.js",
                  "node_modules/moment/min/moment.min.js"
                ],
                "styles": [
                  "src/styles.css",
                  "node_modules/font-awesome/css/font-awesome.min.css",
                  "node_modules/primeng/resources/themes/fluent-light/theme.css",
                  "node_modules/primeng/resources/primeng.min.css"
                ],
                "assets": [
                  "src/assets",
                  "src/favicon.ico"
                ]
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": [
                  "src/tsconfig.app.json",
                  "src/tsconfig.spec.json"
                ],
                "exclude": [
                  "**/node_modules/**"
                ]
              }
            }
          }
        },
        "ng-shears-e2e": {
          "root": "e2e",
          "sourceRoot": "e2e",
          "projectType": "application",
          "architect": {
            "e2e": {
              "builder": "@angular-devkit/build-angular:protractor",
              "options": {
                "protractorConfig": "./protractor.conf.js",
                "devServerTarget": "ng-shears:serve"
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": [
                  "e2e/tsconfig.e2e.json"
                ],
                "exclude": [
                  "**/node_modules/**"
                ]
              }
            }
          }
        }
      },
      "schematics": {
        "@schematics/angular:component": {
          "prefix": "app",
          "style": "css"
        },
        "@schematics/angular:directive": {
          "prefix": "app"
        }
      },
      "cli": {
        "analytics": false
      }
    }

I've tried a few different rewrites of serve and have also tried looking at new projects and copying things over, but I can't see what I'm missing.

Answer 1

My problem is solved, you need to access the angular.json file:

"projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "configurations": {
            "production": {   // This is the development configuration
              "sourceMap": true,
              // ...
            }
        }
      }
    }
  }

and you run: ng serve --configuration=production or ng serve --configuration=development. And if you run default: ng serve i can configuration:

"projects": {
    "your-project-name": {
      "architect": {
        "serve": {
          "defaultConfiguration": "production"
          }
        }
      }
    }
  }