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

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

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

npm run build

2. NPM link the dist folder

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

3. Update angular.json of the migrated project

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

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

If you check your node_modules you should see a shortcut in your package folder

winforms package as npm link

5. Compile your migrated application

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

ng build

or

ng serve

or

npm run debug

Test changes

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

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

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

npm unlink