How to update ADF from version 2.4.0 to 2.5.0

[dvuika]

Make sure you have a backup copy of your project or create a separate branch prior to upgrade.

In this article, we are going to dwell on upgrading an ADF project 2.4.0 to 2.5.0 that also features update versions of the following libraries:

• Angular 6.x
• Angular Material 6.x
• Angular CLI 6.x
• RxJs 6.x

All Yeoman blueprints have been upgraded to use the libraries above. You can generate a new application based on one of the templates having Angular 6 configuration out of the box. Alternatively, you can use Yeoman templates as a reference for a working project setup and correct dependency versions.

Upgrading ADF libraries

Regardless of the project type, upgrade core ADF libraries to the latest version.

npm i -E alfresco-js-api@2.5.0
npm i -E @alfresco/adf-core@2.5.0‍‍

Depending on the type of the project, ACS-only, APS-only or mixed one, update the corresponding libraries

npm i -E @alfresco/adf-content-services@2.5.0
npm i -E @alfresco/adf-process-services@2.5.0
npm i -E @alfresco/adf-insights@2.5.0‍‍‍‍‍‍

If you have a large application, make sure checking the official update guide from Angular team: Angular Update Guide . Note, however, that update steps in this guide take into account the upgrade process from 5.1 to 6.0 from the official guide extended with steps related to ADF.

Update tsconfig.json

Append the following setting to the "tsconfig.json" file in the root project folder:

"angularCompilerOptions": {
    "preserveWhitespaces": false
}‍‍‍

Update Angular CLI

Use the following commands to update to the latest version of Angular CLI

npm i -D @angular/cli@latest
ng update @angular/cli‍‍

During the update, the main Angular CLI configuration file ".angular-cli.json" is renamed to "angular.json". Angular tools should safely upgrade the content of the file as well.

Update package.json scripts

In the "package.json" file, replace the "test" script with the following:

"test": "ng test",‍

Update libraries

First, update the core layout and component libraries:

npm i @angular/flex-layout@latest
ng update @angular/core‍‍

Next, you need to address the third-party date picker component used by ADF.

npm i @angular/material-moment-adapter@latest
ng update @mat-datetimepicker/moment‍‍
ng update @mat-datetimepicker/core‍‍‍

You may see a single error related to typescript in the console during the upgrade. It should work fine at the end.

Finally, update Angular Material, Translate and various other dependencies:

ng update @angular/material
ng update @ngx-translate/core

npm i -E pdfjs-dist@2.0.303
npm i minimatch-browser‍‍‍‍‍

RxJs compatibility layer

In order to migrate to latest RxJs you may want installing compatibility layer that helps to prevent breaking changes during upgrade:

npm i rxjs-compat@latest‍

Verify application upgrade

Build the application to ensure everything compiles without errors:

ng build‍

Verify the production build:

ng build --prod‍

Finally, ensure the application runs correctly:

npm start‍

You may get the warning about “zlib" in pdf.js library is a known issue and does not affect the application.
WARNING in ./node_modules/pdfjs-dist/build/pdf.js
Module not found: Error: Can't resolve 'zlib' in '/node_modules/pdfjs-dist/build'
It will be fixed once Mozilla releases a fix for this warning.

Upgrade your application code to latest RxJs

Please refer to the following guide on how to upgrade to RxJs 6.x: rxjs/migration.md at master · ReactiveX/rxjs · GitHub 

Once you are finished, remove the compatibility layer:

npm rm rxjs-compat‍