typescript - Klarer ikke å få Chrome-debuggeren til å fungere via oppstart i Visual Studio Code for et Angular 8-prosjekt

Etter å ha oppgradert Angular til versjon 8, kan jeg nå ikke kjøre Chrome-debuggeren i Visual Studio Code.

Jeg har ikke endret på launch.json som er lik den følgende:

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome (https)",
  "url": "https://myhost.domain.com:4200",
  "webRoot": "${workspaceFolder}"
},

Jeg starter Angular-appen via følgende kommando

ng serve --host myhost.domain.com --ssl --disableHostCheck

Dette fungerte i lang tid fram til oppgraderingen. Jeg kunne starte Chrome og feilsøke forskjellige komponenter i Angular. Nå sier det bare «Uverifisert breakpoint»

Jeg prøvde følgende:

  • Endrer plasseringen av webRoot-mappen til forskjellige mulige steder. Jeg la merke til at det er en ny melding i utdataene når jeg kjører appen. (https://myhost.domain.com:4200/webpack-dev-server/ ℹ (wds): utdata fra webpack serveres fra /ℹ (wds): 404-feil vil falle tilbake til //index.html)

  • Avinstallere og installere Visual Studio Code-utvidelsen på nytt

  • Legger til SourceMap: true
  • Å lage et helt nytt Angular-prosjekt ved å bruke ng new test-project og forsøke å feilsøke dette prosjektet, og det gjør det samme.

Her er hvordan min package.json ser ut:

{
  "name": "my-application",
  "version": "0.7.2",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.1.1",
    "@angular/cdk": "^8.1.0",
    "@angular/common": "^8.1.1",
    "@angular/compiler": "^8.1.1",
    "@angular/core": "^8.1.1",
    "@angular/forms": "^8.1.1",
    "@angular/material": "^8.1.0",
    "@angular/platform-browser": "^8.1.1",
    "@angular/platform-browser-dynamic": "^8.1.1",
    "@angular/router": "^8.1.1",
    "@datorama/akita": "^4.5.0",
    "angular-oauth2-oidc": "^5.0.2",
    "angular-pipes": "^9.0.2",
    "buffer": "^5.2.1",
    "chart.js": "^2.8.0",
    "core-js": "^3.1.4",
    "material-design-icons": "^3.0.1",
    "ng2-charts": "^2.3.0",
    "rxjs": "~6.5.2",
    "speed-measure-webpack-plugin": "^1.3.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.1",
    "@angular/cli": "^8.1.1",
    "@angular/compiler-cli": "^8.1.1",
    "@angular/language-service": "^8.1.1",
    "@types/jasmine": "~3.3.13",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "^12.6.3",
    "codelyzer": "^5.1.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.2.0",
    "karma-chrome-launcher": "~3.0.0",
    "karma-coverage-istanbul-reporter": "~2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.2",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "^3.4.5"
  }
}

Her er hvordan ng-versjonen ser ut:

Angular CLI: 8.1.1
Node: 10.15.0
OS: darwin x64
Angular: 8.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.1
@angular-devkit/build-angular     0.801.1
@angular-devkit/build-optimizer   0.801.1
@angular-devkit/build-webpack     0.801.1
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cdk                      8.1.0
@angular/material                 8.1.0
@ngtools/webpack                  8.1.1
@schematics/angular               8.1.1
@schematics/update                0.801.1
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.35.2

Svar #1

Feilsøkingskonfigurasjonene launch.json og tasks.json har endret seg for Angular 8 (begge ble nylig oppdatert juli 2019)

Du kan finne lenker og detaljer for de mest populære feilsøkingsoppskriftene på VSCode-dokumentasjonssiden.

Den spesifikke for Angular er på vscode-recipies GitHub-siden: https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

De endres for ofte til at det er verdt å legge ut hele konfigurasjonene her, så legger bare inn lenkene

Relaterte artikler