Updating an ADF project from version 1.6 to 1.7

[andraspopovics]

In this Tutorial, I would like to help you to update your project created with the ADF Yeoman app generator. Many people have asked on our gitter channel which are the correct steps to upgade from version 1.6 to version 1.7.

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 to execute backup copy of it before to following one of this approach. 
           

1. 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 those steps:

• Update the Yeoman generator to version 1.7.

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

• Run the new yeoman app generator.

yo ng2-alfresco-app

• Clean your old distribution and dependencies.

npm run clean

• 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 start command.

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.   
           

2. 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 1.6. You can find this example here (in the ADF examples repo). As you can see, each commit represents a separate step in the upgrade process, which I now describe one by one.

The components v1.7.0 use Angular v4.2.5 (the latest at the time of writing), so please be sure to update your Angular modules to the latest as a prerequisite step. This includes every module of Angular.

1. The first step was the generation of an ADF project using the components  and alfresco-js-api version 1.6.x.

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

2. Update Alfresco packages   (See this step in 1 commit here.)

Instead of using 1.6.x packages, we want to use the latest 1.7.0 packages. For this we need to update all of the alfresco components and alfresco-js-api in the package.json.

"alfresco-js-api": "1.7.0",

"ng2-activiti-analytics": "1.7.0",

"ng2-activiti-diagrams": "1.7.0",

"ng2-activiti-form": "1.7.0",

"ng2-activiti-processlist": "1.7.0",

"ng2-activiti-tasklist": "1.7.0",

"ng2-alfresco-core": "1.7.0",

"ng2-alfresco-datatable": "1.7.0",

"ng2-alfresco-documentlist": "1.7.0",

"ng2-alfresco-login": "1.7.0",

"ng2-alfresco-search": "1.7.0",

"ng2-alfresco-tag": "1.7.0",

"ng2-alfresco-social": "1.7.0",

"ng2-alfresco-upload": "1.7.0",

"ng2-alfresco-userinfo": "1.7.0",

"ng2-alfresco-viewer": "1.7.0",

"ng2-alfresco-webscript": "1.7.0"

3. Material design   (See this step in 1 commit here.)

To update material design lib to the latest we have to modify the package.json again:

package.json

Update Angular Material version.

"@angular/router": "~4.0.0",

"@angular/compiler-cli": "~4.0.0",

"@angular/material": "2.0.0-beta.8",

"@angular/cdk": "2.0.0-beta.8",

"core-js": "2.4.1",

"reflect-metadata": "0.1.9",

"rxjs": "5.1.0",

4. Wiring DebugAppConfigService  (See this step in 1 commit here.)

By default the app config settings (coming from app.config-prod.json or app.config-dev.json) are supposed to be static, not dynamic. The settings icon in the right top corner of the login page is only for testing and demoing purposes. If you want to change the values of these config entries dynamically with the above mentioned settings panel (for the sake of testing) you need to override the default AppConfigService like this.

Create the debug-app-config.service.ts file in the services directory under the app folder with the following content:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { AppConfigService, StorageService } from 'ng2-alfresco-core';

@Injectable()
export class DebugAppConfigService extends AppConfigService {

    constructor(private storage: StorageService, http: Http) {
        super(http);
    }

    /** @override */
    get<T>(key: string): T {
        if (key === 'ecmHost' || key === 'bpmHost') {
            return <T>(<any>this.storage.getItem(key) || super.get<T>(key));
        }
        return super.get<T>(key);
    }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Modify the app.module.ts file, to use this service instead of the AppConfigService.

...
import { AppConfigService, CoreModule } from 'ng2-alfresco-core';
import { DebugAppConfigService } from './services/debug-app-config.service';
...

@NgModule({
    ...
    providers: [
        { provide: AppConfigService, useClass: DebugAppConfigService }
    ],
    ...
})
export class AppModule { }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

After all these changes, it is suggested to execute the following commands.

• Clean your old distribution and dependencies.

npm run clean

• Install the dependencies.

npm install

That's all! Now you can start again your project, as usual using npm run start.

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

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