# How link WebMap package to the migrated Application

Sometimes when we want to debug a frontend package in the migrated application the process of generating a package, and installing it, and then using it can be a bit slow.

npm has a feature called **link**, which allows us to link the node\_module of a package to an address on the PC's storage. For example, if we have a migrated application and we want to make some changes in the **@mobilize/winforms-components** repository, you do the yarn install or the npm install that you normally do, but how can you make changes to that package and test them in the migrated application?

### setup the npm link <a href="#setup-the-npm-link" id="setup-the-npm-link"></a>

Let's assume that you have a migrated project, to which you want to connect the **@mobilize/winforms-components** repository to test some changes.

#### 1. Compile the **@mobilize/winforms-components** <a href="#id-1-compile-the-mobilizewinforms-components" id="id-1-compile-the-mobilizewinforms-components"></a>

Go to the repository path, in my case is *D:\Repositories\WFNetKendoComponents\WinformsComponent*open a cmd and compile the application

```
npm run build
```

#### 2. NPM link the dist folder <a href="#id-2-npm-link-the-dist-folder" id="id-2-npm-link-the-dist-folder"></a>

Go with the terminal to the **dist** folder after compiling the repository, in my case is *D:\Repositories\WFNetKendoComponents\WinformsComponent\dist* and execute the link command.

```
> cd dist
> npm link
```

You should see something like that:

![repository: link command](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEOm98BbzqckTUoLpXN%2F-MGPkdFTjtmX8LJT6Nqs%2F-MGPlvJT0jQKJI9v7xzs%2Foriginlink.PNG?alt=media\&token=7439e03a-f306-4289-bdfa-311fa11633db)

#### 3. Update angular.json of the migrated project <a href="#id-3-update-angularjson-of-the-migrated-project" id="id-3-update-angularjson-of-the-migrated-project"></a>

Add a new property **preserveSymlinks** in the angular.json of the migrated project.

```
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
      "angular": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "architect": {
            "build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                    ...
                    // Add this new line
                    "preserveSymlinks": true
                }
          }
        }
      }
  }
}
```

#### 4. Link the repository to the migrated application <a href="#id-4-link-the-repository-to-the-migrated-application" id="id-4-link-the-repository-to-the-migrated-application"></a>

Open a cmd in the root of the migrated application and execute the next npm link with the package\_name:

```
npm link @mobilize/winforms-components
```

you should see something like:

![link: migrated path](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEOm98BbzqckTUoLpXN%2F-MGPkdFTjtmX8LJT6Nqs%2F-MGPlvJRjDd8jZsoE_um%2Fnpmtarget.PNG?alt=media\&token=11959a93-ca5c-4ecf-8bae-9076880de92c)

If you check your node\_modules you should see a shortcut in your package folder

![winforms package as npm link](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEOm98BbzqckTUoLpXN%2F-MGPkdFTjtmX8LJT6Nqs%2F-MGPlvJUPRnDQlRsMNSj%2Ffinal.PNG?alt=media\&token=8cbf34cd-8a98-4808-b118-304c6fb18da4)

#### 5. Compile your migrated application <a href="#id-5-compile-you-migrated-application" id="id-5-compile-you-migrated-application"></a>

After link the package, you must compile your application as usual, for example

```
ng build
```

or

```
ng serve
```

or

```
npm run debug
```

### Test changes <a href="#test-changes" id="test-changes"></a>

Suppose you already did the linking process and you made a change to the @mobilize/winforms-components repository that you want to test in your migrated application.

1. Stop the ng serve process if you are using it in the migrated application.
2. Compile the repository with the change made.
3. Compile the migrated application or start the ng serve process.

### Supported repositories for the link process <a href="#supported-repositories-for-the-link-process" id="supported-repositories-for-the-link-process"></a>

1. @mobilize/angularclient
2. @mobilize/base-components
3. @mobilize/winforms-components
4. @mobilize/powercomponents
5. @mobilize/jns-winforms-components
6. @mobilize/acs-winforms-components

You can use one or more linked repositories in a migrated application.

### Unlink repository <a href="#unlink-repository" id="unlink-repository"></a>

you can execute the unlink command to delete the link folder.

```
npm unlink
```


---

# 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-link-webmap-package-to-the-migrated-application.md?ask=<question>
```

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.
