How to update ADF from version 2.4.0 to 2.5.0

Document created by dvuika Employee on Aug 13, 2018
Version 1Show Document
  • View in full screen mode

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/ at master · ReactiveX/rxjs · GitHub 


Once you are finished, remove the compatibility layer:


npm rm rxjs-compat
5 people found this helpful