debugging-angular
debugging-angular copied to clipboard
branflake2267
Debugging Angular with Visual Studio Code
Debugging Angular
Debugging Angular with Visual Studio Code.
Project Configuration
| Setting | Value |
|---|---|
| Purpose | Debugging with VS Code using a simple Angular project |
| Client Framework | Angular |
| Client Language | TypeScript |
| Architecture | npm/node |
| IDE | Visual Studio Code |
| License | GPL v3 |
| Tutorial | Youtube Tutorial |
Generate Application
The app generation is based on https://angular.io/guide/setup-local.
- Run
npm install -g @angular/cli- Install the app generator CLI tool. - Run
ng new client- Generate an application, I named itclient. - Run
cd client- Change directory to the app. - Run
ng serve --open- Start the compiler, web server and open Chrome.
Debugging
Debug with Visual Studio Code
Configure Launchers
- launch.json
- tasks.json
Run Launchers
Launching and debugging in chrome will allow you to use break points in the source code. The launchers are based on https://github.com/microsoft/vscode-recipes/tree/master/Angular-CLI.
- Run the Visual Studio Code Launcher
Launch ng serve & Chrome
Debug with npm
- Run
npm start
branflake2267