How to test a local WebMap Components package

Once you get a local copy of the WebMapComponents project at the git repository and want to test your latest changes in a migrated application then you need to follow this guide in order to create a local npm package and test it out in a migrated application.

Step 1: Your Changes

Let's suppose that you want to add a new functionality to an existent control, change its appearance or add another component to the list of supported components.

In this example we are going to modify the label component to display an alert after the click event and then modify it's font color using a new method.

Note: It is important to know that the changes applied to this project and the components defined in it will modify every component of the same type in the migrated application. If you only want to modify a specific component of your application the you should perform the changes in the migrated application instead.

The changes:

Since we want to modify the label component for this example then we need to edit the components files

First it is required to define the new functions that will handle our click event, so we add in our label.component.ts file the following code:

  color: string;

  clickHandler(event: any): void {
    alert('DEMO TEST');
    this.color = this.getRandomColor();
    this.detectChanges();
  }

  getRandomColor(): string {
    return "#" + (Math.random().toString(16) + "000000").substring(2, 8);
  }

Then some modifications are required in the html file in order to add the corresponding bindings. In this example we include the ngStyle binding and the click event binding.

<label *ngIf="model" class="k-form-field" [ngClass]="class"
 [ngStyle]="{'color': color}" (click)="clickHandler($event)"
 [attr.disabled]="disabled" wmControls>{{text}}</label>

And those are the changes that we want to add in this example, so then we are going to build a local package.

Step 2: The local package

Creating a new local npm package it's pretty simple using the standard npm commands.

First we need to define a version name for our package this is an optional step, because you could use the version already defined in the package.json file.

To create a new version you need to use the npm version command, you simple need to enter:

npm version [version name]

After the version is generated the package.json file is modified and it will have the new version name in it.

{
    "name": "@mobilize/winforms-components",
    "version": "1.0.0-demo",
    "license": "UNLICENSED",

Then, after compile your local project using the gulp command, you should execute the npm pack command, this command will generate a compressed file in (.tgz) format that contains your locally generated npm package

Step 3. The installation

To install the generated local package in your migrated application, you only need to execute the following command in the migrated application's frontend project:

npm install [fullpath to the  .tgz file]

Step 4. Test it!

After the installation is finished, you should compile the migrated application's frontend code again using the ng build command. If everything went successfully the application should compile and run with your changes included.