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:

md pnp-angular-source-map

Move to the above-created directory using:

cd pnp-angular-source-map

Now execute the below command to create a solution

yo @pnp/spfx

It will ask some questions as below,

 

 

 

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.

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,

import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-angular11-source-map-web-part',
  templateUrl: './angular11-source-map-web-part.component.html',
  styleUrls: ['./angular11-source-map-web-part.component.scss'],
  encapsulation: ViewEncapsulation.Emulated
})

export class Angular11SourceMapWebPartComponent implements OnInit {

  @Input() description: string;
  @Input() count = 0;

  constructor() { }

  ngOnInit() {
  }

  increment() {
    this.count += 2;
    console.log("Increment =>", this.count);
  }

  decrement() {
    this.count -= 2;
    console.log("Decrement =>", this.count);
  }
}

Now will create a button and call the created method as below,

<p>
  It works! Description: {{description}}
</p>

<hr>

<h4>Counter Demo</h4>
<button (click)="increment()">Increment by 2</button>
<button (click)="decrement()">Decrement by 2</button>

<p>Count is: {{count}}</p>

To test angular output, run the command,

ng serve --open

 

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:

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  

 

 

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!