How To Debug Angular Elements In PnP/Generator-SPFx Solution Using Source Map

Introduction

 
Recently version 1.16.1 of the PnP SPFx Yeoman generator has been released.  In this version one important feature of Angular has been added - generating an Angular element bundle with source map and also added support for Angular 11.
 
The main purpose of this feature is to debug Angular app files in SPFx.
 
A source map is a JSON file that contains all the necessary information (like source, file, name, mapping, etc.) to map the transpiled code back to the original sources.
 
For more information about how to use PnP SPFx Yeoman generator, refer to this link.
 
Now, let’s see how to debug Angular elements with SPFx solution.
 

Implementation

  • Open a command prompt
  • Move to the path where you want to create a project
  • Create a project directory using:
  1. md pnp-angular-source-map  
Move to the above-created directory using:
  1. cd pnp-angular-source-map  
Now execute the below command to create a solution
  1. yo @pnp/spfx  
It will ask some questions as below,
 
Project Setup 
 
These commands will generate separate folders for Angular elements and SPFx webpart with -spfx suffix.
 
After successful installation, an open project in VS Code executes the below command.
  1. code .      

Scenario 

 
We will create a sample demo for increment and decrement numbers with the click of a button and debug these angular elements in spfx.
 
Move to the Angular project folder and open {WebpartName}.component.ts file
       
Here we will create two methods for Increment() and Decrement(). So our code will be like this,
  1. import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-angular11-source-map-web-part',  
  5.   templateUrl: './angular11-source-map-web-part.component.html',  
  6.   styleUrls: ['./angular11-source-map-web-part.component.scss'],  
  7.   encapsulation: ViewEncapsulation.Emulated  
  8. })  
  9.   
  10. export class Angular11SourceMapWebPartComponent implements OnInit {  
  11.   
  12.   @Input() description: string;  
  13.   @Input() count = 0;  
  14.   
  15.   constructor() { }  
  16.   
  17.   ngOnInit() {  
  18.   }  
  19.   
  20.   increment() {  
  21.     this.count += 2;  
  22.     console.log("Increment =>"this.count);  
  23.   }  
  24.   
  25.   decrement() {  
  26.     this.count -= 2;  
  27.     console.log("Decrement =>"this.count);  
  28.   }  
  29. }  
Now will create a button and call the created method as below,
  1. <p>  
  2.   It works! Description: {{description}}  
  3. </p>  
  4.   
  5. <hr>  
  6.   
  7. <h4>Counter Demo</h4>  
  8. <button (click)="increment()">Increment by 2</button>  
  9. <button (click)="decrement()">Decrement by 2</button>  
  10.   
  11. <p>Count is: {{count}}</p>  
To test angular output, run the command,
  1. ng serve --open  
Angular Output
 
Note
After doing any changes in the angular project, we have to run the `npm run bundle` command to reflect changes in the SPFx solution.
 
Now move to the spfx project folder and run the command:
  1. gulp serve  
Once SPFx application is served on localhost, add the webpart which includes the angular element. To debug this element open developer tools and search the angular element component.ts file in sources, add the breakpoint in component and test it.  
 
Output  
 
Debug Angular Elements
 
Find the full source code here
 

Summary 

 
In this article, we have seen how to debug Angular elements in pnp/generator-spfx.
 
I hope this helps you debug an Angular component🙂.
 
Sharing is caring!