debugger not working on browser dev tools after updating angular 8 to 15 dev tools

Question

I've updated angular from version 8 to 15 and debugger is not working on any browser dev tools Can anyone suggest what am I missing is somthing wrong with source-map?

Here is package.json

 "dependencies": {
    "@angular/animations": "^15.1.0",
    "@angular/cdk": "~15.1.0",
    "@angular/common": "^15.1.0",
    "@angular/compiler": "^15.1.0",
    "@angular/core": "^15.1.0",
    "@angular/forms": "^15.1.0",
    "@angular/material": "^15.1.0",
    "@angular/platform-browser": "^15.1.0",
    "@angular/platform-browser-dynamic": "^15.1.0",
    "@angular/router": "^15.1.0",
    "@angular/service-worker": "~8.0.0",
    "@ngrx/store": "^7.4.0",
    "akbari-date-picker": "^3.0.5",
    "angular-toastify": "^1.0.3",
    "angular-toastr": "^2.1.1",
    "bootstrap": "^5.1.3",
    "file-saver": "^2.0.5",
    "hammerjs": "^2.0.8",
    "highcharts": "^9.3.1",
    "mb-suites": "file:local_node_modules/mb-suites",
    "ngx-bootstrap": "^5.5.0",
    "ngx-draggable-dom": "^2.1.2",
    "ngx-infinite-scroll": "^10.0.1",
    "ngx-mask": "^11.1.5",
    "ngx-skeleton-loader": "^2.9.1",
    "ngx-virtual-scroller": "^4.0.3",
    "persian-tools2": "^1.5.0",
    "persianjs": "^0.4.0",
    "postcss-loader": "^3.0.0",
    "react-toastify": "^7.0.3",
    "rxjs": "~6.4.0",
    "sass-convert": "^0.5.2",
    "simple-keyboard": "^2.20.5",
    "tslib": "^2.3.0",
    "xlsx": "^0.17.4",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.1.4",
    "@angular/cli": "~15.1.4",
    "@angular/compiler-cli": "^15.1.0",
    "@angular/language-service": "~8.0.0",
    "@types/jasmine": "~4.3.0",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "protractor": "~5.4.0",
    "tslint": "~5.15.0",
    "typescript": "^4.8.2"
  }

Here is package-lock.json

"dependencies": {
        "@angular/animations": "^15.1.0",
        "@angular/cdk": "~15.1.0",
        "@angular/common": "^15.1.0",
        "@angular/compiler": "^15.1.0",
        "@angular/core": "^15.1.0",
        "@angular/forms": "^15.1.0",
        "@angular/material": "^15.1.0",
        "@angular/platform-browser": "^15.1.0",
        "@angular/platform-browser-dynamic": "^15.1.0",
        "@angular/router": "^15.1.0",
        "@angular/service-worker": "~8.0.0",
        "@ngrx/store": "^7.4.0",
        "akbari-date-picker": "^3.0.5",
        "angular-toastify": "^1.0.3",
        "angular-toastr": "^2.1.1",
        "bootstrap": "^5.1.3",
        "file-saver": "^2.0.5",
        "hammerjs": "^2.0.8",
        "highcharts": "^9.3.1",
        "mb-suites": "file:local_node_modules/mb-suites",
        "ngx-bootstrap": "^5.5.0",
        "ngx-draggable-dom": "^2.1.2",
        "ngx-infinite-scroll": "^10.0.1",
        "ngx-mask": "^11.1.5",
        "ngx-skeleton-loader": "^2.9.1",
        "ngx-virtual-scroller": "^4.0.3",
        "persian-tools2": "^1.5.0",
        "persianjs": "^0.4.0",
        "postcss-loader": "^3.0.0",
        "react-toastify": "^7.0.3",
        "rxjs": "~6.4.0",
        "sass-convert": "^0.5.2",
        "simple-keyboard": "^2.20.5",
        "tslib": "^2.3.0",
        "xlsx": "^0.17.4",
        "zone.js": "~0.12.0"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "^15.1.4",
        "@angular/cli": "~15.1.4",
        "@angular/compiler-cli": "^15.1.0",
        "@angular/language-service": "~8.0.0",
        "@types/jasmine": "~4.3.0",
        "@types/node": "~8.9.4",
        "codelyzer": "^5.0.0",
        "jasmine-core": "~4.5.0",
        "karma": "~6.4.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.2.0",
        "karma-jasmine": "~5.1.0",
        "karma-jasmine-html-reporter": "~2.0.0",
        "protractor": "~5.4.0",
        "tslint": "~5.15.0",
        "typescript": "^4.8.2"
      }
    },

I do expext to debugger hit the breakpiont.

Are you sure the code you're trying to debug is reached? What happen if you put a debugger in the constructor of your bootstrapped component? — Jacopo Sciampi
– Jacopo Sciampi, Commented Mar 1, 2023 at 14:42
@Jacopo Sciampi nothing happens debugger only works when I'm putting it into index.html file — Faramarz Moghimi
– Faramarz Moghimi, Commented Mar 1, 2023 at 21:59

Faramarz Moghimi · Accepted Answer · 2023-05-24 13:01:37Z

3

So finally figured out what is going on; it appears that the project configuration was not migrated properly and fixed with this block of code in the angular.json file architect>build>options>

 `"optimization": false,
  "sourceMap": true,
  "namedChunks": true,
  "extractLicenses": false,
  "vendorChunk": false,
  "buildOptimizer": false,`

edited May 24, 2023 at 13:01

answered Mar 6, 2023 at 7:49

Faramarz Moghimi

616 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MargeKh Over a year ago

could you explain why you use these parameters? and why angular works with them.

Faramarz Moghimi Over a year ago

Sure, these parameters makes sure you run your angular app in development mode as you can see gives you namde chunks when you serve your app, but it's important not to use these parameters in build time because you don't want named chucks and typescript in build time you want your ts compiled to js

Collectives™ on Stack Overflow

debugger not working on browser dev tools after updating angular 8 to 15 dev tools

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related