angular-cli: ng serve does not generate webpack bundle for debugging in the browser.

Recently update my application to angular v12 and webpack folder is not generated in the browser

I have the same application running angular v11.0.0 and the webpack bundle can be seen.

It’s this because of webpack 5 or a configuration issue? I use *.ts files generated by the webpack bundle for debugging purposes.

Any insights will be appreciated.

Note:# Same application different angular versions running in parallel

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 18 (4 by maintainers)

Most upvoted comments

Hi @richie50,

it appears that the project configuration was not migrated properly. Was ng-update invoked multiple times?

Kindly try using the below config

{
  ...
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/questionnaire-app",
      "index": "projects/questionnaire-app/src/index.html",
      "main": "projects/questionnaire-app/src/main.ts",
      "polyfills": "projects/questionnaire-app/src/polyfills.ts",
      "tsConfig": "projects/questionnaire-app/tsconfig.app.json",
      "optimization": false,
      "sourceMap": true,
      "namedChunks": true,
      "extractLicenses": false,
      "vendorChunk": false,
      "buildOptimizer": false,
      "assets": [
        "projects/questionnaire-app/src/favicon.ico",
        "projects/questionnaire-app/src/assets"
      ],
      "styles": [
        "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
        "projects/questionnaire-app/src/styles.scss"
      ],
      "scripts": []
    },
    "configurations": {
      "production": {
        "fileReplacements": [
          {
            "replace": "projects/questionnaire-app/src/environments/environment.ts",
            "with": "projects/questionnaire-app/src/environments/environment.prod.ts"
          }
        ],
        "outputHashing": "all",
        "optimization": true,
        "sourceMap": false,
        "namedChunks": false,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true,
        "budgets": [
          {
            "type": "initial",
            "maximumWarning": "5mb",
            "maximumError": "10mb"
          },
          {
            "type": "anyComponentStyle",
            "maximumWarning": "70kb",
            "maximumError": "100kb"
          }
        ]
      }
    }
  }
}

alan-agius4 on May 18, 2021

Yeah it is expected see the changelog: https://github.com/angular/angular-cli/releases/tag/v12.0.0

alan-agius4 on May 20, 2021

"questionnaire-app": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "root": "projects/questionnaire-app",
            "sourceRoot": "projects/questionnaire-app/src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/questionnaire-app",
                        "index": "projects/questionnaire-app/src/index.html",
                        "main": "projects/questionnaire-app/src/main.ts",
                        "polyfills": "projects/questionnaire-app/src/polyfills.ts",
                        "tsConfig": "projects/questionnaire-app/tsconfig.app.json",
                        "aot": true,
                     
                        "assets": [
                            "projects/questionnaire-app/src/favicon.ico",
                            "projects/questionnaire-app/src/assets"
                        ],
                        "styles": [
                            "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
                            "projects/questionnaire-app/src/styles.scss"
                        ],
                        "scripts": []
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "projects/questionnaire-app/src/environments/environment.ts",
                                    "with": "projects/questionnaire-app/src/environments/environment.prod.ts"
                                }
                            ],
                            "optimization": false,
                            "outputHashing": "all",
                            "sourceMap": true,
                            "namedChunks": true,
                            "extractLicenses": false,
                            "vendorChunk": false,
                            "buildOptimizer": false,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "5mb",
                                    "maximumError": "10mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "70kb",
                                    "maximumError": "100kb"
                                }
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "questionnaire-app:build",
                        "proxyConfig": "proxy.conf.json"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "questionnaire-app:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "questionnaire-app:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "projects/questionnaire-app/src/test.ts",
                        "polyfills": "projects/questionnaire-app/src/polyfills.ts",
                        "tsConfig": "projects/questionnaire-app/tsconfig.spec.json",
                        "karmaConfig": "projects/questionnaire-app/karma.conf.js",
                        "assets": [
                            "projects/questionnaire-app/src/favicon.ico",
                            "projects/questionnaire-app/src/assets"
                        ],
                        "styles": ["projects/questionnaire-app/src/styles.scss"],
                        "scripts": []
                    }
                },
                "lint": {
                    "builder": "@angular-eslint/builder:lint",
                    "options": {
                        "lintFilePatterns": [
                            "projects/questionnaire-app/**/*.ts",
                            "projects/questionnaire-app/**/*.html"
                        ]
                    }
                },
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "projects/questionnaire-app/e2e/protractor.conf.js",
                        "devServerTarget": "questionnaire-app:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "questionnaire-app:serve:production"
                        }
                    }
                }
            }
        }```
@alan-agius4

richie50 on May 18, 2021