Upon upgrading Angular to version 8, I am now unable to run the Chrome debugger within Visual Studio Code.
I have not changed my launch.json which is similar to the following:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome (https)",
"url": "https://myhost.domain.com:4200",
"webRoot": "${workspaceFolder}"
},
I launch the Angular app via the following command
ng serve --host myhost.domain.com --ssl --disableHostCheck
This was working for a long time until the upgrade. I was able to launch Chrome and debug different components in Angular. Now all it does is state "Unverified Breakpoint"
I tried the following:
Changing the webRoot folder location to different possible locations. I did notice that there is a new message on the output, when I serve the app. (https://myhost.domain.com:4200/webpack-dev-server/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: 404s will fallback to //index.html)
Uninstalling and Reinstalling the Visual Studio Code Extension
Here is what my package.json looks like:
{
"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"
}
}
Here is what ng version looks like:
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
The debugging launch.json and tasks.json configurations have changed for Angular 8 (both were recently updated July 2019)
You can find links and details for the most popular Debugging Recipes on the VSCode documentation site.
The specific one for Angular is on the vscode-recipies GitHub page: https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI
They change too often to make it worth while posting the full configs here, so just putting in the links