#VSCode: Handling Debugging Error “Breakpoint set but not yet bound”

Your Angular VS Code project can contain either a simple application, or multiple. When you have multiple, it can cause issues with connecting a debugger. Here’s the trick on how to handle that situation:

After you create a new Angular app then try to debug it in VSCode, you can often get the error “Breakpoint set but not yet bound” when you try to set a break point.

sourceMapPathOverrides is critical

The fix is simple, just indicate the actual path to the webRoot, not just the workspaceFolder in the launch.json.

{
 
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/my-app/src",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

When you just have a single application (you don’t have a Project/ folder) set the webRoot to

"webRoot": "${workspaceFolder}"

Tip: When you open the folder in VS Code, do so at the root where the .vscode folder is. The e2e, src etc folders should all be at the top level.

 

Some Gotchas:

• I’ve noticed that sometimes you still get the error “Breakpoint set but not yet bound” after the first try. After you build then try to debug, close VSCode and Chrome then open up again. That sometimes helps.
• sourceMapPathOverrides is critical
• Make sure that tsconfig.json has sourceMaps set to true
• When you run the app in Chrome, go to the dev tools and see if the ts files are displayed like this:

#VSCode: One #Angular Workspace with multiple projects

In VS Code (Visual Studio Code) you can create a single Workspace with 1 git repo but contain multiple projects. This lets you create library and app and contain them all under the same angular.json as well.

Here’s how.

Create a folder where you’d like to create the Workspace. In my example e:\ngLearn\CLIPlayGround

VS Code will appear. Open the Terminal Ctrl+Shift+`

Now, ask the CLI to create an Workspace, but with no default application:

ng new –createApplication=false

In the prompt give your workspace a name, like my-workspace

It’s take a few minutes to set up. If you open Windows Explorer you’ll see the new workspace made, but without any application inside:

Let’s now add a few applications by using the commands in the new folder

cd .\my-workspace\

ng g application

Run this twice and you’ll then notice there are 2 applications in your workspace: under a new Projects folder

 

 

#Angular and Asp.Net 3 Core 3: Creating up to date documentation

After you create a new Asp.Net Core 3 Angular project, you’ll want to add documentation. Keeping it up to date is always a chore, but with some new tools, that can be made much easier.

We’re going to go over CompoDoc, a free tool to create and update Angular Documentation.

The first step is to install it into your Asp.Net Core 3 Angular app. Open up the ClientApp folder in a Terminal and enter this:

npm install --save @compodoc/compodoc

Once done, go to your package.json file and add the compodoc script to the script’s node:

To generate the docs, just run this in the same terminal:

 npm run compodoc

It will generate a ClientApp/documentation folder. Open the resulting index.html to view your new shiny docs.

Re-run the compodoc script to update as needed.

 

 

#Angular and Asp.Net Core 3: Using a real-fake backend for prototyping and testing.

Real-Fake backend. Yah, I know, it sounds weird.

I’m in a situation where I want my Angular code to post to a real HTTP backend and return some values, but I don’t want to wait/create a real Asp.Net Core 3 backend to test or wire up selenium. I need a really fast turn around in a prototype. In this article that’s what we’ll do.

I’ll use Angular for this post, but React or Vue, etc would work just fine.

I’ll assume you have a little bit of an Angular background, but it’s not needed too much to get the idea.

In my component I have a form submit handler wired up and a data service stub as well:

export class UserSettingsFormComponent implements OnInit {

  constructor(private dataService: DataService) {}

  onSubmit(form: NgForm) {
    this.dataService.postUserSettingsForm(this.userSettings).subscribe(
      result => console.log('success', result),
      error => console.log('error: ', error)
    );
  }

My data service just returns what is posted:

export class DataService {
  constructor(private http: HttpClient) { }

   postUserSettingsForm(userSettings: UserSettings): Observable<any> {
       return this.http.post('https://putsreq.com/qYVARlIpT0IiOUSAmp0a', userSettings);
  }
}  

What’s the funny-looking URL? Here’s the magic. Go to https://putsreq.com and tap the Create a PutsReq button.

Then in the screen that appears,  add this to the “Response Builder and press Update:

var parsedBody = JSON.parse(request.body);
parsedBody.id='MyIdIsBest';
response.body=parsedBody;

Now when we run our Angular form and post the value, PutsReq will execute our request and return what we indicated.

With this we can quickly edit and experiment with posting and modifying a response from our Angular app.

Here’s what the PutsReq page will show as Requests from your app come in:

 

 

#Angular and Asp.Net Core 3: #Bootstrap integration plus #Intellisence

When we build a new Angular application in Visual Studio 2019 we use lots of npm commands to get the resources needed. However because the node_modules folder is not included in the solution, Visual Studio will not pick up the bootstrap CSS for intellisence.

There is a simple fix, but let’s first review how to add Bootstrap to an Angular project in Asp.Net Core 3.

Open a terminal window and point to the ClientApp folder then type:

npm install –save bootstrap

In the node_modules folder you’ll see a new folder called bootstrap:

Open the angular.json and add a reference to the minified bootstrap css:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

 

Select the dist folder in the node_modules/bootstrap folder and press ctrl+c to copy it.

Create a new folder called “MyIntellisence”  in the root of the solution then paste in the contents of the dist folder:

That’s it! Now when you open a component, Visual Studio will give you gorgeous intellisence:

#Angular and Asp.Net Core 3: Faster debug cycles in Visual Studio 2019

Asp.Net Core 3 and Angular work great together. Here are a few tricks I use to have a super-fast development cycle when working on the client-side of my code. Note that this doesn’t apply to changes to c# code on your backend hosted in Asp.Net Core 3.

I assume that you have created your Angular 8+ app inside Asp.Net Core 3. If not, create one with the Create a New Project menu and choose the Angular option:

I like to run the Terminal inside Visual Studio, fewer windows to switch between. Go and install the free Extension Wack Wack.

Run Wack Wack from the View|Other Windows|Terminal menu and change the directory to the ClientApp folder.

So that you and I are in the same version, update Angular then install all the packages by running these two commands:

ng update @angular/cli @angular/core

then

npm install

Once done we are ready.

Start up your Angular project with this command

npm start

Now, as you make changes to your Angular code and save them, the changes will instantly appear in the browser. No need to press F5 and wait for Visual Studio to connect and build.

 

Creating a Simple Typescript Polymorphism Logger

If you are coming from a Java or C# background you are familiar with the idea that an object that implements an IAnimal interface can be a Dog or Cat. That’s Polymorphism.

In this Typescript tutorial, I’ll show you how to use this, simply, to have your app write out to the console a log or error message.

First, let’s define our object to be a function that expects a message and returns nothing.

let logger: (message: string) => void;

Now let’s create that “Dog and Cat” implementation. One to output errors and one for messages.

Notice how the interface of the functions matches the logger we defined above:

function error(message: string): void {
  console.error(message);
}

function log(message: string): void {
  console.log(message);
}

We can now assign the logger to be a log or error function depending on the input. If the age is more than 5 then we log, else we error out.

let age: number = 5;

if (age>5) {
   logger = log; 
} else {
   logger = error;
}

logger(`${age} was the age`);

In the console of the browser we see: