# Update to Angular 16

As part of the continuous improvement efforts, we are updating all our front-end frameworks to the latest Angular major release version (16).

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

<figure><img src="/files/IFxtYOpr76YcRUbL38Ui" alt=""><figcaption><p><a href="https://angular.io/guide/releases#actively-supported-versions">Actively supported versions</a></p></figcaption></figure>

## Angular 16 Support

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

<table data-header-hidden><thead><tr><th width="249.33333333333331">Repository</th><th>Name</th><th>Version</th></tr></thead><tbody><tr><td>Repository</td><td>Name</td><td>Version</td></tr><tr><td>AngularClient</td><td>@mobilize/angularclient</td><td>12.0.0</td></tr><tr><td>BaseComponents</td><td>@mobilize/base-components</td><td>11.0.0</td></tr><tr><td>WFNetKendoComponents</td><td>@mobilize/winforms-components</td><td>12.0.0</td></tr><tr><td>WebFormsComponents</td><td>@mobilize/webformscomponents</td><td>5.0.0</td></tr><tr><td>WFNetJanus</td><td>@mobilize/jns-winforms-components</td><td>8.0.0 </td></tr><tr><td>WFNetAccess</td><td>@mobilize/acs-winforms-components</td><td>3.0.0</td></tr><tr><td>WFNetC1Components</td><td>mobilize/wfnet-c1-components</td><td>5.0.0</td></tr></tbody></table>

## Update Existing Projects to Angular 16

Updating an already migrated project you should follow this process:&#x20;

1. Install **Node.js**, version **16.20** or above is required
   1. Download the latest Node.js release from its [official download](https://nodejs.org/en/) page and install the new Node.js release.
   2. If you have problems with latest version, use this instead [**16.20.2**](https://nodejs.org/download/release/v16.20.2/)**.**
2. You must update your **angular/cli** version to version **16**
   1. First uninstall your current version with command and clean cache:

&#x20;             `yarn global remove @angular/cli` or `npm uninstall -g @angular/cli`

&#x20;             `yarn cache clean` or  `npm cache verify`&#x20;

&#x20; 3\.  Install the 15 version:

&#x20;             `yarn global add @angular/cli@16.2.14` or

&#x20;             `npm install -g @angular/cli@16.2.14`

Project updates can be performed both manually or using the Angular CLI Tool.&#x20;

### Migrating to Angular 16 Automatically

The first recommendation is to generate your new Angular 16 upgraded code through the Conversion Tool same as the first time.

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

To perform the update, you need to follow the official [Angular Update Guide](https://update.angular.io/?v=14.0-15.0) provided by Angular.

#### Compile the migrated application

&#x20;Compile your migrated application with **ng build,** also you can compile with\
\&#xNAN;**`ng build --configuration=production`** 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**](mailto:./node_modules/@angular/cli/bin/ng) **build** to assign 8 GB of RAM.

## Recommended VSCode Extensions for Angular 16 Development

Since the update to Angular 13 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 install some extensions for your Visual Studio Code:

* Prettier - Code formatter: <https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode>
* ESLint: <https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint>
* **Remove (if installed)** the TSLint extension: <https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin>

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.&#x20;

![Sample ESLint Error on VSCode](/files/-MRahMmkXiuMNkyfaLBw)


---

# 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/update-from-angular-13-to-angular-14.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.