The `*ngFor` directive was used in the template, but neither the `NgFor` directive nor the `CommonModule` was imported

Recently encountered error below while building an app in Angular

 The `*ngFor` directive was used in the template, but neither the `NgFor` directive nor the `CommonModule` was imported

Pretty simple fix is that imoer common module in your component something like below

import { CommonModule } from '@angular/common';

@Component({

selector: 'app-abc',

templateUrl: './abc-component.html',

styleUrl: './abc.component.scss',

standalone: true,

imports: [CommonModule]

}

Error should disappear.

Enjoy coding !!!

Cheers,

Kapil

Solved : VSCode: Debugging Error “Breakpoint set but not yet bound" - Angular, Node

 Hi, 

I was facing issue while setting up debugger with chrome with Angular app. My Chrome Launch configuration was : 

    "configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome",

"url": "http://localhost:4200",

"webRoot": "${workspaceFolder}"

}

After investigation found that it was not able to figure out webRoot correctly since my app was one more level down into app folder hence i have changed webRoot Path as below which did trick for me :) 

    "configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome",

"url": "http://localhost:4200",

"webRoot": "${workspaceFolder}/myAppStore/"

}

Relaunched the debug and it worked.

Cheers,

Kapil