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.8 to version 1.9.
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:
Automatic update of the project using the Yeoman Generator.
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.8.
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 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.
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.8. You can find this example in the folder belonging to the 1.9 update in the ADF examplesrepo. As you can see, each commit represents a separate step in the upgrade process, which I now describe one by one.
1. The first step was the generation of an ADF project using the components generator
Nothing to describe here. In case of our planned modifications, you should have a similar project.
2. Update package.json external library
In this month we have updated the @agnular versions and we have also added flex-layout has dependencies
In your package.json:
"@angular/animations": "4.3.6", |
"@angular/common": "4.3.6", |
"@angular/compiler": "4.3.6", |
"@angular/compiler-cli": "4.3.6", |
"@angular/core": "4.3.6", |
"@angular/forms": "4.3.6", |
"@angular/http": "4.3.6", |
"@angular/platform-browser": "4.3.6", |
"@angular/platform-browser-dynamic": "4.3.6", |
"@angular/router": "4.3.6", |
"@angular/cdk": "2.0.0-beta.10", |
"@angular/material": "2.0.0-beta.10", "@angular/flex-layout": "2.0.0-beta.9", |
"zone.js": "0.8.12" |
3. Update Alfresco packages
Instead of using 1.8 packages, we want to use the latest 1.9 packages. For this we need to update all of the alfresco components and alfresco-js-api in the package.json.
| "alfresco-js-api": "1.9.0", |
| "ng2-activiti-analytics": "1.98.0", |
| "ng2-activiti-diagrams": "1.9.0", |
| "ng2-activiti-form": "1.9.0", |
| "ng2-activiti-processlist": "1.9.0", |
| "ng2-activiti-tasklist": "1.9.0", |
| "ng2-alfresco-core": "1.9.0", |
| "ng2-alfresco-datatable": "1.9.0", |
| "ng2-alfresco-documentlist": "1.9.0", |
| "ng2-alfresco-login": "1.9.0", |
| "ng2-alfresco-search": "1.9.0", |
| "ng2-alfresco-tag": "1.9.0", |
| "ng2-alfresco-social": "1.9.0", |
| "ng2-alfresco-upload": "1.9.0", |
| "ng2-alfresco-userinfo": "1.9.0", |
| "ng2-alfresco-viewer": "1.9.0", |
| "ng2-alfresco-webscript": "1.9.0" |
4. Fix import modules errors
To make ADF full compatible with angular-cli we dropped the forRoot() when you import the modules. We also change the name of the userinfo module from UserInfoComponentModule to UserInfoModule.
In your app/app.modules.ts :
@NgModule({
imports: [
BrowserModule,
routing,
CoreModule,
DataTableModule,
SearchModule,
DocumentListModule,
MaterialModule,
UploadModule,
ViewerModule,
ActivitiFormModule,
ActivitiTaskListModule,
ActivitiProcessListModule,
AnalyticsModule,
DiagramsModule,
LoginModule,
UserInfoModule,
Editor3DModule,
TagModule,
ThemePickerModule
],
5. Remove the ViewerService
In your app/components/files/files.component.ts file removes ViewerService.
remove the import:
import { ViewerService } from 'ng2-alfresco-viewer';
Change the showFile method:
showFile(event) {
const entry = event.value.entry;
if (entry && entry.isFile) {
this.router.navigate(['/files', entry.id, 'view']);
}
}
6. Fix about component
In your app/components/about/about.component.ts file removes the row:
this.configFile = this.appConfig.configFile;
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! Your 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.
