Angular Debug don't stop at breakpoint

Hi,

 

since i updated to windows 11 i am not able to debug my angular app. I starts the app normal and/or in debug and then i start debug with ctrl+shift in http://localhost:4200/

A new Chrome window opens and the app starts. But in the IDE i only see the right dot without checkmark. And the IDE does not stop at the breakpoint. I also uninstalled intellij, tested Webstorm und now i updated to the Early Access.

Actually i have installed 2021.3.2 RC

 

I dont know what i can do, it is very strange. I hope you have a few tips for me!

 

Thanks

 

12 comments
Comment actions Permalink

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

0
Comment actions Permalink

Node 14.16.1

npm 6.14.12

Typescript 4.5.4

0
Comment actions Permalink

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?

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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?

0
Comment actions Permalink

No, i dont have the webpack anymore. 

0
Comment actions Permalink

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

0
Comment actions Permalink

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
  }
}
0
Comment actions Permalink

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

0
Comment actions Permalink

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!

1

Please sign in to leave a comment.