Debugging Angular with VS Code, Firefox and AspNetCore
Install the VS Code Debugger for Firefox
Add the following, to the tasks.json file:
{
"type": "npm",
"script": "start",
"path": "src/Presentation/Web/ClientApp", (1)
"isBackground": true,
"presentation": {
"focus": true,
"panel": "dedicated"
},
"group": {
"kind": "build",
"isDefault": true
},
"problemMatcher": {
"owner": "typescript",
"source": "ts",
"applyTo": "closedDocuments",
"fileLocation": ["relative", "${cwd}"],
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "Compiled |Failed to compile."
}
}
},
"dependsOn": ["build"] (2)
}| 1 | It is important to set the path to the location where the package.json file of the angular application resides within your aspnetcore solution. |
| 2 | This is optional. You can set the task to run only after the aspnetcore application, of which the angular application is a part of, is built successfully. |
Add the following to the launch.json file.
{
"type": "firefox",
"request": "launch",
"preLaunchTask": "npm: start",
"reAttach": true,
"name": "Firefox",
"url": "https://localhost:5005/", (1)
"webRoot": "${workspaceFolder}/src/Presentation/Web/ClientApp", (2)
"pathMappings": [
{
"url": "webpack:///src",
"path": "${workspaceFolder}/src/Presentation/Web/ClientApp/src" (3)
}
]
}| 1 | The url of the aspnetcore application within which the angular application executes. |
| 2 | The path to the package.json file of the angular application. |
| 3 | The path to the app folder. |