Shane Bartholomeusz

Geek and lover of all things tech related

How To: Debug Angular apps with Google Chrome in VSCode

Overview

VSCode is a fantastic IDE for editing <insert your favourite language here> source code. Likewise Angular is a great framework for developing front-end web apps.

When developing applications, we developers usually spend most of our time in the debugger. However, out of the box there is a little bit of setup required to enable debugging of an Angular TypeScript application when using VSCode.

In this post I'll show you how to configure VSCode debugging for an Angular TypeScript application with the Google Chrome web browser.

Angular logo

The Pre-Amble …

For the purposes of this article I will create a dummy Angular web app using the following Angular CLI command:

ng new vs-code-debug-demo
Angular Web App Screenshot

Step-by-Step Guide

Now we need to configure VSCode to enable debugging. The process is as follows.

1. First, replace the .vscode/launch.json file with the following content. If this file doesn't exist, then create it.

Ideally your application should be in the same root directory, and not nested in sub-folders, otherwise you will need to amend the ‘webRoot' path e.g. ‘${workspaceFolder}/my-nested-app-files'.

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "ng serve",
        "type": "pwa-chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:4200/#",
        "webRoot": "${workspaceFolder}",
        "sourceMapPathOverrides": {
          "webpack:/*": "${webRoot}/*",
          "/./*": "${webRoot}/*",
          "/src/*": "${webRoot}/*",
          "/*": "*",
          "/./~/*": "${webRoot}/node_modules/*"
        }
      }
    ]
  }

2. Add the following task to your tasks.json file with the following configuration.

{
    "version": "2.0.0",
    "tasks": [
      {
        "type": "npm",
        "script": "start",
        "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."
            }
          }
        }
      }
    ]
  }
  

3. That's it. We're all done! Now it's time to start debugging.

To start a debugging session, hit the F5 key or click RUN>START DEBUGGING and a terminal will open which will begin serving your web app, and a browser window will also open. Now if you add a breakpoint to your application code, you will be able to step through the code.

VSCode Terminal Screenshot

Source Code

You can find sample code for the above example at the below link, including configuration files.
https://github.com/sbartholomeusz/vscode-debug-demo

Final Thoughts

Well I hope this article has helped you configure VSCode for debugging your Angular Typescript web application.

If you have any thoughts or other alternative ways, feel free to share them in the comments below to help others out there. Happy coding 🙂

How to: Deploy Azure Functions Using Github Actions

Overview

GitHub has really opened the doors for collaboration across the wider software development community. If you are already using GitHub then it makes sense to make the most of the GitHub ecosystem and use of all of it's available features, including GitHub Actions; a powerful workflow engine that enables developers to automate repetitive tasks.

In this post I'll show you how you can deploy an Azure Function using a GitHub Actions workflows, and by the end of this guide, you'll have a fully working automated deployment pipeline setup.

Please note that this guide assumes that you are already familiar with using Azure Functions and using GitHub for basic source control management.

Banner image
Continue reading

Solved: Set SharePoint Person Field to Null in Power Automate

Problem

Whilst trying to update a SharePoint Online List Item through Power Automate I noticed that I was unable to clear a Person field within a given List Item.

After some research it turns out that the Power Automate SharePoint Online connector currently does not support this operation when performing an ‘update' operation.

In this post I'll explain the solution that I found, and ultimately ended up using.

Power Automate Logo
Continue reading

Visual Studio: Generate Class From JSON String

Overview

If you work JSON documents, I'm sure you've probably had to create a class file from a JSON string. Doing this manually can be a real pain in the proverbial, especially if you are working with a large JSON document. It can also be very error-prone. Therefore it's best to automate this conversion.

In this post I'll show you how to automatically generate a class file from a JSON string using a little known feature built into Visual Studio.

Visual Studio Icon
Continue reading

Visual Studio: Show Current File in Solution Explorer

Overview

Have you ever worked on a large Visual Studio project that contained many projects and become somewhat disorientated, unable to find the currently open file within the Solution Explorer pane?

I did just that recently … I started work on a large Visual Studio solution for a client which contained over 180 projects within a single solution. Yep, I’m not even joking!

Whilst trying to learn and understand the solution structure I found myself getting lost inside the sea of nested projects and folders contained within the solution.

Well guess what? You're in luck because I'll show you a little known feature that may help you.

Visual Studio Icon
Continue reading

How to: Change SharePoint Default Permissions Group

SharePoint Default Permission Groups 101

After creating a new SharePoint Online site (aka Site Collection) several permissions groups are automatically created for you to help you manage permissions for the given SharePoint site.

By default, the following default permissions groups are created for you:

SharePoint GroupDefault Permissions Level
<site name> MembersEdit
<site name> OwnersFull Control
<site name> VisitorsRead
Continue reading

Solved: BlazorInputFile ‘No File Chosen’ Error

Blazor WebAssembly Icon

Problem

Blazor is an exciting new technology for .NET developers that enables us to leverage our core strengths by writing most of the code in C# and minimising the need to write JavaScript code.

While working on a Blazor WebAssembly solution that used Steve Sanderson's BlazorInputFile solution I came across an unusual issue where the “No File Chosen” text would not change and the selected filename did not appear even though a file had already been selected.

Hmmmm … what's going on here?

HTML File Input Screenshot
Continue reading

Implement Azure Web App Authentication – The Easy Way

Overview

Let’s face it … security is HARD. Implementing authentication and authorization into applications has always been a challenge and a chore for developers. Building a secure application requires strong knowledge across a number of areas.

Thanks to the power of Microsoft Azure, it now doesn’t have to be like this anymore. Thanks to the power of Easy Auth it’s easier than ever to setup secure authentication for your web application with the click of a few buttons. Yep, I’m not kidding!

So what are we waiting for … lets get started.

Azure App Service Logo
Continue reading

AZ-204 Exam Study Guide (Developing Solutions For Microsoft Azure)

Overview

The AZ-204 (Developing Solutions for Microsoft Azure) exam is tailored to Microsoft developers working on the Azure cloud platform.

Having recently passed the AZ-204 exam I wanted to share my thoughts and insights in this AZ-204 Exam Study Guide to help you pass the exam.

AZ-204 Exam Badge
Continue reading

Solved: PDF Printer Missing in Win 10

Problem

Windows 10 has a built-in PDF printer which enables you to generate PDF's without needing to install any additional software – as was required in previous versions of Microsoft Windows.

So the other day I tried to use the “Microsoft Print to PDF” printer option however noticed it was missing … WHAT THE!

If you've encountered this same issue then you are in luck because in this article I'll show you how to fix this problem.

Windows 10 Add Printer Dialog
Continue reading
« Older posts

© 2021 Shane Bartholomeusz

Theme by Anders NorenUp ↑