# How to test a local WebMap Components package
Once you get a local copy of the WebMapComponents project at the [git repository](https://collaboration.artinsoft.com/tfs/Product/WebMAP/_git/WebMAPComponents) 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:
```typescript
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.
```markup
```
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.
```javascript
{
"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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.gapvelocity.ai/webmap/general/frontend/guides/component-maintenance/how-to-test-a-local-webmap-components-package.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.