1

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?

enter image description here

Google Chrome DevTools Source Files:

enter image description here

wonderful world
  • 10,969
  • 20
  • 97
  • 194

2 Answers2

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.

Gaurav Tyagi
  • 106
  • 10
  • An unhandled exception occurred: Invalid target: {"project":myproject-ng","target":"build,development"}. – TheCoderGuy Jul 15 '21 at 18:44
  • Did you check the project name? Did you update it before running? I accidentally left my project name in it. Edited it now. – Gaurav Tyagi Jul 16 '21 at 15:11
  • I have changed and everything when were build I have added development but still got the same error. Do I need to add somewhere else ? – TheCoderGuy Jul 16 '21 at 18:04
  • No this is it. You just have to update the angularjs.json and just run the ng serve and that should work. I am using this "dev": { "aot": false, "optimization": false, "sourceMap": true, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": false } – Gaurav Tyagi Jul 19 '21 at 07:18
  • I will post my angular.json to my question can you update it pls ? – TheCoderGuy Jul 19 '21 at 14:45
  • can you see my question and answer there ? – TheCoderGuy Jul 21 '21 at 21:18
1

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

Rey
  • 51
  • 3
  • I'm not seeing any source files in the browser to debug. I used to see all these files before in DEVELOPMENT mode. – wonderful world Jun 08 '21 at 11:37
  • 1
    You can enable the debugger inside the source code itself. `export class NewComponent implements OnInit,{ constructor() { } ngOnInit(): void { debugger; }` – Rey Jun 08 '21 at 12:05
  • I have updated how the Google Chrome DevTools looks like. I don't see any sources. Should I use ```degugger``` to get the sources? – wonderful world Jun 08 '21 at 14:47