'Generating browser application bundles' message while building dev version

Question

I'm using Angular 12.0.2, and seeing the message Generating browser application bundles. I'm not building the prod version, but running the dev version. Is this the normal behavior for a Angular Development Build?

Google Chrome DevTools Source Files:

Answer 1

Yes, that's pretty normal. It even tells you not to use this build for PRODUCTION releases.

Answer 2

I have tried to resolve this issue for myself but I had no luck, but I was able to find a work around for this issue which will allow you to see the source in the dev tool. All you have to do is to create a dev configuration in the angular.json file and then in serve:browsertarget give the name of your config.

Just like this block :- You will find your angular.json with the below code

      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "<your project>:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "<your project>:build:production"
        }
      }
    }

All you have to do is to update this block of code with your own dev config. Like this:

      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
      "development": {
          "optimization": false,
          "buildOptimizer": false,
          "sourceMap": true
        }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "<your project>:build:development"
      },
      "configurations": {
        "production": {
          "browserTarget": "<your project>:build:production"
        }
      }
    }

So here you are creating your own development configuration where you can cancelling the optimization and buildOptimizer. After that you can just do ng serve and it will show all the source code in the dev tools. Also it won't affect your production build.

I am still trying to figure out why angular is optimizing the code even for dev environment. I will update the answer after that. But for now the above code is answers your question.