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
