Update from Angular 9 to Angular 11

As part of the continuous improvement efforts, we are updating all our front-end frameworks to the latest Angular major release version (11). This is a requirement since our currently used Angular version will end its Long Term Support (LTS) on Aug 06, 2021.

The following table shows the LTS Ends dates for the current Angular releases

Angular versions under support

To see more information about what´s new on Angular 11 visit https://angular.io/guide/updating-to-version-11.

Angular 9 Support

We did a last release with the Angular 9 Framework and these are the package versions that are available to be used if you want to keep your application with the old framework

Repository

Name

Version

AngularClient

@mobilize/angularclient

6.2.0

BaseComponents

@mobilize/base-components

6.2.0

WFNetKendoComponents

@mobilize/winforms-components

6.2.0

PowerComponents

@mobilize/powercomponents

6.1.0

WFNetJanus

@mobilize/jns-winforms-components

1.1.0

WFNetAccess

@mobilize/acs-winforms-components

1.1.0

In case you want to include a hotfix to those branches, we also keep a support branch with the Angular 9 framework to maintain support to those projects that won´t upgrade immediately.

You can find these branches as support/Angular9 in all the git repositories, these branches requires the usual Pull Request policies and will publish the npm packages both locally and in the external npm servers.

Remember that the changes including in these branches must be replicated in the develop branch in order to keep them available when you finally decide to update your project.

Angular 11 Support

The official WebMap packages versions that are compatible with Angular 11 are:

Repository

Name

Version

AngularClient

@mobilize/angularclient

7.0.0

BaseComponents

@mobilize/base-components

7.0.0

WFNetKendoComponents

@mobilize/winforms-components

7.0.0

PowerComponents

@mobilize/powercomponents

7.0.0

WFNetJanus

@mobilize/jns-winforms-components

2.0.0

WFNetAccess

@mobilize/acs-winforms-components

2.0.0

Update Existing Projects to Angular 11

Updating an already migrated project you should follow this process:

  1. Install Node.js, version 14.15 or above is required

    1. Download the latest Node.js release from its official download page and install the new Node.js release

  2. You must update your angular/cli version to version 11

    1. First uninstall your current version with command

yarn global remove @angular/cli or npm uninstall -g @angular/cli

    1. Install the 11 version

yarn global add @angular/[email protected] or npm install -g @angular/[email protected]

Project updates can be performed both manually or using the Angular CLI Tool:

Manually updating an Angular Project

You need to update some project files that require a different configuration with the Angular 11 framework and its dependencies. We prepare a zip package that contains all the files that were modified in order to help you out with the upgrading process.

For Winforms Migrations (Including ACS and Janus)

You need to download the sample Angular 11 project template at: https://artinsoft.sharepoint.com/sites/WFWebMAPMappings/Documentos%20compartidos/General/WinformsA11Files.zip

Alternative Download link

https://artinsoft-my.sharepoint.com/:u:/g/personal/mfigueroa_mobilize_net/EZC8UUuX4NxBl69Vu8Xil2ABWGEAo-JmzcZPjIsFdea9HQ?e=NpqbCD

Then simply replace the files and verify that you are including the correct @mobilize/(winforms-components| acs-winforms-components|jns-winforms-components) package dependency.

Release versions are in the Angular 11 Support table.

For PowerBuilder Migrations

You need to download the sample Angular 11 project template at: https://artinsoft.sharepoint.com/sites/WFWebMAPMappings/Documentos%20compartidos/General/PBA11Files.zip

Alternative Download Link:

https://artinsoft-my.sharepoint.com/:u:/g/personal/mfigueroa_mobilize_net/EVV7qoaYjaFDkRrSEHO5u94BHSzTfpVEsTvx9YUp9bE7GA?e=Bo1WRN

Same process as the winforms, replace the files and verify you are including the correct @mobilize/powercomponents package dependency

Migrating to Angular 11 Automatically

You can also use the Angular CLI tool to migrate your WebMap project automatically from Angular 9 to 11.

To perform the update you need to follow the official Angular Update Guide provided by Angular at: https://update.angular.io/?v=9.1-11.0

Compile the migrated application

Compile your migrated application with ng build, also you can compile with ng build --prod for the production mode.

    1. Maybe you going to need more RAM for the compilation process, please use node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build to assign 8 GB of RAM.

Recommended VSCode Extensions for Angular 11 Development

With the update to Angular 11 we also moved from the deprecated TSLint (https://www.npmjs.com/package/tslint) to ESLint (https://www.npmjs.com/package/eslint) and enable the Prettier code formatter for our components frameworks to keep a clean and tidy code.

To take full advantage of these changes we strongly recommend you to install some extensions for your Visual Studio Code:

With these extensions you will be able to format your code according the expected ESLint standard. Also it will report you directly on the editor any possible error that you introduce in the code files.

Sample ESLint Error on VSCode