Angular Debug don't stop at breakpoint

FollowFollowed by 2 people

What Node.js version do you use to run ng serve?  Please share a screenshot of Settings | Languages & Frameworks | Node.js page

Node 14.16.1

npm 6.14.12

Typescript 4.5.4

Hmm... that's strange, debugging should work fine using this setup. Can't reproduce the issue in 3.2 RC

Could you check if debugging works for a new Angulr Cli app?

Yes, this setup works fine until i switched to windows 11. Since this update the checkmark of the breakpoint does not appear..

Can you reproduce the issue with a new Angular Cli app?

With a new clear Cli App the debugging will work - thats strange ..

So this is likely a problem with a project setup.. Please start the app and then open Chrome Dev tools - can you see your files in the Sources tab, under webpack:// node? What do the scripts look like?

No, i dont have the webpack anymore. 

Looks as if only the compiled stuff if there, no source scripts are available... Do you have sourcemaps enabled for your configuration? make sure that you have

"sourceMap": true

in your angular.json

No, i dont have this option set. I thought this is the default?

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Planung1": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/Planung1",
            "allowedCommonJsDependencies": [
              "chart.js",
              "simplemde"
            ],
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/.htaccess",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "src/styles.scss",
              "src/assets/scss/style.scss"
            ],
            "scripts": [
              "node_modules/apexcharts/dist/apexcharts.min.js"
            ],
            "serviceWorker": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Planung1:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Planung1:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Planung1:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "cypress/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@briebug/cypress-schematic:cypress",
          "options": {
            "devServerTarget": "Planung1:serve",
            "watch": true,
            "headless": false
          },
          "configurations": {
            "production": {
              "devServerTarget": "Planung1:serve:production"
            }
          }
        },
        "cypress-run": {
          "builder": "@briebug/cypress-schematic:cypress",
          "options": {
            "devServerTarget": "Planung1:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "Planung1:serve:production"
            }
          }
        },
        "cypress-open": {
          "builder": "@briebug/cypress-schematic:cypress",
          "options": {
            "devServerTarget": "Planung1:serve",
            "watch": true,
            "headless": false
          },
          "configurations": {
            "production": {
              "devServerTarget": "Planung1:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "Planung1",
  "cli": {
    "analytics": false
  }
}

Not sure what are the defaults, can't find this info in angular docs. But it's explicitly enabled in default angular.json generated by CLI. And sourcemaps aren't generated when using your configuration

After i copied the development configuration and start it with the following command it will work.

ng serve --configuration development

But i have no idea why i have to do it.. strange but thanks!