How to update ADF from version 2.1.0 to 2.2.0

[eugenio_romano]

In this Tutorial, I would like to help you to update your project created with the ADF Yeoman app genera. Many people have asked on our gitterchannel which are the correct steps to upgrade from version 2.1.0 to version 2.2.0

In order to understand the possible ways to update a project I did some different experiments with old projects and I finally find out the following two different approaches:

1. Automatic update of the project using the Yeoman Generator.

2. Manually update the project.

If you are not using a versioning system on your project I suggest you execute a backup copy of it before to following one of this approach. 

           

A. Automatic update of the project using the Yeoman Generator

If your application is mainly just the output of the generated app, you can try to follow these steps:

• Update the Yeoman generator to version 2.2.0

npm uninstall -g generator-alfresco-adf-app
npm install -g generator-alfresco-adf-app

• Run the new yeoman app generator.

yo ng2-alfresco-adf-app

• Clean your old distribution and dependencies.

delete node_modules and package-lock.json 

• Install the dependencies.

npm install

At this point, the generator could have maybe overwritten some of your changes. Remember to check the differences with the original source code (this is one of the reasons you should use a versioning system) and, if this is the case, retrofit the changes. Once done, it's time to start the application using the npm run startcommand.

After starting the app, if everything is working fine, that's all and you don't need to do anything else. On the contrary, if you have bugs and nothing really work, recover the original version of the project and try the manual approach.   

           

B. Manually update the project 

Considering that a project generated using the scaffolder is probably customised, its automatic update could not be an option. The following method is more surgical and would request a bit of elbow grease. As an example, I created a new project with the Yeoman generator version 2.1.0 You can find this example in the folder belonging to the 2.2.0 update in the ADF examples update from 2.1.0 to 2.2.0repository.  As you can see, each commit represents a separate step in the upgrade process, which I now describe one by one.

1. Generation of an ADF project using the app generator 2.1.0

Nothing to describe here. In case of our planned modifications, you should have a similar project.

2. Update the package.json

"dependencies": {
  .......
  .......
  "@alfresco/adf-content-services":"2.2.0", 
  "@alfresco/adf-core":"2.2.0", 
  "@alfresco/adf-insights":"2.2.0", 
  "@alfresco/adf-process-services":"2.2.0",
  "alfresco-js-api":"2.2.0",
  "@ngx-translate/core": "9.1.1"
  .......
  .......
}

or if you want a more automatic way you can run this script in your project folder:

#Part 1 dependencies

npm install --save-exact --save alfresco-js-api@2.2.0  \
npm install --save-exact --save @alfresco/adf-content-services@2.2.0 @alfresco/adf-core@2.2.0  @alfresco/adf-insights@2.2.0 @alfresco/adf-process-services@2.2.0 \
npm install --save  @mat-datetimepicker/core @mat-datetimepicker/moment \
npm install --save-exact --save  @angular/animations@5.1.1 @angular/cdk@5.0.1 @angular/common@5.1.1  @angular/compiler@5.1.1 @angular/core@5.1.1  @angular/platform-browser@5.1.1 @angular/router@5.1.1 @angular/flex-layout@2.0.0-beta.12  @angular/forms@5.1.1 @angular/forms@5.1.1 @angular/http@5.1.1 @angular/material@5.0.1 @angular/platform-browser-dynamic@5.1.1
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍npm install --save-exact --save  @ngx-translate/core@9.1.1

#Part 2 Dev dependencies

npm install --save-exact --save-dev @angular-devkit/core@0.0.28 @angular/compiler-cli@5.1.1 typescript@2.6.2
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

3.Clean your old distribution and dependencies

In order to avoid any old node_modules related problem I suggest you :

• delete node_modules and package-lock.json 
• reinstall your dependencies npm install

If everything is working fine: well done! Your project is correctly updated to the new ADF version.

If during the running of your app/test you recieve this error:
Error: Found the synthetic listener @transform.start. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 
you need in your app to import:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
 imports: [
    BrowserAnimationsModule,
    BrowserModule
   ...]
....
...
})

you can find an example of thid import here : app.module.ts

If not, feel free to reply here or contact us on gitter or raising a question in the Application Development Framework space.