From 0b246b8211d3916ad09ca42da6f53ea9c46c6a5f Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Wed, 3 May 2017 13:01:00 +0200
Subject: [PATCH] Speed up build (#1852)

* single build webpack

* fix demo shell test
---
 .gitignore                                    |   1 +
 .travis.yml                                   |  63 +---
 appveyor.yml                                  |  42 +--
 demo-shell-ng2/app/polyfills.ts               |  13 +-
 demo-shell-ng2/app/vendor.ts                  |  25 +-
 demo-shell-ng2/config/helpers.js              |   3 +
 demo-shell-ng2/config/karma.conf.js           |  84 +++--
 demo-shell-ng2/config/webpack.common.js       | 252 ++++++--------
 demo-shell-ng2/config/webpack.dev.js          |  59 +---
 demo-shell-ng2/config/webpack.prod.js         | 135 +++-----
 demo-shell-ng2/config/webpack.test.js         | 107 +++---
 demo-shell-ng2/index.html                     |  12 -
 demo-shell-ng2/package.json                   | 124 ++++---
 demo-shell-ng2/tsconfig.json                  |  33 +-
 demo-shell-ng2/tslint.json                    |   5 +-
 .../config/assets/license_header.txt          |  14 +
 .../assets}/tslint.json                       |   3 -
 .../custom-loaders/file-loader-multi.js       |  70 ++++
 ng2-components/config/helpers.js              |  10 +
 ng2-components/config/karma.conf.js           | 114 +++++++
 ng2-components/config/webpack.build.js        |  49 +++
 ng2-components/config/webpack.common.js       | 122 +++++++
 ng2-components/config/webpack.test.js         |  85 +++++
 .../ng2-activiti-analytics/README.md          |   1 -
 .../ng2-activiti-analytics/demo/package.json  |  28 +-
 .../demo/systemjs.config.js                   |   6 +-
 .../ng2-activiti-analytics/demo/tslint.json   |   6 +-
 .../ng2-activiti-analytics/gulpfile.ts        | 311 ------------------
 .../ng2-activiti-analytics/karma-test-shim.js | 129 +-------
 .../ng2-activiti-analytics/karma.conf.js      | 136 --------
 .../ng2-activiti-analytics/package.json       |  89 ++---
 .../src/assets/analyticsComponent.mock.ts     |   4 +-
 .../analyticsParamsReportComponent.mock.ts    |  28 +-
 .../analytics-generator.component.ts          |   2 -
 ...nalytics-report-heat-map.component.spec.ts |   2 +-
 .../analytics-report-heat-map.component.ts    |   1 -
 .../analytics-report-list.component.ts        |   2 -
 ...lytics-report-parameters.component.spec.ts |  42 ++-
 .../analytics-report-parameters.component.ts  |   6 +-
 .../src/components/analytics.component.ts     |   1 -
 .../widgets/checkbox/checkbox.widget.ts       |   1 -
 .../widgets/date-range/date-range.widget.ts   |   1 -
 .../widgets/dropdown/dropdown.widget.ts       |   1 -
 .../widgets/duration/duration.widget.ts       |   1 -
 .../widgets/number/number.widget.ts           |   1 -
 .../src/services/analytics.service.ts         |  28 +-
 .../ng2-activiti-analytics/tsconfig.json      |   8 +-
 .../ng2-activiti-analytics/tslint.json        | 121 -------
 .../ng2-activiti-analytics/webpack.build.js   |  17 +
 .../ng2-activiti-diagrams/README.md           |   1 -
 .../ng2-activiti-diagrams/demo/package.json   |  28 +-
 .../demo/systemjs.config.js                   |   4 +-
 .../ng2-activiti-diagrams/demo/tslint.json    |   6 +-
 .../ng2-activiti-diagrams/gulpfile.ts         | 310 -----------------
 .../ng2-activiti-diagrams/karma-test-shim.js  | 125 +------
 .../ng2-activiti-diagrams/karma.conf.js       | 131 --------
 .../ng2-activiti-diagrams/package.json        |  89 ++---
 ...diagram-alfresco-publish-task.component.ts |   1 -
 .../diagram-box-publish-task.component.ts     |   1 -
 .../diagram-business-rule-task.component.ts   |   1 -
 .../diagram-camel-task.component.ts           |   1 -
 ...iagram-container-service-task.component.ts |   1 -
 ...ram-google-drive-publish-task.component.ts |   1 -
 .../diagram-manual-task.component.ts          |   1 -
 .../activities/diagram-mule-task.component.ts |   1 -
 .../diagram-receive-task.component.ts         |   1 -
 .../diagram-rest-call-task.component.ts       |   1 -
 .../diagram-script-task.component.ts          |   1 -
 .../activities/diagram-send-task.component.ts |   1 -
 .../diagram-service-task.component.ts         |   1 -
 .../activities/diagram-task.component.ts      |   1 -
 .../activities/diagram-user-task.component.ts |   1 -
 .../diagram-boundary-event.component.ts       |   1 -
 .../diagram-throw-event.component.ts          |   1 -
 .../diagram-sequence-flow.component.ts        |   1 -
 .../src/components/diagram.component.ts       |   2 -
 .../events/diagram-end-event.component.ts     |   1 -
 .../events/diagram-event.component.ts         |   1 -
 .../events/diagram-start-event.component.ts   |   1 -
 .../diagram-event-gateway.component.ts        |   1 -
 .../diagram-exclusive-gateway.component.ts    |   1 -
 .../gateways/diagram-gateway.component.ts     |   1 -
 .../diagram-inclusive-gateway.component.ts    |   1 -
 .../diagram-parallel-gateway.component.ts     |   1 -
 .../diagram-container-icon-event.component.ts |   1 -
 ...am-icon-alfresco-publish-task.component.ts |   1 -
 ...diagram-icon-box-publish-task.component.ts |   1 -
 ...agram-icon-business-rule-task.component.ts |   1 -
 .../diagram-icon-camel-task.component.ts      |   1 -
 .../icons/diagram-icon-error.component.ts     |   1 -
 ...con-google-drive-publish-task.component.ts |   1 -
 .../diagram-icon-manual-task.component.ts     |   1 -
 .../icons/diagram-icon-message.component.ts   |   1 -
 .../icons/diagram-icon-mule-task.component.ts |   1 -
 .../diagram-icon-receive-task.component.ts    |   1 -
 .../diagram-icon-rest-call-task.component.ts  |   1 -
 .../diagram-icon-script-task.component.ts     |   1 -
 .../icons/diagram-icon-send-task.component.ts |   1 -
 .../diagram-icon-service-task.component.ts    |   1 -
 .../icons/diagram-icon-signal.component.ts    |   1 -
 .../icons/diagram-icon-timer.component.ts     |   1 -
 .../icons/diagram-icon-user-task.component.ts |   1 -
 ...m-intermediate-catching-event.component.ts |   1 -
 .../diagram-event-subprocess.component.ts     |   1 -
 .../diagram-subprocess.component.ts           |   1 -
 .../swimlanes/diagram-lane.component.ts       |   1 -
 .../swimlanes/diagram-lanes.component.ts      |   1 -
 .../swimlanes/diagram-pool.component.ts       |   1 -
 .../swimlanes/diagram-pools.component.ts      |   1 -
 .../tooltip/diagram-tooltip.component.ts      |   1 -
 .../ng2-activiti-diagrams/tsconfig.json       |   8 +-
 .../ng2-activiti-diagrams/tslint.json         | 121 -------
 .../ng2-activiti-diagrams/webpack.build.js    |  17 +
 ng2-components/ng2-activiti-form/README.md    |   1 -
 .../ng2-activiti-form/demo/package.json       |  28 +-
 .../ng2-activiti-form/demo/systemjs.config.js |   4 +-
 .../ng2-activiti-form/demo/tslint.json        |   6 +-
 ng2-components/ng2-activiti-form/gulpfile.ts  | 310 -----------------
 .../ng2-activiti-form/karma-test-shim.js      | 126 +------
 .../ng2-activiti-form/karma.conf.js           | 134 --------
 ng2-components/ng2-activiti-form/package.json |  82 ++---
 .../components/activiti-content.component.ts  |  21 +-
 .../src/components/activiti-form.component.ts |   8 +-
 .../activiti-start-form.component.ts          |   1 -
 .../widgets/amount/amount.widget.ts           |   1 -
 .../widgets/attach/attach.widget.spec.ts      |  41 +--
 .../widgets/attach/attach.widget.ts           |   8 +-
 .../widgets/checkbox/checkbox.widget.ts       |   1 -
 .../widgets/container/container.widget.ts     |   1 -
 .../components/widgets/date/date.widget.ts    |   1 -
 .../display-text/display-text.widget.ts       |   1 -
 .../display-value.widget.spec.ts              |  14 +-
 .../display-value/display-value.widget.ts     |  17 +-
 .../widgets/dropdown/dropdown.widget.ts       |   1 -
 .../dynamic-table/dynamic-table.widget.ts     |   1 -
 .../editors/boolean/boolean.editor.ts         |   1 -
 .../dynamic-table/editors/date/date.editor.ts |   1 -
 .../editors/dropdown/dropdown.editor.ts       |   1 -
 .../dynamic-table/editors/row.editor.ts       |   1 -
 .../dynamic-table/editors/text/text.editor.ts |   1 -
 .../functional-group.widget.ts                |   1 -
 .../widgets/hyperlink/hyperlink.widget.ts     |   1 -
 .../multiline-text/multiline-text.widget.ts   |   1 -
 .../widgets/number/number.widget.ts           |   1 -
 .../widgets/people/people.widget.ts           |   1 -
 .../radio-buttons/radio-buttons.widget.ts     |   1 -
 .../components/widgets/tabs/tabs.widget.ts    |   1 -
 .../components/widgets/text/text.widget.ts    |   1 -
 .../widgets/typeahead/typeahead.widget.ts     |   1 -
 .../widgets/upload/upload.widget.ts           |   4 +-
 .../assets/widget-visibility.service.mock.ts  |   8 +-
 .../src/services/form.service.ts              |  24 +-
 .../ng2-activiti-form/tsconfig.json           |   8 +-
 .../ng2-activiti-form/webpack.build.js        |  17 +
 .../ng2-activiti-processlist/README.md        |   1 -
 .../demo/package.json                         |  28 +-
 .../demo/systemjs.config.js                   |  10 +-
 .../ng2-activiti-processlist/demo/tslint.json |   8 +-
 .../ng2-activiti-processlist/gulpfile.ts      | 307 -----------------
 .../karma-test-shim.js                        | 130 +-------
 .../ng2-activiti-processlist/karma.conf.js    | 138 --------
 .../ng2-activiti-processlist/package.json     |  82 ++---
 .../activiti-process-instances-list.mock.ts   |   4 +-
 .../src/assets/activiti-process.model.mock.ts |   4 +-
 .../assets/activiti-process.service.mock.ts   |  16 +-
 .../activiti-start-process.component.mock.ts  |   8 +-
 .../src/assets/task-details.mock.ts           |   8 +-
 .../components/activiti-filters.component.ts  |   4 -
 .../activiti-process-comments.component.ts    |   1 -
 ...viti-process-instance-details.component.ts |   6 +-
 ...iviti-process-instance-header.component.ts |   1 -
 ...tiviti-process-instance-tasks.component.ts |  10 +-
 ...ti-process-instance-variables.component.ts |   1 -
 .../activiti-processlist.component.ts         |   1 -
 .../activiti-start-process.component.ts       |   1 -
 .../src/services/activiti-process.service.ts  |   2 +-
 .../ng2-activiti-processlist/tsconfig.json    |   8 +-
 .../ng2-activiti-processlist/tslint.json      | 121 -------
 .../ng2-activiti-processlist/webpack.build.js |  17 +
 .../ng2-activiti-tasklist/README.md           |   1 -
 .../ng2-activiti-tasklist/demo/package.json   |  28 +-
 .../demo/systemjs.config.js                   |   8 +-
 .../ng2-activiti-tasklist/demo/tslint.json    |   8 +-
 .../ng2-activiti-tasklist/gulpfile.ts         | 308 -----------------
 .../ng2-activiti-tasklist/karma-test-shim.js  | 128 +------
 .../ng2-activiti-tasklist/karma.conf.js       | 134 --------
 .../ng2-activiti-tasklist/package.json        |  87 ++---
 .../src/assets/activiti-apps.mock.ts          |   6 +-
 .../src/assets/task-details.component.mock.ts |   2 +-
 .../src/assets/task-details.mock.ts           |   8 +-
 .../src/assets/tasklist-service.mock.ts       |  34 +-
 .../src/components/activiti-apps.component.ts |   1 -
 .../activiti-checklist.component.ts           |  16 +-
 .../components/activiti-comments.component.ts |   1 -
 .../components/activiti-filters.component.ts  |   5 -
 .../activiti-people-search.component.ts       |   5 +-
 .../components/activiti-people.component.ts   |   7 +-
 .../activiti-start-task.component.ts          |  11 +-
 .../activiti-task-details.component.ts        |   6 +-
 .../activiti-task-header.component.ts         |   1 -
 .../components/activiti-tasklist.component.ts |   3 -
 .../ng2-activiti-tasklist/tsconfig.json       |   8 +-
 .../ng2-activiti-tasklist/tslint.json         | 121 -------
 .../ng2-activiti-tasklist/webpack.build.js    |  17 +
 ng2-components/ng2-alfresco-core/README.md    |   1 -
 ng2-components/ng2-alfresco-core/gulpfile.ts  | 308 -----------------
 .../ng2-alfresco-core/karma-test-shim.js      | 120 +------
 .../ng2-alfresco-core/karma.conf.js           | 123 -------
 ng2-components/ng2-alfresco-core/package.json |  91 ++---
 .../src/assets/renditionsService.mock.ts      |   6 +-
 .../collapsable/accordion-group.component.ts  |   1 -
 .../ng2-alfresco-core/tsconfig.json           |   8 +-
 ng2-components/ng2-alfresco-core/tslint.json  | 121 -------
 .../ng2-alfresco-core/webpack.build.js        |  17 +
 .../ng2-alfresco-datatable/README.md          |   1 -
 .../ng2-alfresco-datatable/demo/package.json  |  28 +-
 .../demo/systemjs.config.js                   |   4 +-
 .../ng2-alfresco-datatable/demo/tslint.json   |   8 +-
 .../ng2-alfresco-datatable/gulpfile.ts        | 307 -----------------
 .../ng2-alfresco-datatable/karma-test-shim.js | 122 +------
 .../ng2-alfresco-datatable/karma.conf.js      | 127 -------
 .../ng2-alfresco-datatable/package.json       |  87 ++---
 .../datatable/datatable.component.spec.ts     |   2 +-
 .../datatable/datatable.component.ts          |   1 -
 .../pagination/pagination.component.ts        |   1 -
 .../ng2-alfresco-datatable/tsconfig.json      |   8 +-
 .../ng2-alfresco-datatable/tslint.json        | 121 -------
 .../ng2-alfresco-datatable/webpack.build.js   |  17 +
 .../ng2-alfresco-documentlist/README.md       |   1 -
 .../demo/package.json                         |  28 +-
 .../demo/systemjs.config.js                   |  10 +-
 .../demo/tslint.json                          |   6 +-
 .../ng2-alfresco-documentlist/gulpfile.ts     | 307 -----------------
 .../karma-test-shim.js                        | 124 +------
 .../ng2-alfresco-documentlist/karma.conf.js   | 132 --------
 .../ng2-alfresco-documentlist/package.json    |  87 ++---
 .../src/assets/document-list.service.mock.ts  |   2 +-
 .../breadcrumb/breadcrumb.component.ts        |   1 -
 .../src/components/document-list.component.ts |  11 +-
 .../document-menu-action.component.ts         |   3 -
 .../src/data/share-datatable-adapter.spec.ts  |  78 +++--
 .../src/data/share-datatable-adapter.ts       |   3 +-
 .../ng2-alfresco-documentlist/tsconfig.json   |   8 +-
 .../ng2-alfresco-documentlist/tslint.json     | 121 -------
 .../webpack.build.js                          |  17 +
 ng2-components/ng2-alfresco-login/README.md   |   1 -
 .../ng2-alfresco-login/demo/package.json      |  28 +-
 .../demo/systemjs.config.js                   |   4 +-
 .../ng2-alfresco-login/demo/tslint.json       |   6 +-
 ng2-components/ng2-alfresco-login/gulpfile.ts | 307 -----------------
 .../ng2-alfresco-login/karma-test-shim.js     | 122 +------
 .../ng2-alfresco-login/karma.conf.js          | 131 --------
 .../ng2-alfresco-login/package.json           |  86 ++---
 .../components/alfresco-login.component.ts    |   8 +-
 .../ng2-alfresco-login/tsconfig.json          |   8 +-
 ng2-components/ng2-alfresco-login/tslint.json | 121 -------
 .../ng2-alfresco-login/webpack.build.js       |  17 +
 ng2-components/ng2-alfresco-search/README.md  |   1 -
 .../ng2-alfresco-search/demo/package.json     |  28 +-
 .../demo/systemjs.config.js                   |   8 +-
 .../ng2-alfresco-search/demo/tslint.json      |   8 +-
 .../ng2-alfresco-search/gulpfile.ts           | 307 -----------------
 .../ng2-alfresco-search/karma-test-shim.js    | 126 +------
 .../ng2-alfresco-search/karma.conf.js         | 136 --------
 .../ng2-alfresco-search/package.json          |  85 ++---
 .../assets/alfresco-search.component.mock.ts  |  10 +-
 .../assets/alfresco-search.service.mock.ts    |   6 +-
 .../alfresco-search-autocomplete.component.ts |   7 +-
 .../alfresco-search-control.component.ts      |   1 -
 .../components/alfresco-search.component.ts   |   5 +-
 .../ng2-alfresco-search/tsconfig.json         |   8 +-
 .../ng2-alfresco-search/tslint.json           | 121 -------
 .../ng2-alfresco-search/webpack.build.js      |  17 +
 .../ng2-alfresco-social/demo/package.json     |  28 +-
 .../demo/systemjs.config.js                   |   4 +-
 .../ng2-alfresco-social/gulpfile.ts           | 307 -----------------
 .../ng2-alfresco-social/karma-test-shim.js    | 122 +------
 .../ng2-alfresco-social/karma.conf.js         | 127 -------
 .../ng2-alfresco-social/package.json          |  28 +-
 .../ng2-alfresco-social/tsconfig.json         |   8 +-
 .../ng2-alfresco-social/tslint.json           | 121 -------
 .../ng2-alfresco-social/webpack.build.js      |  17 +
 ng2-components/ng2-alfresco-tag/README.md     |   1 -
 .../ng2-alfresco-tag/demo/package.json        |  28 +-
 .../ng2-alfresco-tag/demo/systemjs.config.js  |   4 +-
 .../ng2-alfresco-tag/demo/tslint.json         |   6 +-
 ng2-components/ng2-alfresco-tag/gulpfile.ts   | 307 -----------------
 .../ng2-alfresco-tag/karma-test-shim.js       | 122 +------
 ng2-components/ng2-alfresco-tag/karma.conf.js | 127 -------
 ng2-components/ng2-alfresco-tag/package.json  |  84 ++---
 .../src/components/tag-actions.component.ts   |   1 -
 .../src/components/tag-list.component.ts      |   1 -
 .../src/components/tag-node-list.component.ts |   1 -
 ng2-components/ng2-alfresco-tag/tsconfig.json |   8 +-
 ng2-components/ng2-alfresco-tag/tslint.json   | 121 -------
 .../ng2-alfresco-tag/webpack.build.js         |  17 +
 ng2-components/ng2-alfresco-upload/README.md  |   1 -
 .../ng2-alfresco-upload/demo/package.json     |  28 +-
 .../demo/systemjs.config.js                   |   4 +-
 .../ng2-alfresco-upload/demo/tslint.json      |   6 +-
 .../ng2-alfresco-upload/gulpfile.ts           | 307 -----------------
 .../ng2-alfresco-upload/karma-test-shim.js    | 122 +------
 .../ng2-alfresco-upload/karma.conf.js         | 128 -------
 .../ng2-alfresco-upload/package.json          |  88 ++---
 .../file-uploading-dialog.component.ts        |   1 -
 .../file-uploading-list.component.ts          |   1 -
 .../src/components/upload-button.component.ts |   1 -
 .../components/upload-drag-area.component.ts  |   1 -
 .../ng2-alfresco-upload/tsconfig.json         |   8 +-
 .../ng2-alfresco-upload/tslint.json           | 121 -------
 .../ng2-alfresco-upload/webpack.build.js      |  17 +
 .../ng2-alfresco-userinfo/README.md           |   1 -
 .../ng2-alfresco-userinfo/demo/package.json   |  28 +-
 .../demo/systemjs.config.js                   |   6 +-
 .../ng2-alfresco-userinfo/demo/tslint.json    |   2 +-
 .../ng2-alfresco-userinfo/gulpfile.ts         | 307 -----------------
 .../ng2-alfresco-userinfo/karma-test-shim.js  | 122 +------
 .../ng2-alfresco-userinfo/karma.conf.js       | 135 --------
 .../ng2-alfresco-userinfo/package.json        |  86 ++---
 .../src/assets/fake-bpm-user.service.mock.ts  |   6 +-
 .../src/components/user-info.component.ts     |  11 +-
 .../ng2-alfresco-userinfo/tsconfig.json       |   8 +-
 .../ng2-alfresco-userinfo/tslint.json         | 121 -------
 .../ng2-alfresco-userinfo/webpack.build.js    |  17 +
 ng2-components/ng2-alfresco-viewer/README.md  |   1 -
 .../ng2-alfresco-viewer/demo/package.json     |  28 +-
 .../demo/systemjs.config.js                   |   4 +-
 .../ng2-alfresco-viewer/demo/tslint.json      |  11 +-
 .../ng2-alfresco-viewer/gulpfile.ts           | 307 -----------------
 .../ng2-alfresco-viewer/karma-test-shim.js    | 122 +------
 .../ng2-alfresco-viewer/karma.conf.js         | 134 --------
 .../ng2-alfresco-viewer/package.json          |  88 ++---
 .../src/components/imgViewer.component.ts     |   1 -
 .../src/components/mediaPlayer.component.ts   |   1 -
 .../notSupportedFormat.component.ts           |   1 -
 .../components/pdfViewer.component.spec.ts    |   8 +-
 .../src/components/pdfViewer.component.ts     |   1 -
 .../components/pdfViewerHost.component.css    |   1 -
 .../src/components/viewer.component.ts        |   7 +-
 .../ng2-alfresco-viewer/tsconfig.json         |   8 +-
 .../ng2-alfresco-viewer/tslint.json           | 121 -------
 .../ng2-alfresco-viewer/webpack.build.js      |  17 +
 .../ng2-alfresco-webscript/README.md          |   1 -
 .../ng2-alfresco-webscript/demo/package.json  |  28 +-
 .../demo/systemjs.config.js                   |   8 +-
 .../ng2-alfresco-webscript/demo/tslint.json   |   8 +-
 .../ng2-alfresco-webscript/gulpfile.ts        | 307 -----------------
 .../ng2-alfresco-webscript/karma-test-shim.js | 124 +------
 .../ng2-alfresco-webscript/karma.conf.js      | 132 --------
 .../ng2-alfresco-webscript/package.json       |  90 ++---
 .../ng2-alfresco-webscript/tsconfig.json      |   8 +-
 .../ng2-alfresco-webscript/tslint.json        | 121 -------
 .../ng2-alfresco-webscript/webpack.build.js   |  17 +
 ng2-components/package-base.json              |  83 +++++
 ng2-components/package.json                   | 178 ++++++++++
 ng2-components/update.sh                      |  39 ---
 scripts/README.md                             |  13 -
 scripts/npm-build-all.sh                      |  56 +---
 scripts/npm-clean.sh                          |   6 +
 scripts/npm-link-all-components-demo.sh       |  33 --
 scripts/npm-link-demo-shell.sh                |  56 ----
 scripts/start.sh                              |  17 -
 362 files changed, 2684 insertions(+), 13104 deletions(-)
 create mode 100644 ng2-components/config/assets/license_header.txt
 rename ng2-components/{ng2-activiti-form => config/assets}/tslint.json (96%)
 create mode 100644 ng2-components/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/config/helpers.js
 create mode 100644 ng2-components/config/karma.conf.js
 create mode 100644 ng2-components/config/webpack.build.js
 create mode 100644 ng2-components/config/webpack.common.js
 create mode 100644 ng2-components/config/webpack.test.js
 delete mode 100755 ng2-components/ng2-activiti-analytics/gulpfile.ts
 delete mode 100644 ng2-components/ng2-activiti-analytics/karma.conf.js
 delete mode 100644 ng2-components/ng2-activiti-analytics/tslint.json
 create mode 100644 ng2-components/ng2-activiti-analytics/webpack.build.js
 delete mode 100755 ng2-components/ng2-activiti-diagrams/gulpfile.ts
 delete mode 100644 ng2-components/ng2-activiti-diagrams/karma.conf.js
 delete mode 100644 ng2-components/ng2-activiti-diagrams/tslint.json
 create mode 100644 ng2-components/ng2-activiti-diagrams/webpack.build.js
 delete mode 100755 ng2-components/ng2-activiti-form/gulpfile.ts
 delete mode 100644 ng2-components/ng2-activiti-form/karma.conf.js
 create mode 100644 ng2-components/ng2-activiti-form/webpack.build.js
 delete mode 100755 ng2-components/ng2-activiti-processlist/gulpfile.ts
 delete mode 100644 ng2-components/ng2-activiti-processlist/karma.conf.js
 delete mode 100644 ng2-components/ng2-activiti-processlist/tslint.json
 create mode 100644 ng2-components/ng2-activiti-processlist/webpack.build.js
 delete mode 100755 ng2-components/ng2-activiti-tasklist/gulpfile.ts
 delete mode 100644 ng2-components/ng2-activiti-tasklist/karma.conf.js
 delete mode 100644 ng2-components/ng2-activiti-tasklist/tslint.json
 create mode 100644 ng2-components/ng2-activiti-tasklist/webpack.build.js
 delete mode 100755 ng2-components/ng2-alfresco-core/gulpfile.ts
 delete mode 100644 ng2-components/ng2-alfresco-core/karma.conf.js
 delete mode 100644 ng2-components/ng2-alfresco-core/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-core/webpack.build.js
 delete mode 100755 ng2-components/ng2-alfresco-datatable/gulpfile.ts
 delete mode 100644 ng2-components/ng2-alfresco-datatable/karma.conf.js
 delete mode 100644 ng2-components/ng2-alfresco-datatable/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-datatable/webpack.build.js
 delete mode 100755 ng2-components/ng2-alfresco-documentlist/gulpfile.ts
 delete mode 100644 ng2-components/ng2-alfresco-documentlist/karma.conf.js
 delete mode 100644 ng2-components/ng2-alfresco-documentlist/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-documentlist/webpack.build.js
 delete mode 100755 ng2-components/ng2-alfresco-login/gulpfile.ts
 delete mode 100644 ng2-components/ng2-alfresco-login/karma.conf.js
 delete mode 100644 ng2-components/ng2-alfresco-login/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-login/webpack.build.js
 delete mode 100755 ng2-components/ng2-alfresco-search/gulpfile.ts
 delete mode 100644 ng2-components/ng2-alfresco-search/karma.conf.js
 delete mode 100644 ng2-components/ng2-alfresco-search/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-search/webpack.build.js
 delete mode 100755 ng2-components/ng2-alfresco-social/gulpfile.ts
 delete mode 100644 ng2-components/ng2-alfresco-social/karma.conf.js
 delete mode 100644 ng2-components/ng2-alfresco-social/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-social/webpack.build.js
 delete mode 100755 ng2-components/ng2-alfresco-tag/gulpfile.ts
 delete mode 100644 ng2-components/ng2-alfresco-tag/karma.conf.js
 delete mode 100644 ng2-components/ng2-alfresco-tag/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-tag/webpack.build.js
 delete mode 100755 ng2-components/ng2-alfresco-upload/gulpfile.ts
 delete mode 100644 ng2-components/ng2-alfresco-upload/karma.conf.js
 delete mode 100644 ng2-components/ng2-alfresco-upload/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-upload/webpack.build.js
 delete mode 100755 ng2-components/ng2-alfresco-userinfo/gulpfile.ts
 delete mode 100644 ng2-components/ng2-alfresco-userinfo/karma.conf.js
 delete mode 100644 ng2-components/ng2-alfresco-userinfo/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-userinfo/webpack.build.js
 delete mode 100755 ng2-components/ng2-alfresco-viewer/gulpfile.ts
 delete mode 100644 ng2-components/ng2-alfresco-viewer/karma.conf.js
 delete mode 100644 ng2-components/ng2-alfresco-viewer/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-viewer/webpack.build.js
 delete mode 100755 ng2-components/ng2-alfresco-webscript/gulpfile.ts
 delete mode 100644 ng2-components/ng2-alfresco-webscript/karma.conf.js
 delete mode 100644 ng2-components/ng2-alfresco-webscript/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-webscript/webpack.build.js
 create mode 100644 ng2-components/package-base.json
 create mode 100644 ng2-components/package.json
 delete mode 100755 ng2-components/update.sh
 delete mode 100755 scripts/npm-link-all-components-demo.sh
 delete mode 100755 scripts/npm-link-demo-shell.sh

diff --git a/.gitignore b/.gitignore
index 3185b6b26f..96a34ad337 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ ng2-components/ng2-alfresco-userinfo-old/src/services/bpm-user.service.spec.ts
 ng2-components/ng2-alfresco-userinfo-old/src/services/ecm-user.service.spec.ts
 src/environments/
 /ng2-components/ng2-example-webpack/
+/ng2-components/config/coverage/
diff --git a/.travis.yml b/.travis.yml
index d1a00422a2..69af6b64e7 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -10,48 +10,17 @@ before_install:
 
 env:
   matrix:
-    - MODULE=ng2-alfresco-core
-    - MODULE=ng2-alfresco-datatable
-    - MODULE=ng2-alfresco-documentlist
-    - MODULE=ng2-alfresco-login
-    - MODULE=ng2-alfresco-search
-    - MODULE=ng2-alfresco-upload
-    - MODULE=ng2-alfresco-viewer
-    - MODULE=ng2-alfresco-webscript
-    - MODULE=ng2-alfresco-tag
-    - MODULE=ng2-activiti-form
-    - MODULE=ng2-activiti-tasklist
-    - MODULE=ng2-activiti-processlist
-    - MODULE=ng2-activiti-diagrams
-    - MODULE=ng2-activiti-analytics
-    - MODULE=ng2-alfresco-userinfo
-    - MODULE=ng2-alfresco-social
+    - MODULE=ng2-components
+    - MODULE=ng2-demo-shell
 
-before_script:
-  - if ([ "$MODULE" != "ng2-alfresco-core" ]); then
-        (cd ng2-components/ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
+script:
+  - if ([ "$MODULE" == "ng2-components" ]); then
+        (./scripts/npm-build-all.sh -t;);
     fi
-  - if ([ "$MODULE" == "ng2-alfresco-documentlist" ] || [ "$MODULE" == "ng2-alfresco-webscript" ] || [ "$MODULE" == "ng2-activiti-processlist" ] || [ "$MODULE" == "ng2-activiti-tasklist" ]); then
-        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
+  - if ([ "$MODULE" == "ng2-demo-shell" ]); then
+        (cd demo-shell-ng2 && npm install && npm run test || exit 1;);
     fi
-  - if ([ "$MODULE" == "ng2-activiti-tasklist" ] || [ "$MODULE" == "ng2-activiti-processlist" ]); then
-        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-        (cd ng2-components/ng2-activiti-form; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-    fi
-  - if ([ "$MODULE" == "ng2-activiti-processlist" ]); then
-        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-        (cd ng2-components/ng2-activiti-form; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-        (cd ng2-components/ng2-activiti-tasklist; npm link ng2-alfresco-core; npm link ng2-alfresco-datatable; npm link ng2-activiti-form; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-    fi
-  - if ([ "$MODULE" == "ng2-activiti-analytics" ]); then
-        (cd ng2-components/ng2-activiti-diagrams; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-    fi
-  - if ([ "$MODULE" == "ng2-alfresco-search" ]); then
-        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-        (cd ng2-components/ng2-alfresco-documentlist; npm link ng2-alfresco-core; npm link ng2-alfresco-datatable; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-    fi
-  - cd ng2-components/$MODULE;
-script: npm install && npm run travis && npm run test
+
 # Send coverage data to Coveralls
 after_success:
   bash <(curl -s https://codecov.io/bash) -X gcov
@@ -61,18 +30,4 @@ cache:
   - ./node_modules/material-design-lite
   - ./node_modules/material-design-icons
   - demo-shell-ng2/node_modules
-  - ng2-components/ng2-activiti-form/node_modules
-  - ng2-components/ng2-activiti-processlist/node_modules
-  - ng2-components/ng2-activiti-tasklist/node_modules
-  - ng2-components/ng2-alfresco-core/node_modules
-  - ng2-components/ng2-alfresco-datatable/node_modules
-  - ng2-components/ng2-alfresco-documentlist/node_modules
-  - ng2-components/ng2-alfresco-login/node_modules
-  - ng2-components/ng2-alfresco-search/node_modules
-  - ng2-components/ng2-alfresco-upload/node_modules
-  - ng2-components/ng2-alfresco-viewer/node_modules
-  - ng2-components/ng2-alfresco-webscript/node_modules
-  - ng2-components/ng2-alfresco-tag/node_modules
-  - ng2-components/ng2-activiti-analytics/node_modules
-  - ng2-components/ng2-alfresco-userinfo/node_modules
-  - ng2-components/ng2-activiti-diagrams/node_modules
+  - ng2-components/node_modules
diff --git a/appveyor.yml b/appveyor.yml
index 2e00efed22..74bffe5fad 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -9,50 +9,16 @@ environment:
   nodejs_version: "5"
 
   matrix:
-  - COMPONENT_NAME: ng2-alfresco-core
-  - COMPONENT_NAME: ng2-alfresco-datatable
-  - COMPONENT_NAME: ng2-alfresco-documentlist
-  - COMPONENT_NAME: ng2-alfresco-login
-  - COMPONENT_NAME: ng2-alfresco-search
-  - COMPONENT_NAME: ng2-alfresco-upload
-  - COMPONENT_NAME: ng2-alfresco-viewer
-  - COMPONENT_NAME: ng2-alfresco-tag
-  - COMPONENT_NAME: ng2-alfresco-webscript
-  - COMPONENT_NAME: ng2-activiti-form
-  - COMPONENT_NAME: ng2-activiti-tasklist
-  - COMPONENT_NAME: ng2-activiti-processlist
-  - COMPONENT_NAME: ng2-activiti-diagrams
-  - COMPONENT_NAME: ng2-activiti-analytics
-  - COMPONENT_NAME: ng2-alfresco-userinfo
-  - COMPONENT_NAME: ng2-alfresco-social
+  - COMPONENT_NAME: ng2-components
+  - COMPONENT_NAME: ng2-demo-shell
 
 # Install scripts. (runs after repo cloning)
 install:
   # Get the latest stable version of Node.js or io.js
   - ps: Install-Product node $env:nodejs_version
   # install module
-  - IF %COMPONENT_NAME% NEQ ng2-alfresco-core (cd ng2-components/ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-alfresco-documentlist (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-alfresco-search (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-alfresco-search (cd ng2-components/ng2-alfresco-documentlist && npm link ng2-alfresco-core && npm link ng2-alfresco-datatable && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-processlist (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-processlist (cd ng2-components/ng2-activiti-form && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-processlist (cd ng2-components/ng2-activiti-tasklist && npm link ng2-alfresco-core && npm link ng2-alfresco-datatable && npm link ng2-activiti-form && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-tasklist (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-tasklist (cd ng2-components/ng2-activiti-form && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-alfresco-webscript (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-analytics (cd ng2-components/ng2-activiti-diagrams && npm link link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - cd ng2-components/%COMPONENT_NAME%
-  - npm run travis
-
-# Post-install test scripts.
-test_script:
-  - npm install
-  # Output useful info for debugging.
-  - node --version
-  - npm --version
-  # run tests
-  - npm test
+  - IF %COMPONENT_NAME% EQU ng2-components (./scripts/npm-build-all.sh -t)
+  - IF %COMPONENT_NAME% EQU ng2-demo-shell (cd demo-shell-ng2 && npm install && npm run test || exit 1)
 
 # Don't actually build.
 build: off
diff --git a/demo-shell-ng2/app/polyfills.ts b/demo-shell-ng2/app/polyfills.ts
index d5be0fad92..541adc72dc 100644
--- a/demo-shell-ng2/app/polyfills.ts
+++ b/demo-shell-ng2/app/polyfills.ts
@@ -1,16 +1,17 @@
 import 'core-js/es6';
 import 'core-js/es7/reflect';
+import 'intl';
 
-// IE 8-11
-require('zone.js/dist/zone');
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
 
 if (process.env.ENV === 'production') {
-  // Production
+    // Production
 
 } else {
-  // Development
+    // Development
 
-  Error['stackTraceLimit'] = Infinity;
+    Error['stackTraceLimit'] = Infinity;
 
-  require('zone.js/dist/long-stack-trace-zone');
+    require('zone.js/dist/long-stack-trace-zone');
 }
diff --git a/demo-shell-ng2/app/vendor.ts b/demo-shell-ng2/app/vendor.ts
index 91d7764380..9883f4891e 100644
--- a/demo-shell-ng2/app/vendor.ts
+++ b/demo-shell-ng2/app/vendor.ts
@@ -32,39 +32,44 @@ import 'ng2-alfresco-webscript';
 import 'ng2-alfresco-userinfo';
 
 // Polyfill(s) for dialogs
-require('script!dialog-polyfill/dialog-polyfill');
+require('script-loader!dialog-polyfill/dialog-polyfill');
 import 'dialog-polyfill/dialog-polyfill.css';
 
 // Flags
 import 'flag-icon-css/css/flag-icon.min.css';
 
-import '../public/css/app.css';
-import '../public/css/muli-font.css';
-
 // Load the Angular Material 2 stylesheet
 import '../public/css/angular-material.css';
 
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+import '../public/css/app.css';
+import '../public/css/muli-font.css';
+
 import 'ng2-activiti-form/stencils/runtime.ng1';
 import 'ng2-activiti-form/stencils/runtime.adf';
 
 import 'ng2-charts';
 import 'chart.js';
-require('script!raphael/raphael.min.js');
+require('script-loader!raphael/raphael.min.js');
 
-require('script!moment/min/moment.min.js');
+require('script-loader!moment/min/moment.min.js');
 
 import 'md-date-time-picker/dist/css/mdDateTimePicker.css';
-require('script!md-date-time-picker/dist/js/mdDateTimePicker.min.js');
-require('script!md-date-time-picker/dist/js/draggabilly.pkgd.min.js');
+require('script-loader!md-date-time-picker/dist/js/mdDateTimePicker.min.js');
+require('script-loader!md-date-time-picker/dist/js/draggabilly.pkgd.min.js');
 
 require('pdfjs-dist/web/compatibility.js');
 
 // Setting worker path to worker bundle.
 let pdfjsLib = require('pdfjs-dist');
 if (process.env.ENV === 'production') {
-  pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
+    pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
 } else {
-  pdfjsLib.PDFJS.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js';
+    pdfjsLib.PDFJS.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js';
 }
 
 require('pdfjs-dist/web/pdf_viewer.js');
diff --git a/demo-shell-ng2/config/helpers.js b/demo-shell-ng2/config/helpers.js
index 15dc4a5a46..a11fa771d6 100644
--- a/demo-shell-ng2/config/helpers.js
+++ b/demo-shell-ng2/config/helpers.js
@@ -1,7 +1,10 @@
 var path = require('path');
+
 var _root = path.resolve(__dirname, '..');
+
 function root(args) {
   args = Array.prototype.slice.call(arguments, 0);
   return path.join.apply(path, [_root].concat(args));
 }
+
 exports.root = root;
diff --git a/demo-shell-ng2/config/karma.conf.js b/demo-shell-ng2/config/karma.conf.js
index c3b4a58f9e..ae013cbe5e 100644
--- a/demo-shell-ng2/config/karma.conf.js
+++ b/demo-shell-ng2/config/karma.conf.js
@@ -1,37 +1,71 @@
 var webpackConfig = require('./webpack.test');
 
 module.exports = function (config) {
-  var _config = {
-    basePath: '',
+    var _config = {
+        basePath: '',
 
-    frameworks: ['jasmine'],
+        frameworks: ['jasmine'],
 
-    files: [
-      { pattern: './config/karma-test-shim.js', watched: false }
-    ],
+        files: [
+            { pattern: './config/karma-test-shim.js', watched: false }
+        ],
 
-    preprocessors: {
-      './config/karma-test-shim.js': ['webpack', 'sourcemap']
-    },
+        preprocessors: {
+            './config/karma-test-shim.js': ['webpack', 'sourcemap']
+        },
 
-    webpack: webpackConfig,
+        webpack: webpackConfig,
 
-    webpackMiddleware: {
-      stats: 'errors-only'
-    },
+        webpackMiddleware: {
+            stats: 'errors-only'
+        },
 
-    webpackServer: {
-      noInfo: true
-    },
+        port: 9876,
 
-    reporters: ['mocha'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: false,
-    browsers: ['Chrome'],
-    singleRun: true
-  };
+        // level of logging
+        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+        logLevel: config.LOG_INFO,
 
-  config.set(_config);
+        colors: true,
+
+        autoWatch: true,
+
+        captureTimeout: 180000,
+        browserDisconnectTimeout: 180000,
+        browserDisconnectTolerance: 3,
+        browserNoActivityTimeout: 300000,
+
+        browsers: ['Chrome'],
+
+        customLaunchers: {
+            Chrome_travis_ci: {
+                base: 'Chrome',
+                flags: ['--no-sandbox']
+            }
+        },
+
+        // Karma plugins loaded
+        plugins: [
+            require('../node_modules/karma-jasmine'),
+            require('../node_modules/karma-coverage'),
+            require('../node_modules/karma-sourcemap-loader'),
+            require('../node_modules/karma-chrome-launcher'),
+            require('../node_modules/karma-mocha-reporter'),
+            require('../node_modules/karma-webpack'),
+            require('../node_modules/karma-jasmine-html-reporter')
+        ],
+
+        webpackServer: {
+            noInfo: true
+        },
+
+        reporters: ['mocha']
+
+    };
+
+    if (process.env.TRAVIS) {
+        config.browsers = ['Chrome_travis_ci'];
+    }
+
+    config.set(_config);
 };
diff --git a/demo-shell-ng2/config/webpack.common.js b/demo-shell-ng2/config/webpack.common.js
index 6f4c13f5d5..a683c6bf73 100644
--- a/demo-shell-ng2/config/webpack.common.js
+++ b/demo-shell-ng2/config/webpack.common.js
@@ -1,22 +1,27 @@
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var helpers = require('./helpers');
-var path = require('path');
-var fs = require('fs');
-var glob = require('glob');
-var CopyWebpackPlugin = require('copy-webpack-plugin');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
 
-const rootPath = helpers.root('node_modules');
-
-var pattern = '+(alfresco-js-api|ng2-alfresco|ng2-activiti)*';
-var options = {
-    cwd: rootPath,
-    realpath: true
-};
-
-var alfrescoLibs = glob.sync(pattern, options);
-// console.dir(alfrescoLibs);
+const alfrescoLibs = [
+    'ng2-activiti-analytics',
+    'ng2-activiti-diagrams',
+    'ng2-activiti-form',
+    'ng2-activiti-processlist',
+    'ng2-activiti-tasklist',
+    'ng2-alfresco-core',
+    'ng2-alfresco-datatable',
+    'ng2-alfresco-documentlist',
+    'ng2-alfresco-login',
+    'ng2-alfresco-search',
+    'ng2-alfresco-tag',
+    'ng2-alfresco-upload',
+    'ng2-alfresco-userinfo',
+    'ng2-alfresco-viewer',
+    'ng2-alfresco-webscript'
+];
 
 module.exports = {
     entry: {
@@ -24,146 +29,108 @@ module.exports = {
         'vendor': './app/vendor.ts',
         'app': './app/main.ts'
     },
-
-    resolve: {
-        extensions: ['', '.ts', '.js'],
-        modules: [
-            helpers.root('app'),
-            helpers.root('node_modules')
-        ],
-        root: rootPath,
-        fallback: rootPath
-    },
-
-    resolveLoader: {
-        alias: {
-            'systemjs-loader': helpers.root('config', 'loaders', 'system.js'),
-            'debug-loader': helpers.root('config', 'loaders', 'debug.js')
-        },
-        fallback: rootPath
-    },
     module: {
-        preLoaders: [
+        rules: [
             {
+                enforce: 'pre',
                 test: /\.js$/,
-                include: [
-                    ...alfrescoLibs
-                ],
-                loader: 'source-map-loader'
-            }
-        ],
-        loaders: [
+                include: [helpers.root('app')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('app')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
             {
                 test: /\.ts$/,
-                loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'systemjs-loader'],
-                exclude: ['node_modules','public']
-            },
-            {
-                test: /\.js$/,
-                include: [
-                    ...alfrescoLibs
+                include: [helpers.root('app')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
                 ],
-                loaders: ['angular2-template-loader', 'source-map-loader', 'systemjs-loader']
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
             },
             {
                 test: /\.html$/,
-                exclude: alfrescoLibs,
-                loader: 'html'
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
             },
             {
-                test: /\.html$/,
-                include: alfrescoLibs,
-                loader: 'html',
-                query: {
-                    interpolate: true
-                }
+                test: /\.css$/,
+                exclude: helpers.root('app'),
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: helpers.root('app'),
+                loader: 'raw-loader'
             },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-                loader: 'file?name=assets/[name].[hash].[ext]'
-            },
-            {
-                test: /\.css$/,
-                exclude: [
-                    helpers.root('app'),
-                    ...alfrescoLibs
-                ],
-                loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
-            },
-            {
-                test: /\.css$/,
-                include: [
-                    helpers.root('app'),
-                    ...alfrescoLibs
-                ],
-                loader: 'raw'
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
             }
         ]
     },
-
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
     plugins: [
-
-        new webpack.WatchIgnorePlugin([ new RegExp('^((?!(ng2-activiti|ng2-alfresco|demo-shell-ng2)).)((?!(src|app)).)*$')]),
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+            helpers.root('./app'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
 
         new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `bundles/assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            }),
+            {
+                from: 'favicon-96x96.png'
+            },
+            {
+                from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
+                to: 'pdf.worker.js'
+            },
             {
-                from: 'versions.json'
-            },{
-                context: 'node_modules',
-                from: 'element.scrollintoviewifneeded-polyfill/index.js',
-                to: 'js/element.scrollintoviewifneeded-polyfill.js',
-                flatten: true
-            },{
-                context: 'node_modules',
-                from: 'classlist-polyfill/src/index.js',
-                to: 'js/classlist-polyfill.js',
-                flatten: true
-            }, {
-                context: 'node_modules',
-                from: 'intl/dist/Intl.min.js',
-                to: 'js/Intl.min.js',
-                flatten: true
-            }, {
-                context: 'node_modules',
-                from: 'web-animations-js/web-animations.min.js',
-                to: 'js/web-animations.min.js',
-                flatten: true
-            }, {
-                context: 'node_modules',
-                from: 'core-js/client/shim.min.js',
-                to: 'js/shim.min.js',
-                flatten: true
-            }, {
-                context: 'node_modules',
-                from:  'es6-shim/es6-shim.min.js',
-                to: 'js/es6-shim.min.js',
-                flatten: true
-            }, {
-                context: 'node_modules',
-                from:  'es5-shim/es5-shim.min.js',
-                to: 'js/es5-shim.min.js',
-                flatten: true
-            }, {
-                context: 'node_modules',
-                from:  'systemjs/dist/system-polyfills.js',
-                to: 'js/system-polyfills.js',
-                flatten: true
-            }, {
-                context: 'node_modules',
-                from:  'material-design-lite/material.min.js',
-                to: 'js/material.min.js',
-                flatten: true
-            }, {
-                context: 'node_modules',
-                from:  'material-design-lite/material.min.js',
-                to: 'js/material.min.js',
-                flatten: true
-            }, {
-                context: 'node_modules',
-                from: 'material-design-icons/iconfont/',
-                to: 'css/iconfont/',
-                flatten: true
-            }, {
                 context: 'public',
                 from: '',
                 to: ''
@@ -172,15 +139,6 @@ module.exports = {
 
         new webpack.optimize.CommonsChunkPlugin({
             name: ['app', 'vendor', 'polyfills']
-        }),
-
-        new HtmlWebpackPlugin({
-            template: 'index.html'
         })
-    ],
-
-    node: {
-        fs: 'empty',
-        module: false
-    }
+    ]
 };
diff --git a/demo-shell-ng2/config/webpack.dev.js b/demo-shell-ng2/config/webpack.dev.js
index 2816a0faeb..654d3b8b7b 100644
--- a/demo-shell-ng2/config/webpack.dev.js
+++ b/demo-shell-ng2/config/webpack.dev.js
@@ -1,11 +1,9 @@
-var webpackMerge = require('webpack-merge');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var commonConfig = require('./webpack.common.js');
-var helpers = require('./helpers');
-var CopyWebpackPlugin = require('copy-webpack-plugin');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
 
 module.exports = webpackMerge(commonConfig, {
-
     devtool: 'cheap-module-eval-source-map',
 
     output: {
@@ -15,54 +13,15 @@ module.exports = webpackMerge(commonConfig, {
     },
 
     plugins: [
-        new ExtractTextPlugin('[name].css'),
-        new CopyWebpackPlugin([
-            {
-                from: 'favicon-96x96.png'
-            },
-            {
-                from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
-                to: 'pdf.worker.js'
-            },
-            {
-                context: 'resources/i18n',
-                from: '**/*.json',
-                to: 'resources/i18n'
-            },
-            // Copy i18n folders for all modules with ng2-alfresco- prefix
-            {
-                context: 'node_modules',
-                from: 'ng2-alfresco-*/src/i18n/*.json',
-                to: 'node_modules'
-            },
-            // Copy i18n folders for all modules with ng2-activiti- prefix
-            {
-                context: 'node_modules',
-                from: 'ng2-activiti-*/src/i18n/*.json',
-                to: 'node_modules'
-            },
-            // Copy asstes folders for all modules with ng2-activiti- prefix
-            {
-                context: 'node_modules',
-                from: 'ng2-activiti-*/src/assets/images/*.*',
-                to: 'assets/images',
-                flatten: true
-            },
-            // Copy asstes folders for all modules with ng2-alfresco- prefix
-            {
-                context: 'node_modules',
-                from: 'ng2-alfresco-*/src/assets/images/*.*',
-                to: 'assets/images',
-                flatten: true
-            }
-        ])
+        new ExtractTextPlugin('[name].css')
     ],
 
     devServer: {
-        host: '0.0.0.0',
+        contentBase: helpers.root('dist'),
+        compress: true,
         port: 3000,
-        inline: true,
         historyApiFallback: true,
-        stats: 'minimal'
+        host: '0.0.0.0',
+        inline: true
     }
 });
diff --git a/demo-shell-ng2/config/webpack.prod.js b/demo-shell-ng2/config/webpack.prod.js
index 1b73b19959..600823350e 100644
--- a/demo-shell-ng2/config/webpack.prod.js
+++ b/demo-shell-ng2/config/webpack.prod.js
@@ -1,104 +1,45 @@
-var webpack = require('webpack');
-var webpackMerge = require('webpack-merge');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var CopyWebpackPlugin = require('copy-webpack-plugin');
-var commonConfig = require('./webpack.common.js');
-var helpers = require('./helpers');
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
 
 const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 
 module.exports = webpackMerge(commonConfig, {
-  devtool: 'source-map',
+    devtool: 'source-map',
 
-  output: {
-    path: helpers.root('dist'),
-    publicPath: '/',
-    filename: '[name].[hash].js',
-    chunkFilename: '[id].[hash].chunk.js'
-  },
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
 
-  htmlLoader: {
-    minimize: false // workaround for ng2
-  },
-
-  plugins: [
-    // Define env variables to help with builds
-    // Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
-    new webpack.DefinePlugin({
-      'process.env': {
-        'ENV': JSON.stringify(ENV)
-      }
-    }),
-
-    // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
-    // Only emit files when there are no errors
-    new webpack.NoErrorsPlugin(),
-
-    // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
-    // Dedupe modules in the output
-    new webpack.optimize.DedupePlugin(),
-
-    // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
-    // Minify all javascript, switch loaders to minimizing mode
-     new webpack.optimize.UglifyJsPlugin({
-       output:{
-         comments: false
-       },
-       mangle: {
-         keep_fnames: true
-       },
-       compressor: {
-         screw_ie8: true,
-         warnings: false
-       }
-     }),
-
-    // Extract css files
-    // Reference: https://github.com/webpack/extract-text-webpack-plugin
-    // Disabled when in test mode or not in build mode
-    new ExtractTextPlugin('[name].[hash].css'),
-
-    // Copy assets from the public folder
-    // Reference: https://github.com/kevlened/copy-webpack-plugin
-    new CopyWebpackPlugin([
-        {
-            from: 'favicon-96x96.png'
-        },
-        {
-            from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
-            to: 'pdf.worker.js'
-        },
-        {
-            context: 'resources/i18n',
-            from: '**/*.json',
-            to: 'resources/i18n'
-        },
-        // Copy i18n folders for all modules with ng2-alfresco- prefix
-        {
-            context: 'node_modules',
-            from: 'ng2-alfresco-*/src/i18n/*.json',
-            to: 'node_modules'
-        },
-        // Copy i18n folders for all modules with ng2-activiti- prefix
-        {
-            context: 'node_modules',
-            from: 'ng2-activiti-*/src/i18n/*.json',
-            to: 'node_modules'
-        },
-        // Copy asstes folders for all modules with ng2-activiti- prefix
-        {
-            context: 'node_modules',
-            from: 'ng2-activiti-*/src/assets/images/*.*',
-            to: 'assets/images',
-            flatten : true
-        },
-        // Copy asstes folders for all modules with ng2-alfresco- prefix
-        {
-            context: 'node_modules',
-            from: 'ng2-alfresco-*/src/assets/images/*.*',
-            to: 'assets/images',
-            flatten : true
-        }
-    ])
-  ]
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
 });
diff --git a/demo-shell-ng2/config/webpack.test.js b/demo-shell-ng2/config/webpack.test.js
index c9bcd38d21..1da37cd34d 100644
--- a/demo-shell-ng2/config/webpack.test.js
+++ b/demo-shell-ng2/config/webpack.test.js
@@ -1,78 +1,45 @@
-var helpers = require('./helpers');
-var fs = require('fs');
-var glob = require('glob');
-
-const rootPath = helpers.root('node_modules');
-
-var pattern = '+(alfresco-js-api|ng2-alfresco|ng2-activiti)*';
-var options = {
-    cwd: rootPath,
-    realpath: true
-};
-
-var alfrescoLibs = glob.sync(pattern, options);
+const webpack = require('webpack');
+const helpers = require('./helpers');
 
 module.exports = {
-  devtool: 'inline-source-map',
+    devtool: 'inline-source-map',
 
-  resolve: {
-    extensions: ['', '.ts', '.js'],
-    modules: [
-      helpers.root('app'),
-      helpers.root('node_modules')
-    ],
-    root: rootPath,
-    fallback: rootPath
-  },
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
 
-  resolveLoader: {
-      alias: {
-          'systemjs-loader': helpers.root('config', 'loaders', 'system.js')
-      },
-      fallback: rootPath
-  },
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader', 'angular2-template-loader'],
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /public/, /resources/, /dist/]
 
-  module: {
-      preLoaders: [
-          {
-              test: /\.js$/,
-              include: [
-                  ...alfrescoLibs
-      ],
-      loader: 'source-map-loader'
-      }
-    ],
-    loaders: [
-        {
-            test: /\.ts$/,
-            loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'systemjs-loader'],
-            exclude: ['node_modules','public']
-        },
-      {
-        test: /\.js$/,
-        include: [
-          ...alfrescoLibs
-        ],
-        loaders: ['angular2-template-loader', 'source-map-loader', 'systemjs-loader']
-      },
-      {
-        test: /\.html$/,
-        loader: 'html'
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'null-loader'
+            },
+            {
+                test: /\.css$/,
+                loader: ['to-string-loader', 'css-loader'],
+                exclude: [ /public/, /resources/, /dist/]
+            }
+        ]
+    },
 
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-        loader: 'null'
-      },
-      {
-          test: /\.css$/,
-          loader: 'raw'
-      }
+    plugins: [
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        )
     ]
-  },
-
-  node: {
-      fs: 'empty',
-      module: false
-  }
 }
diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index 0e8d01209c..7e93895ca9 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -7,13 +7,6 @@
 
     <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
 
-    <!-- 1. Load libraries -->
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src=js/Intl.min.js></script>
-
-    <!-- IE/FF -->
-    <script src=js/element.scrollintoviewifneeded-polyfill.js></script>
-
     <!--[if IE]>
     <script src=js/shim.min.js></script>
     <script src=//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js></script>
@@ -28,11 +21,6 @@
     <script src=js/system-polyfills.js></script>
     <![endif]-->
 
-    <!-- Google Material Design Lite -->
-    <link href="css/material.orange-blue.min.css" rel="stylesheet">
-    <script src="js/material.min.js"></script>
-    <link href="css/iconfont/material-icons.css" rel="stylesheet">
-
     <style>
         .loader-container {
             display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 8a389a8e01..fbcdf0ce3f 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -4,15 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build  && rimraf dist node_modules typings dist",
-    "start": "npm run tslint && npm run server-versions && webpack-dev-server --progress --max_old_space_size=4096 --max_new_space_size=4096",
-    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "build": "rimraf dist && npm run licensecheck && webpack --config config/webpack.prod.js --progress --profile --bail",
+    "start": "npm run server-versions && node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js  --progress",
+    "test": "rimraf coverage && karma start --single-run",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
     "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
-    "test": "karma start",
-    "build": "npm run tslint && npm run server-versions && rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
     "server-versions": "rimraf versions.json && npm list --depth=0 --json=true --prod=true > versions.json  || exit 0",
     "aws": "node app.js",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json 'app/{,**/}**.ts'  -e 'app/vendor.ts' -e 'app/polyfills.ts' ",
     "licensecheck": "license-check"
   },
   "repository": {
@@ -52,30 +50,38 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
-    "alfresco-js-api": "~1.4.0",
-    "chart.js": "2.5.0",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "core-js": "2.4.1",
-    "dialog-polyfill": "0.4.7",
-    "element.scrollintoviewifneeded-polyfill": "1.0.1",
-    "flag-icon-css": "2.3.0",
-    "hammerjs": "2.0.8",
+    "reflect-metadata": "0.1.9",
+    "rxjs": "5.1.0",
+    "zone.js": "0.7.6",
+
+    "dialog-polyfill": "^0.4.7",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "md-date-time-picker": "2.2.0",
+    "ng2-translate": "5.0.0",
+    "pdfjs-dist": "1.5.404",
+    "flag-icon-css": "2.3.0",
     "moment": "2.15.1",
+    "chart.js": "2.5.0",
+    "ng2-charts": "1.5.0",
+    "raphael": "2.2.7",
+    "md-date-time-picker": "2.2.0",
+    "element.scrollintoviewifneeded-polyfill": "^1.0.1",
     "ng2-3d-editor": "0.0.15",
+
+    "alfresco-js-api": "~1.4.0",
     "ng2-activiti-analytics": "1.4.0",
+    "ng2-activiti-diagrams": "1.4.0",
     "ng2-activiti-form": "1.4.0",
     "ng2-activiti-processlist": "1.4.0",
     "ng2-activiti-tasklist": "1.4.0",
@@ -89,55 +95,45 @@
     "ng2-alfresco-upload": "1.4.0",
     "ng2-alfresco-userinfo": "1.4.0",
     "ng2-alfresco-viewer": "1.4.0",
-    "ng2-alfresco-webscript": "1.4.0",
-    "ng2-charts": "1.5.0",
-    "ng2-translate": "2.5.0",
-    "pdfjs-dist": "1.5.404",
-    "raphael": "2.2.7",
-    "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "ng2-alfresco-webscript": "1.4.0"
   },
   "devDependencies": {
-    "@types/hammerjs": "^2.0.34",
-    "@types/jasmine": "2.5.35",
-    "@types/node": "6.0.45",
-    "angular2-template-loader": "^0.6.0",
-    "awesome-typescript-loader": "^2.2.4",
-    "classlist-polyfill": "^1.0.3",
+    "@types/jasmine": "2.5.41",
+    "@types/node": "^7.0.5",
+    "angular2-template-loader": "^0.6.2",
     "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.23.1",
-    "es5-shim": "^4.5.9",
-    "es6-shim": "^0.35.2",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.8.5",
-    "glob": "^7.1.1",
-    "html-loader": "^0.4.3",
-    "html-webpack-plugin": "^2.15.0",
-    "intl": "^1.2.5",
-    "jasmine-core": "^2.4.1",
-    "karma": "^1.2.0",
+    "css-loader": "0.26.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "^0.10.0",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "jasmine-core": "^2.5.2",
+    "karma": "^1.4.1",
+    "karma-coverage": "^1.1.1",
     "karma-chrome-launcher": "2.0.0",
-    "karma-jasmine": "^1.0.2",
-    "karma-mocha-reporter": "^2.2.1",
+    "karma-jasmine": "^1.1.0",
+    "karma-jasmine-ajax": "0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^1.8.0",
+    "karma-webpack": "^2.0.2",
     "license-check": "1.1.5",
-    "mime": "^1.3.4",
     "null-loader": "^0.1.1",
+    "to-string-loader": "^1.1.4",
     "raw-loader": "^0.5.1",
-    "rimraf": "^2.5.2",
-    "script-loader": "^0.7.0",
-    "source-map-loader": "^0.1.5",
-    "style-loader": "^0.13.1",
-    "tslint": "3.15.1",
-    "typescript": "2.0.3",
-    "web-animations-js": "^2.2.2",
-    "webpack": "^1.13.0",
-    "webpack-dev-server": "^1.14.1",
-    "webpack-merge": "^0.14.0",
-    "wsrv": "^0.1.6"
+    "rimraf": "^2.5.4",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "sourcemap-istanbul-instrumenter-loader": "^0.2.0",
+    "style-loader": "0.13.1",
+    "ts-loader": "^2.0.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "^2.6.1"
   },
   "license-check-config": {
     "src": [
diff --git a/demo-shell-ng2/tsconfig.json b/demo-shell-ng2/tsconfig.json
index 7852349ef5..da9e50181f 100644
--- a/demo-shell-ng2/tsconfig.json
+++ b/demo-shell-ng2/tsconfig.json
@@ -1,17 +1,20 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": ["es2015", "dom"],
-    "noImplicitAny": false,
-    "suppressImplicitAnyIndexErrors": true,
-    "noResolve": true
-  },
-  "exclude": [
-    "node_modules"
-  ]
+    "compilerOptions": {
+        "target": "es5",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "sourceMap": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "lib": [ "es2015", "dom" ],
+        "noImplicitAny": false,
+        "suppressImplicitAnyIndexErrors": true,
+        "skipLibCheck": true,
+        "declaration": true
+    },
+    "exclude": [
+        "node_modules",
+        "dist",
+        "demo"
+    ]
 }
diff --git a/demo-shell-ng2/tslint.json b/demo-shell-ng2/tslint.json
index 999106027f..549d8def5f 100644
--- a/demo-shell-ng2/tslint.json
+++ b/demo-shell-ng2/tslint.json
@@ -21,7 +21,6 @@
     "interface-name": false,
     "jsdoc-format": true,
     "label-position": true,
-    "label-undefined": true,
     "max-line-length": [
       true,
       180
@@ -47,7 +46,6 @@
     "no-construct": true,
     "no-constructor-vars": false,
     "no-debugger": true,
-    "no-duplicate-key": true,
     "no-duplicate-variable": true,
     "no-empty": false,
     "no-eval": true,
@@ -57,12 +55,11 @@
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
-    "no-unreachable": true,
     "no-unused-expression": true,
     "no-unused-variable": true,
     "no-use-before-declare": true,
     "no-var-keyword": true,
-    "no-var-requires": true,
+    "no-var-requires": false,
     "object-literal-sort-keys": false,
     "one-line": [
       true,
diff --git a/ng2-components/config/assets/license_header.txt b/ng2-components/config/assets/license_header.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/config/assets/license_header.txt
@@ -0,0 +1,14 @@
+@license
+Copyright 2016 Alfresco Software, Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/ng2-components/ng2-activiti-form/tslint.json b/ng2-components/config/assets/tslint.json
similarity index 96%
rename from ng2-components/ng2-activiti-form/tslint.json
rename to ng2-components/config/assets/tslint.json
index acc666937e..611a015c7e 100644
--- a/ng2-components/ng2-activiti-form/tslint.json
+++ b/ng2-components/config/assets/tslint.json
@@ -21,7 +21,6 @@
         "interface-name": false,
         "jsdoc-format": true,
         "label-position": true,
-        "label-undefined": true,
         "max-line-length": [
             true,
             180
@@ -47,7 +46,6 @@
         "no-construct": true,
         "no-constructor-vars": false,
         "no-debugger": true,
-        "no-duplicate-key": true,
         "no-duplicate-variable": true,
         "no-empty": false,
         "no-eval": true,
@@ -57,7 +55,6 @@
         "no-shadowed-variable": true,
         "no-switch-case-fall-through": true,
         "no-trailing-whitespace": true,
-        "no-unreachable": true,
         "no-unused-expression": true,
         "no-unused-variable": true,
         "no-use-before-declare": true,
diff --git a/ng2-components/config/custom-loaders/file-loader-multi.js b/ng2-components/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/config/custom-loaders/file-loader-multi.js
@@ -0,0 +1,70 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+
+module.exports = function(content) {
+    this.cacheable && this.cacheable();
+    if(!this.emitFile) throw new Error('emitFile is required from module system');
+
+    var query = loaderUtils.getOptions(this) || {};
+    var configKey = query.config || 'multiFileLoader';
+    var options = this.options[configKey] || {};
+    var config = {
+        publicPath: false,
+        useRelativePath: false,
+        name: '[hash].[ext]'
+    };
+
+    // options takes precedence over config
+    Object.keys(options).forEach(function(attr) {
+        config[attr] = options[attr];
+    });
+
+    // query takes precedence over config and options
+    Object.keys(query).forEach(function(attr) {
+        config[attr] = query[attr];
+    });
+
+    var context = config.context || this.options.context;
+    var url = loaderUtils.interpolateName(this, config.name, {
+        context: context,
+        content: content,
+        regExp: config.regExp
+    });
+    var path = loaderUtils.interpolateName(this, '[path]', {
+        context: context,
+        content: content,
+        regExp: config.regExp
+    });
+
+    var outputPath = '';
+
+    if (config.outputPath) {
+        outputPath = (
+            typeof config.outputPath === 'function'
+                ? config.outputPath(url, path)
+                : config.outputPath + url
+        );
+    } else {
+        outputPath = url;
+    }
+
+    var publicPath = JSON.stringify(url);
+
+    if (config.publicPath) {
+        publicPath = JSON.stringify(
+            typeof config.publicPath === 'function'
+                ? config.publicPath(url, path)
+                : config.publicPath + url
+        );
+    }
+
+    publicPath = '__webpack_public_path__ + ' + publicPath;
+
+    if (query.emitFile === undefined || query.emitFile) {
+        this.emitFile(outputPath, content);
+    }
+
+    return 'module.exports = ' + publicPath + ';';
+};
+
+module.exports.raw = true;
diff --git a/ng2-components/config/helpers.js b/ng2-components/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/config/karma.conf.js b/ng2-components/config/karma.conf.js
new file mode 100644
index 0000000000..5cfbeb6d87
--- /dev/null
+++ b/ng2-components/config/karma.conf.js
@@ -0,0 +1,114 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+    var _config = {
+        basePath: '../' + config.component,
+
+        frameworks: ['jasmine-ajax', 'jasmine'],
+
+        files: [
+            '../node_modules/hammerjs/hammer.js',
+
+            //diagrams
+            '../node_modules/chart.js/dist/Chart.js',
+            '../node_modules/alfresco-js-api/dist/alfresco-js-api.js',
+            '../node_modules/raphael/raphael.js',
+            '../node_modules/moment/min/moment.min.js',
+            '../node_modules/md-date-time-picker/dist/js/mdDateTimePicker.js',
+
+            {pattern: '../node_modules/ng2-translate/**/*.js', included: false, watched: false},
+            {pattern: '../node_modules/ng2-charts/**/*.js', included: false, served: true, watched: false},
+            {pattern: '../node_modules/md-date-time-picker/**/*.js', included: false, served: true, watched: false},
+            {pattern: '../node_modules/moment/**/*.js', included: false, served: true, watched: false},
+
+            // pdf-js
+            '../node_modules/pdfjs-dist/build/pdf.js',
+            '../node_modules/pdfjs-dist/build/pdf.worker.js',
+            '../node_modules/pdfjs-dist/web/pdf_viewer.js',
+
+            {pattern: 'karma-test-shim.js', watched: false},
+            {pattern: './src/assets/**/*.*', included: false, served: true, watched: false},
+            {pattern: './src/i18n/**/*.*', included: false, served: true, watched: false},
+            {pattern: './dist/**/*.js', included: false, served: true, watched: false},
+            {pattern: './dist/**/*.js.map', included: false, served: true, watched: false},
+            {pattern: './src/**/*.ts', included: false, served: true, watched: false}
+        ],
+
+        client: {
+            component: config.component
+        },
+
+        webpack: webpackConfig,
+
+        webpackMiddleware: {
+            stats: 'errors-only'
+        },
+
+        port: 9876,
+
+        // level of logging
+        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+        logLevel: config.LOG_INFO,
+
+        colors: true,
+
+        autoWatch: true,
+
+        captureTimeout: 180000,
+        browserDisconnectTimeout: 180000,
+        browserDisconnectTolerance: 3,
+        browserNoActivityTimeout: 300000,
+
+        browsers: ['Chrome'],
+
+        customLaunchers: {
+            Chrome_travis_ci: {
+                base: 'Chrome',
+                flags: ['--no-sandbox']
+            }
+        },
+
+        // Karma plugins loaded
+        plugins: [
+            require('../node_modules/karma-jasmine'),
+            require('../node_modules/karma-coverage'),
+            require('../node_modules/karma-sourcemap-loader'),
+            require('../node_modules/karma-jasmine-ajax'),
+            require('../node_modules/karma-chrome-launcher'),
+            require('../node_modules/karma-mocha-reporter'),
+            require('../node_modules/karma-webpack'),
+            require('../node_modules/karma-jasmine-html-reporter')
+        ],
+
+        webpackServer: {
+            noInfo: true
+        },
+
+        // Coverage reporter generates the coverage
+        reporters: ['mocha', 'coverage', 'kjhtml'],
+
+        preprocessors: {
+            'karma-test-shim.js': ['webpack', 'sourcemap'],
+            './src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
+        },
+
+        coverageReporter: {
+            includeAllSources: true,
+            dir: '../' + config.component + '/coverage/',
+            subdir: 'report',
+            reporters: [
+                {type: 'text'},
+                {type: 'text-summary'},
+                {type: 'json', file: 'coverage-final.json'},
+                {type: 'html'},
+                {type: 'lcov'}
+            ]
+        }
+    };
+
+    if (process.env.TRAVIS) {
+        config.browsers = ['Chrome_travis_ci'];
+    }
+
+    config.set(_config);
+};
diff --git a/ng2-components/config/webpack.build.js b/ng2-components/config/webpack.build.js
new file mode 100644
index 0000000000..d53e802508
--- /dev/null
+++ b/ng2-components/config/webpack.build.js
@@ -0,0 +1,49 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: '[name]/bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-alfresco-core": "./ng2-alfresco-core/index.ts",
+        "ng2-alfresco-datatable": "./ng2-alfresco-datatable/index.ts",
+        "ng2-activiti-diagrams": "./ng2-activiti-diagrams/index.ts",
+        "ng2-activiti-analytics": "./ng2-activiti-analytics/index.ts",
+        "ng2-activiti-form": "./ng2-activiti-form/index.ts",
+        "ng2-activiti-tasklist": "./ng2-activiti-tasklist/index.ts",
+        "ng2-activiti-processlist": "./ng2-activiti-processlist/index.ts",
+        "ng2-alfresco-documentlist": "./ng2-alfresco-documentlist/index.ts",
+        "ng2-alfresco-login": "./ng2-alfresco-login/index.ts",
+        "ng2-alfresco-search": "./ng2-alfresco-search/index.ts",
+        "ng2-alfresco-social": "./ng2-alfresco-social/index.ts",
+        "ng2-alfresco-tag": "./ng2-alfresco-tag/index.ts",
+        "ng2-alfresco-upload": "./ng2-alfresco-upload/index.ts",
+        "ng2-alfresco-viewer": "./ng2-alfresco-viewer/index.ts",
+        "ng2-alfresco-webscript": "./ng2-alfresco-webscript/index.ts",
+        "ng2-alfresco-userinfo": "./ng2-alfresco-userinfo/index.ts"
+    },
+
+    plugins: [
+
+        //new webpack.optimize.UglifyJsPlugin({
+        //    mangle: {
+        //        keep_fnames: true
+        //    },
+        //    compress: {
+        //        warnings: false
+        //    },
+        //    output: {
+        //        comments: false
+        //    },
+        //    sourceMap: true
+        //})
+
+    ]
+});
diff --git a/ng2-components/config/webpack.common.js b/ng2-components/config/webpack.common.js
new file mode 100644
index 0000000000..8c2a2805bf
--- /dev/null
+++ b/ng2-components/config/webpack.common.js
@@ -0,0 +1,122 @@
+const webpack = require('webpack');
+const helpers = require('./helpers');
+const fs = require('fs');
+const path = require('path');
+
+module.exports = {
+
+    resolveLoader: {
+        alias: {
+            "file-multi-loader": path.resolve(__dirname, "./custom-loaders/file-loader-multi")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'ng2-charts',
+        'alfresco-js-api',
+        'ng2-alfresco-core',
+        'ng2-alfresco-datatable',
+        'ng2-activiti-analytics',
+        'ng2-activiti-diagrams',
+        'ng2-activiti-form',
+        "ng2-activiti-tasklist",
+        'ng2-alfresco-documentlist'
+    ],
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                options: {
+                    emitErrors: true,
+                    configFile: path.resolve(__dirname, './assets/tslint.json')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                use: ['ts-loader', 'angular2-template-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.css$/,
+                loader: ['to-string-loader', 'css-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-multi-loader',
+                query: {
+                    name: '[name].[hash].[ext]',
+                    outputPath: (url, resourcePath)=> {
+                        return resourcePath.replace('src', 'bundles') + url;
+                    },
+                    publicPath: (url, resourcePath)=> {
+                        var component = resourcePath.substring(0, resourcePath.indexOf('src'));
+                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
+                        return './' + path + url;
+                    }
+                }
+            }
+        ]
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [
+            '../ng2-components', 'node_modules'
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.BannerPlugin(fs.readFileSync(path.resolve(__dirname, './assets/license_header.txt'), 'utf8')),
+
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+            helpers.root('src'), // location of your src
+            {} // a map of your routes
+        ),
+
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/config/webpack.test.js b/ng2-components/config/webpack.test.js
new file mode 100644
index 0000000000..2863b12dae
--- /dev/null
+++ b/ng2-components/config/webpack.test.js
@@ -0,0 +1,85 @@
+const webpack = require('webpack');
+const helpers = require('./helpers');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+module.exports = {
+
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader', 'angular2-template-loader']
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.css$/,
+                loader: ['to-string-loader', 'css-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        console.log
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/,
+                    /spec\.ts$/
+                ]
+            }
+        ]
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [
+            '../ng2-components', 'node_modules'
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+            helpers.root('src'), // location of your src
+            {} // a map of your routes
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+
+    ],
+
+    devtool: 'inline-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-activiti-analytics/README.md b/ng2-components/ng2-activiti-analytics/README.md
index e0120f9ff8..b29f2e6ffc 100644
--- a/ng2-components/ng2-activiti-analytics/README.md
+++ b/ng2-components/ng2-activiti-analytics/README.md
@@ -345,7 +345,6 @@ npm start
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-activiti-analytics/demo/package.json b/ng2-components/ng2-activiti-analytics/demo/package.json
index 5a39e01484..b149870db0 100644
--- a/ng2-components/ng2-activiti-analytics/demo/package.json
+++ b/ng2-components/ng2-activiti-analytics/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -32,22 +32,22 @@
     "activiti-diagrams"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.7.6",
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
@@ -58,7 +58,7 @@
     "ng2-charts": "1.1.0",
     "moment": "2.15.1",
     "raphael": "^2.2.6",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-activiti-diagrams": "1.4.0",
diff --git a/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js b/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
index 4cf02967dd..0b8ca69bc1 100644
--- a/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
+++ b/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
@@ -46,9 +46,9 @@
             'ng2-translate': { defaultExtension: 'js' },
             'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js'},
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-diagrams': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-analytics': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-analytics-diagrams': { main: './bundles/ng2-analytics-diagrams.js', defaultExtension: 'js'},
+            'ng2-analytics-analytics': { main: './bundles/ng2-analytics-analytics.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-activiti-analytics/demo/tslint.json b/ng2-components/ng2-activiti-analytics/demo/tslint.json
index 8c9703b9de..36e753c92c 100644
--- a/ng2-components/ng2-activiti-analytics/demo/tslint.json
+++ b/ng2-components/ng2-activiti-analytics/demo/tslint.json
@@ -36,7 +36,7 @@
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
     "no-consecutive-blank-lines": true,
     "no-console": [
@@ -52,11 +52,11 @@
     "no-debugger": true,
     "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
diff --git a/ng2-components/ng2-activiti-analytics/gulpfile.ts b/ng2-components/ng2-activiti-analytics/gulpfile.ts
deleted file mode 100755
index bd0dea9134..0000000000
--- a/ng2-components/ng2-activiti-analytics/gulpfile.ts
+++ /dev/null
@@ -1,311 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/',
-            'ng2-charts': 'node_modules/ng2-charts/bundles/ng2-charts.umd',
-            'moment': 'node_modules/moment/min/moment.min'
-
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-charts/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-activiti-analytics/karma-test-shim.js b/ng2-components/ng2-activiti-analytics/karma-test-shim.js
index f986cf6cd0..bd31cd0284 100644
--- a/ng2-components/ng2-activiti-analytics/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-analytics/karma-test-shim.js
@@ -1,122 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-activiti-analytics/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'ng2-charts': 'npm:ng2-charts/bundles/ng2-charts.umd.js',
-    'md-date-time-picker' : 'npm:md-date-time-picker',
-    'moment' : 'npm:moment/min/moment.min.js',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'md-date-time-picker': { defaultExtension: 'js' },
-    'moment': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-activiti-diagrams': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-activiti-analytics/karma.conf.js b/ng2-components/ng2-activiti-analytics/karma.conf.js
deleted file mode 100644
index ae876c3e65..0000000000
--- a/ng2-components/ng2-activiti-analytics/karma.conf.js
+++ /dev/null
@@ -1,136 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-      'node_modules/moment/min/moment.min.js',
-      'node_modules/md-date-time-picker/dist/js/mdDateTimePicker.js',
-      'node_modules/chart.js/dist/Chart.bundle.min.js',
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.*', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      { pattern: 'node_modules/ng2-activiti-diagrams/src/**/*.*', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-activiti-diagrams/index.js', included: false, served: true, watched: false },
-
-      { pattern: 'node_modules/ng2-charts/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/md-date-time-picker/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/moment/**/*.js', included: false, served: true, watched: false },
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false},
-      {pattern: 'src/**/*.json', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json
index 06f04794ed..5280d011ab 100644
--- a/ng2-components/ng2-activiti-analytics/package.json
+++ b/ng2-components/ng2-activiti-analytics/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core ng2-activiti-diagrams",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-activiti-analytics",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-activiti-analytics",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-activiti-analytics.js",
   "contributors": [
     {
       "name": "Mario Romano",
@@ -43,15 +33,15 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "chart.js": "2.5.0",
     "core-js": "2.4.1",
@@ -61,54 +51,27 @@
     "ng2-activiti-diagrams": "1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-charts": "1.5.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "raphael": "2.2.7",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
-    "cpx": "1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-core": "2.4.1",
-    "karma": "0.13.22",
-    "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "1.0.0",
-    "karma-jasmine": "1.0.2",
-    "karma-jasmine-ajax": "^0.1.13",
-    "karma-jasmine-html-reporter": "0.2.0",
-    "karma-mocha-reporter": "2.0.3",
-    "license-check": "1.1.5",
+    "cpx": "^1.3.1",
+    "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
-    "traceur": "0.0.91",
+    "traceur": "^0.0.91",
     "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
+    "tslint": "^3.8.1",
     "typescript": "^2.0.3",
     "wsrv": "^0.1.5"
   },
@@ -118,7 +81,7 @@
   ],
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts b/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts
index 1990127265..789c734ee7 100644
--- a/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts
+++ b/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-export var chartProcessDefOverview = {
+export let chartProcessDefOverview = {
     'elements': [{
         'id': 'id1585876275153',
         'type': 'table',
@@ -62,7 +62,7 @@ export var chartProcessDefOverview = {
     }]
 };
 
-export var chartTaskOverview = {
+export let chartTaskOverview = {
     'elements': [{
         'id': 'id792351752194',
         'type': 'barChart',
diff --git a/ng2-components/ng2-activiti-analytics/src/assets/analyticsParamsReportComponent.mock.ts b/ng2-components/ng2-activiti-analytics/src/assets/analyticsParamsReportComponent.mock.ts
index 87361903b0..3571eba6df 100644
--- a/ng2-components/ng2-activiti-analytics/src/assets/analyticsParamsReportComponent.mock.ts
+++ b/ng2-components/ng2-activiti-analytics/src/assets/analyticsParamsReportComponent.mock.ts
@@ -17,14 +17,14 @@
 
 import { ReportParameterDetailsModel } from '../models/report.model';
 
-export var reportDefParamStatus = {
+export let reportDefParamStatus = {
     'id': 2005,
     'name': 'Fake Task overview status',
     'created': '2016-10-05T15:39:40.222+0000',
     'definition': '{ "parameters" :[{"id":"status","name":null,"nameKey":null,"type":"status","value":null,"dependsOn":null}]}'
 };
 
-export var reportDefParamNumber = {
+export let reportDefParamNumber = {
     'id': 2005,
     'name': 'Fake Process instances overview',
     'created': '2016-10-05T15:39:40.222+0000',
@@ -32,7 +32,7 @@ export var reportDefParamNumber = {
     ' :[{"id":"slowProcessInstanceInteger","name":null,"nameKey":null,"type":"integer","value":10,"dependsOn":null}]}'
 };
 
-export var reportDefParamDuration = {
+export let reportDefParamDuration = {
     'id': 2005,
     'name': 'Fake Task service level agreement',
     'created': '2016-10-05T15:39:40.222+0000',
@@ -40,7 +40,7 @@ export var reportDefParamDuration = {
     ' :[{"id":"duration","name":null,"nameKey":null,"type":"duration","value":null,"dependsOn":null}]}'
 };
 
-export var reportDefParamCheck = {
+export let reportDefParamCheck = {
     'id': 2005,
     'name': 'Fake Task service level agreement',
     'created': '2016-10-05T15:39:40.222+0000',
@@ -48,28 +48,28 @@ export var reportDefParamCheck = {
     ' :[{"id":"typeFiltering","name":null,"nameKey":null,"type":"boolean","value":true,"dependsOn":null}]}'
 };
 
-export var reportDefParamDateRange = {
+export let reportDefParamDateRange = {
     'id': 2005,
     'name': 'Fake Process instances overview',
     'created': '2016-10-05T15:39:40.222+0000',
     'definition': '{ "parameters" :[{"id":"dateRange","name":null,"nameKey":null,"type":"dateRange","value":null,"dependsOn":null}]}'
 };
 
-export var reportDefParamRangeInterval = {
+export let reportDefParamRangeInterval = {
     'id': 2006,
     'name': 'Fake Task overview RangeInterval',
     'created': '2016-10-05T15:39:40.222+0000',
     'definition': '{ "parameters" :[{"id":"dateRangeInterval","name":null,"nameKey":null,"type":"dateInterval","value":null,"dependsOn":null}]}'
 };
 
-export var reportDefParamProcessDef = {
+export let reportDefParamProcessDef = {
     'id': 2006,
     'name': 'Fake Task overview ProcessDefinition',
     'created': '2016-10-05T15:39:40.222+0000',
     'definition': '{ "parameters" :[{"id":"processDefinitionId","name":null,"nameKey":null,"type":"processDefinition","value":null,"dependsOn":null}]}'
 };
 
-export var reportDefParamProcessDefOptionsNoApp = [
+export let reportDefParamProcessDefOptionsNoApp = [
     {
         'id': 'FakeProcessTest 1:1:1',
         'name': 'Fake Process Test 1 Name ',
@@ -92,7 +92,7 @@ export var reportDefParamProcessDefOptionsNoApp = [
     }
 ];
 
-export var reportDefParamProcessDefOptions = {
+export let reportDefParamProcessDefOptions = {
     'size': 4, 'total': 4, 'start': 0, 'data': [
         {
             'id': 'FakeProcessTest 1:1:1',
@@ -117,7 +117,7 @@ export var reportDefParamProcessDefOptions = {
     ]
 };
 
-export var reportDefParamProcessDefOptionsApp = {
+export let reportDefParamProcessDefOptionsApp = {
     'size': 2, 'total': 2, 'start': 2, 'data': [
         {
             'id': 'FakeProcessTest 1:1:1',
@@ -132,23 +132,23 @@ export var reportDefParamProcessDefOptionsApp = {
     ]
 };
 
-export var reportDefParamTask = {
+export let reportDefParamTask = {
     'id': 2006,
     'name': 'Fake Task service level agreement',
     'created': '2016-10-05T15:39:40.222+0000',
     'definition': '{ "parameters" :[{"id":"taskName","name":null,"nameKey":null,"type":"task","value":null,"dependsOn":"processDefinitionId"}]}'
 };
 
-export var reportNoParameterDefinitions = {
+export let reportNoParameterDefinitions = {
     'id': 2006,
     'name': 'Fake Task service level agreement',
     'created': '2016-10-05T15:39:40.222+0000',
     'definition': '{ "parameters" : []}'
 };
 
-export var reportDefParamTaskOptions = ['Fake task name 1', 'Fake task name 2'];
+export let reportDefParamTaskOptions = ['Fake task name 1', 'Fake task name 2'];
 
-export var fieldProcessDef = new ReportParameterDetailsModel(
+export let fieldProcessDef = new ReportParameterDetailsModel(
     {
         id: 'processDefinitionId',
         type: 'processDefinition',
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.ts
index 3905b9c28e..bfa909419d 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.ts
@@ -22,7 +22,6 @@ import { ReportQuery } from '../models/report.model';
 import { Chart } from '../models/chart.model';
 
 @Component({
-    moduleId: module.id,
     selector: 'activiti-analytics-generator',
     templateUrl: './analytics-generator.component.html',
     styleUrls: ['./analytics-generator.component.css']
@@ -94,7 +93,6 @@ export class AnalyticsGeneratorComponent implements OnChanges {
             },
             (err: any) => {
                 this.onError.emit(err);
-                this.logService.error(err);
             }
         );
     }
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.spec.ts
index b5baa073f8..fc8d44f2c4 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.spec.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.spec.ts
@@ -29,7 +29,7 @@ declare let jasmine: any;
 describe('AnalyticsReportHeatMapComponent', () => {
 
     let componentHandler: any;
-    let component: any;
+    let component: AnalyticsReportHeatMapComponent;
     let fixture: ComponentFixture<AnalyticsReportHeatMapComponent>;
     let debug: DebugElement;
     let element: HTMLElement;
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts
index df9c81455a..19542e41fe 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts
@@ -21,7 +21,6 @@ import { AnalyticsService } from '../services/analytics.service';
 import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
 
 @Component({
-    moduleId: module.id,
     selector: 'analytics-report-heat-map',
     templateUrl: './analytics-report-heat-map.component.html'
 })
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts
index 82c08d5ba4..b6d7b4014b 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts
@@ -22,7 +22,6 @@ import { AnalyticsService } from '../services/analytics.service';
 import { ReportParametersModel } from '../models/report.model';
 
 @Component({
-    moduleId: module.id,
     selector: 'analytics-report-list',
     templateUrl: './analytics-report-list.component.html',
     styleUrls: ['./analytics-report-list.component.css']
@@ -96,7 +95,6 @@ export class AnalyticsReportListComponent implements  OnInit {
             },
             (err: any) => {
                 this.onError.emit(err);
-                this.logService.error(err);
             }
         );
     }
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts
index 50f34e6b99..64405ad4e8 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts
@@ -229,6 +229,7 @@ describe('AnalyticsReportParametersComponent', () => {
         it('Should render a date range components when the definition parameter type is \'dateRange\' ', (done) => {
             component.onSuccessReportParams.subscribe(() => {
                 fixture.detectChanges();
+
                 let today = moment().format('YYYY-MM-DD');
 
                 const startDate: any = element.querySelector('#startDateInput');
@@ -480,28 +481,35 @@ describe('AnalyticsReportParametersComponent', () => {
                 validForm = true;
             });
 
-            it('Should be able to change the report title', async(() => {
+            it('Should be able to change the report title', (done) => {
+
                 let title: HTMLElement = element.querySelector('h4');
                 title.click();
                 fixture.detectChanges();
+
                 let reportName: HTMLInputElement = <HTMLInputElement> element.querySelector('#reportName');
                 expect(reportName).not.toBeNull();
+
                 reportName.focus();
                 component.reportParameters.name = 'FAKE_TEST_NAME';
                 reportName.value = 'FAKE_TEST_NAME';
                 reportName.blur();
-                jasmine.Ajax.requests.mostRecent().respondWith({
-                    status: 200,
-                    contentType: 'json',
-                    responseText: analyticParamsMock.reportDefParamStatus
-                });
+
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     let titleChanged: HTMLElement = element.querySelector('h4');
                     expect(titleChanged.textContent.trim()).toEqual('FAKE_TEST_NAME');
+                    done();
                 });
-            }));
+
+                jasmine.Ajax.requests.mostRecent().respondWith({
+                    status: 200,
+                    contentType: 'json',
+                    responseText: analyticParamsMock.reportDefParamStatus
+                });
+
+            });
 
             it('Should show a dialog to allowing report save', async(() => {
                 component.saveReportSuccess.subscribe(() => {
@@ -515,7 +523,9 @@ describe('AnalyticsReportParametersComponent', () => {
                 expect(saveButton).toBeDefined();
                 expect(saveButton).not.toBeNull();
                 saveButton.click();
+
                 fixture.detectChanges();
+
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     let reportDialogTitle: HTMLElement = <HTMLElement>element.querySelector('#report-dialog-title');
@@ -523,11 +533,14 @@ describe('AnalyticsReportParametersComponent', () => {
                     let inputSaveName: HTMLInputElement = <HTMLInputElement> element.querySelector('#repName');
                     let performActionButton: HTMLButtonElement = <HTMLButtonElement>element.querySelector('#action-dialog-button');
                     let todayDate = component.getTodayDate();
+
                     expect(reportDialogTitle).not.toBeNull();
                     expect(saveTitleSubMessage).not.toBeNull();
                     expect(inputSaveName.value.trim()).toEqual(analyticParamsMock.reportDefParamStatus.name + ' ( ' + todayDate + ' )');
                     expect(performActionButton).not.toBeNull();
+
                     performActionButton.click();
+
                     jasmine.Ajax.requests.mostRecent().respondWith({
                         status: 200,
                         contentType: 'json'
@@ -539,20 +552,26 @@ describe('AnalyticsReportParametersComponent', () => {
                 component.submit(values);
                 fixture.detectChanges();
                 let exportButton: HTMLButtonElement = <HTMLButtonElement>element.querySelector('#export-button');
+
                 expect(exportButton).toBeDefined();
                 expect(exportButton).not.toBeNull();
                 exportButton.click();
+
                 fixture.detectChanges();
+
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     let reportDialogTitle: HTMLElement = <HTMLElement>element.querySelector('#report-dialog-title');
                     let inputSaveName: HTMLInputElement = <HTMLInputElement> element.querySelector('#repName');
                     let performActionButton: HTMLButtonElement = <HTMLButtonElement>element.querySelector('#action-dialog-button');
                     let todayDate = component.getTodayDate();
+
                     expect(reportDialogTitle).not.toBeNull();
                     expect(inputSaveName.value.trim()).toEqual(analyticParamsMock.reportDefParamStatus.name + ' ( ' + todayDate + ' )');
                     expect(performActionButton).not.toBeNull();
+
                     performActionButton.click();
+
                     jasmine.Ajax.requests.mostRecent().respondWith({
                         status: 200,
                         contentType: 'json'
@@ -568,7 +587,9 @@ describe('AnalyticsReportParametersComponent', () => {
                 component.deleteReportSuccess.subscribe((reportId) => {
                     expect(reportId).not.toBeNull();
                 });
+
                 deleteButton.click();
+
                 jasmine.Ajax.requests.mostRecent().respondWith({
                     status: 200,
                     contentType: 'json'
@@ -580,7 +601,9 @@ describe('AnalyticsReportParametersComponent', () => {
                 expect(exportButton).toBeDefined();
                 expect(exportButton).not.toBeNull();
                 validForm = false;
+
                 fixture.detectChanges();
+
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     exportButton = <HTMLButtonElement>element.querySelector('#export-button');
@@ -593,7 +616,9 @@ describe('AnalyticsReportParametersComponent', () => {
                 expect(saveButton).toBeDefined();
                 expect(saveButton).not.toBeNull();
                 validForm = false;
+
                 fixture.detectChanges();
+
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     saveButton = <HTMLButtonElement>element.querySelector('#save-button');
@@ -609,10 +634,13 @@ describe('AnalyticsReportParametersComponent', () => {
                 expect(saveButton).toBeNull();
                 expect(exportButton).toBeNull();
                 validForm = true;
+
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
+
                     saveButton = <HTMLButtonElement>element.querySelector('#save-button');
                     exportButton = <HTMLButtonElement>element.querySelector('#export-button');
+
                     expect(saveButton).not.toBeNull();
                     expect(saveButton).toBeDefined();
                     expect(exportButton).not.toBeNull();
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts
index bac24f8cdc..6c4212569e 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts
@@ -43,7 +43,6 @@ declare var componentHandler;
 declare let dialogPolyfill: any;
 
 @Component({
-    moduleId: module.id,
     selector: 'analytics-report-parameters',
     templateUrl: './analytics-report-parameters.component.html',
     styleUrls: ['./analytics-report-parameters.component.css']
@@ -210,7 +209,6 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
                 }
             },
             (err: any) => {
-                this.logService.error(err);
                 this.onError.emit(err);
             }
         );
@@ -224,7 +222,6 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
                     this.onSuccessParamOpt.emit(opts);
                 },
                 (err: any) => {
-                    this.logService.error(err);
                     this.onError.emit(err);
                 }
             );
@@ -321,7 +318,6 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
                 this.onEdit.emit(this.reportParameters.name);
             },
             (err: any) => {
-                this.logService.error(err);
                 this.onError.emit(err);
             }
         );
@@ -369,7 +365,7 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
     doExport(paramQuery: ReportQuery) {
         this.analyticsService.exportReportToCsv(this.reportId, paramQuery).subscribe(
             (data: any) => {
-                let blob: Blob = new Blob([data], { type: 'text/csv' });
+                let blob: Blob = new Blob([data], {type: 'text/csv'});
                 this.contentService.downloadBlob(blob, paramQuery.reportName + '.csv');
             });
     }
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
index 4c9d42d156..bf0ac9a338 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
@@ -22,7 +22,6 @@ import { ReportQuery } from '../models/report.model';
 import { AnalyticsGeneratorComponent } from './analytics-generator.component';
 
 @Component({
-    moduleId: module.id,
     selector: 'activiti-analytics',
     templateUrl: './analytics.component.html',
     styleUrls: ['./analytics.component.css']
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.ts b/ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.ts
index 6c9b498b9d..7bcd8bd077 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.ts
@@ -20,7 +20,6 @@ import { WidgetComponent } from './../widget.component';
 import { FormGroup } from '@angular/forms';
 
 @Component({
-    moduleId: module.id,
     selector: 'checkbox-widget',
     templateUrl: './checkbox.widget.html'
 })
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts b/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts
index efd7567d46..c8a778d822 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts
@@ -30,7 +30,6 @@ function dateCheck(c: AbstractControl) {
 declare let mdDateTimePicker: any;
 
 @Component({
-    moduleId: module.id,
     selector: 'date-range-widget',
     templateUrl: './date-range.widget.html',
     styleUrls: ['./date-range.widget.css']
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts b/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts
index 9f6ca1434f..dd054bcb2f 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts
@@ -20,7 +20,6 @@ import { FormGroup, Validators, FormControl } from '@angular/forms';
 import { WidgetComponent } from './../widget.component';
 
 @Component({
-    moduleId: module.id,
     selector: 'dropdown-widget',
     templateUrl: './dropdown.widget.html',
     styleUrls: ['./dropdown.widget.css']
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts b/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts
index 0f1e2efbf0..653937eab2 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts
@@ -21,7 +21,6 @@ import { ReportParameterDetailsModel, ParameterValueModel } from './../../../mod
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
-    moduleId: module.id,
     selector: 'duration-widget',
     templateUrl: './duration.widget.html',
     styleUrls: ['./duration.widget.css']
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts b/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts
index df0b2cea95..95130c9561 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts
@@ -20,7 +20,6 @@ import { WidgetComponent } from './../widget.component';
 import { FormGroup, Validators } from '@angular/forms';
 
 @Component({
-    moduleId: module.id,
     selector: 'number-widget',
     templateUrl: './number.widget.html',
     styleUrls: ['./number.widget.css']
diff --git a/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts b/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts
index de54a39318..e0be6e33da 100644
--- a/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts
+++ b/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts
@@ -94,9 +94,9 @@ export class AnalyticsService {
     getProcessStatusValues(): Observable<any> {
         let paramOptions: ParameterValueModel[] = [];
 
-        paramOptions.push(new ParameterValueModel({ id: 'All', name: 'All' }));
-        paramOptions.push(new ParameterValueModel({ id: 'Active', name: 'Active' }));
-        paramOptions.push(new ParameterValueModel({ id: 'Complete', name: 'Complete' }));
+        paramOptions.push(new ParameterValueModel({id: 'All', name: 'All'}));
+        paramOptions.push(new ParameterValueModel({id: 'Active', name: 'Active'}));
+        paramOptions.push(new ParameterValueModel({id: 'Complete', name: 'Complete'}));
 
         return Observable.create(observer => {
             observer.next(paramOptions);
@@ -107,11 +107,11 @@ export class AnalyticsService {
     getDateIntervalValues(): Observable<any> {
         let paramOptions: ParameterValueModel[] = [];
 
-        paramOptions.push(new ParameterValueModel({ id: 'byHour', name: 'By hour' }));
-        paramOptions.push(new ParameterValueModel({ id: 'byDay', name: 'By day' }));
-        paramOptions.push(new ParameterValueModel({ id: 'byWeek', name: 'By week' }));
-        paramOptions.push(new ParameterValueModel({ id: 'byMonth', name: 'By month' }));
-        paramOptions.push(new ParameterValueModel({ id: 'byYear', name: 'By year' }));
+        paramOptions.push(new ParameterValueModel({id: 'byHour', name: 'By hour'}));
+        paramOptions.push(new ParameterValueModel({id: 'byDay', name: 'By day'}));
+        paramOptions.push(new ParameterValueModel({id: 'byWeek', name: 'By week'}));
+        paramOptions.push(new ParameterValueModel({id: 'byMonth', name: 'By month'}));
+        paramOptions.push(new ParameterValueModel({id: 'byYear', name: 'By year'}));
 
         return Observable.create(observer => {
             observer.next(paramOptions);
@@ -122,9 +122,9 @@ export class AnalyticsService {
     getMetricValues(): Observable<any> {
         let paramOptions: ParameterValueModel[] = [];
 
-        paramOptions.push(new ParameterValueModel({ id: 'totalCount', name: 'Number of times a step is executed' }));
-        paramOptions.push(new ParameterValueModel({ id: 'totalTime', name: 'Total time spent in a process step' }));
-        paramOptions.push(new ParameterValueModel({ id: 'avgTime', name: 'Average time spent in a process step' }));
+        paramOptions.push(new ParameterValueModel({id: 'totalCount', name: 'Number of times a step is executed'}));
+        paramOptions.push(new ParameterValueModel({id: 'totalTime', name: 'Total time spent in a process step'}));
+        paramOptions.push(new ParameterValueModel({id: 'avgTime', name: 'Average time spent in a process step'}));
 
         return Observable.create(observer => {
             observer.next(paramOptions);
@@ -144,7 +144,7 @@ export class AnalyticsService {
     }
 
     getProcessDefinitionsValues(appId: string): Observable<any> {
-        let options = { 'appDefinitionId': appId };
+        let options = {'appDefinitionId': appId};
         return Observable.fromPromise(this.apiService.getInstance().activiti.processDefinitionsApi.getProcessDefinitions(options))
             .map((res: any) => {
                 let paramOptions: ParameterValueModel[] = [];
@@ -160,7 +160,7 @@ export class AnalyticsService {
             .map((res: any) => {
                 let paramOptions: ParameterValueModel[] = [];
                 res.forEach((opt) => {
-                    paramOptions.push(new ParameterValueModel({ id: opt, name: opt }));
+                    paramOptions.push(new ParameterValueModel({id: opt, name: opt}));
                 });
                 return paramOptions;
             }).catch(err => this.handleError(err));
@@ -227,7 +227,7 @@ export class AnalyticsService {
 
     private handleError(error: Response) {
         this.logService.error(error);
-        return Observable.throw(error.json().error || 'Server error');
+        return Observable.throw(error || 'Server error');
     }
 
     toJson(res: any) {
diff --git a/ng2-components/ng2-activiti-analytics/tsconfig.json b/ng2-components/ng2-activiti-analytics/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-activiti-analytics/tsconfig.json
+++ b/ng2-components/ng2-activiti-analytics/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-activiti-analytics/tslint.json b/ng2-components/ng2-activiti-analytics/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-activiti-analytics/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-activiti-analytics/webpack.build.js b/ng2-components/ng2-activiti-analytics/webpack.build.js
new file mode 100644
index 0000000000..bf06f8e80f
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-activiti-analytics": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-activiti-diagrams/README.md b/ng2-components/ng2-activiti-diagrams/README.md
index 1f5bb613e9..10fc28ac0d 100644
--- a/ng2-components/ng2-activiti-diagrams/README.md
+++ b/ng2-components/ng2-activiti-diagrams/README.md
@@ -219,7 +219,6 @@ npm start
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-activiti-diagrams/demo/package.json b/ng2-components/ng2-activiti-diagrams/demo/package.json
index 5d5e770acd..96df7844b5 100644
--- a/ng2-components/ng2-activiti-diagrams/demo/package.json
+++ b/ng2-components/ng2-activiti-diagrams/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -32,17 +32,17 @@
     "activiti-diagrams"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "dialog-polyfill": "0.4.7",
@@ -52,12 +52,12 @@
     "material-design-lite": "1.2.1",
     "ng2-activiti-diagrams": "1.4.0",
     "ng2-alfresco-core": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "raphael": "^2.2.6",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/jasmine": "^2.2.33",
diff --git a/ng2-components/ng2-activiti-diagrams/demo/systemjs.config.js b/ng2-components/ng2-activiti-diagrams/demo/systemjs.config.js
index 5dbddb561f..f34f2f87ad 100644
--- a/ng2-components/ng2-activiti-diagrams/demo/systemjs.config.js
+++ b/ng2-components/ng2-activiti-diagrams/demo/systemjs.config.js
@@ -44,8 +44,8 @@
             'moment': { defaultExtension: 'js' },
             'ng2-translate': { defaultExtension: 'js' },
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-diagrams': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-activiti-diagrams': { main: './bundles/ng2-activiti-diagrams.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-activiti-diagrams/demo/tslint.json b/ng2-components/ng2-activiti-diagrams/demo/tslint.json
index 8c9703b9de..36e753c92c 100644
--- a/ng2-components/ng2-activiti-diagrams/demo/tslint.json
+++ b/ng2-components/ng2-activiti-diagrams/demo/tslint.json
@@ -36,7 +36,7 @@
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
     "no-consecutive-blank-lines": true,
     "no-console": [
@@ -52,11 +52,11 @@
     "no-debugger": true,
     "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
diff --git a/ng2-components/ng2-activiti-diagrams/gulpfile.ts b/ng2-components/ng2-activiti-diagrams/gulpfile.ts
deleted file mode 100755
index c74f68a2a6..0000000000
--- a/ng2-components/ng2-activiti-diagrams/gulpfile.ts
+++ /dev/null
@@ -1,310 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/',
-            'ng2-charts' : 'node_modules/ng2-charts',
-            'raphael':'node_modules/raphael/raphael'
-
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-activiti-diagrams/karma-test-shim.js b/ng2-components/ng2-activiti-diagrams/karma-test-shim.js
index 36db71621b..8bc60175b2 100644
--- a/ng2-components/ng2-activiti-diagrams/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-diagrams/karma-test-shim.js
@@ -1,118 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-activiti-diagrams/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'ng2-charts' : 'npm:ng2-charts',
-    'hammerjs': 'npm:hammerjs',
-
-    'raphael':'npm:raphael/raphael.js',
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'ng2-charts': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-activiti-diagrams/karma.conf.js b/ng2-components/ng2-activiti-diagrams/karma.conf.js
deleted file mode 100644
index d404552bb4..0000000000
--- a/ng2-components/ng2-activiti-diagrams/karma.conf.js
+++ /dev/null
@@ -1,131 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/chart.js/dist/Chart.js',
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-      'node_modules/raphael/raphael.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/ng2-charts/**/*.js', included: false, served: true, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.*', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.json', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-activiti-diagrams/package.json b/ng2-components/ng2-activiti-diagrams/package.json
index 562e8139f7..ca1ff45c3b 100644
--- a/ng2-components/ng2-activiti-diagrams/package.json
+++ b/ng2-components/ng2-activiti-diagrams/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-activiti-diagrams",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-activiti-diagrams",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-activiti-diagrams.js",
   "contributors": [
     {
       "name": "Maurizio Vitale",
@@ -39,67 +29,40 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "raphael": "^2.2.6",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
-    "cpx": "1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-core": "2.4.1",
-    "karma": "0.13.22",
-    "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "1.0.0",
-    "karma-jasmine": "1.0.2",
-    "karma-jasmine-ajax": "^0.1.13",
-    "karma-jasmine-html-reporter": "0.2.0",
-    "karma-mocha-reporter": "2.0.3",
-    "license-check": "1.1.5",
+    "cpx": "^1.3.1",
+    "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
-    "traceur": "0.0.91",
+    "traceur": "^0.0.91",
     "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
+    "tslint": "^3.8.1",
     "typescript": "^2.0.3",
     "wsrv": "^0.1.5"
   },
@@ -110,7 +73,7 @@
   ],
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-alfresco-publish-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-alfresco-publish-task.component.ts
index 3b890b22b0..e2bfee11ad 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-alfresco-publish-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-alfresco-publish-task.component.ts
@@ -18,7 +18,6 @@
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-alfresco-publish-task',
     templateUrl: './diagram-alfresco-publish-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-box-publish-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-box-publish-task.component.ts
index 869169446e..c06667d5ce 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-box-publish-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-box-publish-task.component.ts
@@ -18,7 +18,6 @@
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-box-publish-task',
     templateUrl: './diagram-box-publish-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-business-rule-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-business-rule-task.component.ts
index b88f7e79b4..8056ea0159 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-business-rule-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-business-rule-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-business-rule-task',
     templateUrl: './diagram-business-rule-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-camel-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-camel-task.component.ts
index 98e0e38885..76fd18df1f 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-camel-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-camel-task.component.ts
@@ -18,7 +18,6 @@
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-camel-task',
     templateUrl: './diagram-camel-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-container-service-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-container-service-task.component.ts
index d838f55ca6..0a3b3f1fd4 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-container-service-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-container-service-task.component.ts
@@ -18,7 +18,6 @@
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-container-service-task',
     templateUrl: './diagram-container-service-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-google-drive-publish-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-google-drive-publish-task.component.ts
index 1cb11f9e62..ffc04e013f 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-google-drive-publish-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-google-drive-publish-task.component.ts
@@ -18,7 +18,6 @@
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-google-drive-publish-task',
     templateUrl: './diagram-google-drive-publish-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-manual-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-manual-task.component.ts
index b4bd42f15f..3673d5bd48 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-manual-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-manual-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-manual-task',
     templateUrl: './diagram-manual-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-mule-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-mule-task.component.ts
index 73b015cbda..3d92f76ad8 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-mule-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-mule-task.component.ts
@@ -18,7 +18,6 @@
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-mule-task',
     templateUrl: './diagram-mule-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-receive-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-receive-task.component.ts
index 625ddd7c49..b3ee753962 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-receive-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-receive-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-receive-task',
     templateUrl: './diagram-receive-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-rest-call-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-rest-call-task.component.ts
index 6e41f58d75..87f5d67562 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-rest-call-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-rest-call-task.component.ts
@@ -18,7 +18,6 @@
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-rest-call-task',
     templateUrl: './diagram-rest-call-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-script-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-script-task.component.ts
index 65469f9d7c..0586996be9 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-script-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-script-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-script-task',
     templateUrl: './diagram-script-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-send-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-send-task.component.ts
index 90f106dd80..47d8e4ee22 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-send-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-send-task.component.ts
@@ -18,7 +18,6 @@
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-send-task',
     templateUrl: './diagram-send-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-service-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-service-task.component.ts
index 8498b342a7..42c01c9ca6 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-service-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-service-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-service-task',
     templateUrl: './diagram-service-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.ts
index 11adfe077f..fd49731489 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-task',
     templateUrl: './diagram-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-user-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-user-task.component.ts
index 9507bc0b4b..9a28326382 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-user-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-user-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-user-task',
     templateUrl: './diagram-user-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.ts
index b89736cdc0..56134c320e 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-boundary-event',
     templateUrl: './diagram-boundary-event.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.ts
index d87691f67c..87e9efa2f8 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-throw-event',
     templateUrl: './diagram-throw-event.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/diagram-sequence-flow.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/diagram-sequence-flow.component.ts
index d90287cd7f..aeab7d0652 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/diagram-sequence-flow.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram-sequence-flow.component.ts
@@ -18,7 +18,6 @@
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-sequence-flow',
     templateUrl: './diagram-sequence-flow.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts
index 9c64a9bcd1..ba8cddc88e 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts
@@ -23,7 +23,6 @@ import { RaphaelService } from './raphael/raphael.service';
 import { DiagramModel, DiagramElementModel } from '../models/diagram.model';
 
 @Component({
-    moduleId: module.id,
     selector: 'activiti-diagram',
     styleUrls: ['./diagram.component.css'],
     templateUrl: './diagram.component.html'
@@ -85,7 +84,6 @@ export class DiagramComponent {
             },
             (err: any) => {
                 this.onError.emit(err);
-                this.logService.error(err);
             }
         );
     }
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-end-event.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-end-event.component.ts
index f84d0c553b..a5681934f0 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-end-event.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-end-event.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-end-event',
     templateUrl: './diagram-end-event.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.ts
index 4555ccdac2..5ccaa4ff3f 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-event',
     templateUrl: './diagram-event.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-start-event.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-start-event.component.ts
index 57b19b4ad6..b58ade80d0 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-start-event.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-start-event.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-start-event',
     templateUrl: './diagram-start-event.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-event-gateway.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-event-gateway.component.ts
index 5cdba6f3bb..79f472d50c 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-event-gateway.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-event-gateway.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-event-gateway',
     templateUrl: './diagram-event-gateway.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-exclusive-gateway.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-exclusive-gateway.component.ts
index be066cf842..82c285128d 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-exclusive-gateway.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-exclusive-gateway.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-exclusive-gateway',
     templateUrl: './diagram-exclusive-gateway.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-gateway.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-gateway.component.ts
index a0aadd43e2..8002d1e2c3 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-gateway.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-gateway.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-gateway',
     templateUrl: './diagram-gateway.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-inclusive-gateway.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-inclusive-gateway.component.ts
index 410c83d179..75a099dfe6 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-inclusive-gateway.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-inclusive-gateway.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-inclusive-gateway',
     templateUrl: './diagram-inclusive-gateway.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-parallel-gateway.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-parallel-gateway.component.ts
index 20c2d84642..e33c35d425 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-parallel-gateway.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-parallel-gateway.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-parallel-gateway',
     templateUrl: './diagram-parallel-gateway.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-container-icon-event.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-container-icon-event.component.ts
index fdfc433659..86cd706e30 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-container-icon-event.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-container-icon-event.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-container-icon-event',
     templateUrl: './diagram-container-icon-event.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-alfresco-publish-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-alfresco-publish-task.component.ts
index ecf69baf43..3e2937988c 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-alfresco-publish-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-alfresco-publish-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-alfresco-publish-task',
     templateUrl: './diagram-icon-alfresco-publish-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-box-publish-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-box-publish-task.component.ts
index ec58fbf9d6..fc1df37beb 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-box-publish-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-box-publish-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-box-publish-task',
     templateUrl: './diagram-icon-box-publish-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-business-rule-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-business-rule-task.component.ts
index 8e7064fa62..9f494de421 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-business-rule-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-business-rule-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-business-rule-task',
     templateUrl: './diagram-icon-business-rule-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-camel-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-camel-task.component.ts
index 12f8ed8219..1ab029f49c 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-camel-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-camel-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-camel-task',
     templateUrl: './diagram-icon-camel-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-error.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-error.component.ts
index d757913222..7bb0444de7 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-error.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-error.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-error',
     templateUrl: './diagram-icon-error.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-google-drive-publish-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-google-drive-publish-task.component.ts
index 3eebba0225..80cb76da97 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-google-drive-publish-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-google-drive-publish-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-google-drive-publish-task',
     templateUrl: './diagram-icon-google-drive-publish-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-manual-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-manual-task.component.ts
index d0f2af97eb..ad476a0876 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-manual-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-manual-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-manual-task',
     templateUrl: './diagram-icon-manual-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-message.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-message.component.ts
index 7564a23485..98bd3e45c5 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-message.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-message.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-message',
     templateUrl: './diagram-icon-message.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-mule-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-mule-task.component.ts
index fce69f4697..d96a09e5c1 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-mule-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-mule-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-mule-task',
     templateUrl: './diagram-icon-mule-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-receive-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-receive-task.component.ts
index ca67abe1f4..8c31c1afb2 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-receive-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-receive-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-receive-task',
     templateUrl: './diagram-icon-receive-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-rest-call-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-rest-call-task.component.ts
index 87c45074f3..dff97b4a50 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-rest-call-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-rest-call-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-rest-call-task',
     templateUrl: './diagram-icon-rest-call-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-script-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-script-task.component.ts
index 498ec86b44..b363953bf6 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-script-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-script-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-script-task',
     templateUrl: './diagram-icon-script-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-send-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-send-task.component.ts
index 9e9f6cc8b7..e7e809fdd1 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-send-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-send-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-send-task',
     templateUrl: './diagram-icon-send-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-service-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-service-task.component.ts
index d1973a62b2..788d49436d 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-service-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-service-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-service-task',
     templateUrl: './diagram-icon-service-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-signal.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-signal.component.ts
index aed37eab01..c417c75d8b 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-signal.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-signal.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-signal',
     templateUrl: './diagram-icon-signal.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-timer.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-timer.component.ts
index 29657ce05a..c9f7259019 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-timer.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-timer.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-timer',
     templateUrl: './diagram-icon-timer.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-user-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-user-task.component.ts
index 902b0baf6d..f752429680 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-user-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-user-task.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-icon-user-task',
     templateUrl: './diagram-icon-user-task.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/intermediate-catching-events/diagram-intermediate-catching-event.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/intermediate-catching-events/diagram-intermediate-catching-event.component.ts
index c03b144865..8544ececa9 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/intermediate-catching-events/diagram-intermediate-catching-event.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/intermediate-catching-events/diagram-intermediate-catching-event.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-intermediate-catching-event',
     templateUrl: './diagram-intermediate-catching-event.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-event-subprocess.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-event-subprocess.component.ts
index 7cf1666c67..ed080c1f53 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-event-subprocess.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-event-subprocess.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-event-subprocess',
     templateUrl: './diagram-event-subprocess.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-subprocess.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-subprocess.component.ts
index dae3ddfb11..ee71fe5c9a 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-subprocess.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-subprocess.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-subprocess',
     templateUrl: './diagram-subprocess.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.ts
index 325b018f63..4313856737 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-lane',
     templateUrl: './diagram-lane.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.ts
index 072175d68c..ab68f616ab 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.ts
@@ -18,7 +18,6 @@
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-lanes',
     templateUrl: './diagram-lanes.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.ts
index 59dd0a0dde..4e26e3c86c 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.ts
@@ -19,7 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-pool',
     templateUrl: './diagram-pool.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.ts
index e54b1f0704..611cec46f7 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.ts
@@ -18,7 +18,6 @@
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-pools',
     templateUrl: './diagram-pools.component.html'
 })
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts
index daadc6a173..bc0f1777bc 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts
@@ -18,7 +18,6 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-    moduleId: module.id,
     selector: 'diagram-tooltip',
     templateUrl: './diagram-tooltip.component.html',
     styleUrls: ['./diagram-tooltip-style.css']
diff --git a/ng2-components/ng2-activiti-diagrams/tsconfig.json b/ng2-components/ng2-activiti-diagrams/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-activiti-diagrams/tsconfig.json
+++ b/ng2-components/ng2-activiti-diagrams/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-activiti-diagrams/tslint.json b/ng2-components/ng2-activiti-diagrams/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-activiti-diagrams/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-activiti-diagrams/webpack.build.js b/ng2-components/ng2-activiti-diagrams/webpack.build.js
new file mode 100644
index 0000000000..9c7a2eb9c2
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-activiti-diagrams": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-activiti-form/README.md b/ng2-components/ng2-activiti-form/README.md
index e401704752..3041f68c61 100644
--- a/ng2-components/ng2-activiti-form/README.md
+++ b/ng2-components/ng2-activiti-form/README.md
@@ -523,7 +523,6 @@ npm start
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-activiti-form/demo/package.json b/ng2-components/ng2-activiti-form/demo/package.json
index b5aa8bf9de..5567f382d3 100644
--- a/ng2-components/ng2-activiti-form/demo/package.json
+++ b/ng2-components/ng2-activiti-form/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -32,22 +32,22 @@
     "activiti-form"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.7.6",
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
@@ -55,7 +55,7 @@
     "material-design-lite": "1.2.1",
     "moment": "2.15.1",
     "md-date-time-picker": "2.2.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-activiti-form": "1.4.0"
diff --git a/ng2-components/ng2-activiti-form/demo/systemjs.config.js b/ng2-components/ng2-activiti-form/demo/systemjs.config.js
index 5d136d5fd9..1e20c19026 100644
--- a/ng2-components/ng2-activiti-form/demo/systemjs.config.js
+++ b/ng2-components/ng2-activiti-form/demo/systemjs.config.js
@@ -44,8 +44,8 @@
             'ng2-translate': { defaultExtension: 'js' },
             'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js'},
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-activiti-form': { main: './bundles/ng2-activiti-form.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-activiti-form/demo/tslint.json b/ng2-components/ng2-activiti-form/demo/tslint.json
index 8c9703b9de..36e753c92c 100644
--- a/ng2-components/ng2-activiti-form/demo/tslint.json
+++ b/ng2-components/ng2-activiti-form/demo/tslint.json
@@ -36,7 +36,7 @@
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
     "no-consecutive-blank-lines": true,
     "no-console": [
@@ -52,11 +52,11 @@
     "no-debugger": true,
     "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
diff --git a/ng2-components/ng2-activiti-form/gulpfile.ts b/ng2-components/ng2-activiti-form/gulpfile.ts
deleted file mode 100755
index 7195b7df66..0000000000
--- a/ng2-components/ng2-activiti-form/gulpfile.ts
+++ /dev/null
@@ -1,310 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/',
-            'moment':'node_modules/moment/min/moment.min'
-            //'node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js',
-            //'node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js'
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-activiti-form/karma-test-shim.js b/ng2-components/ng2-activiti-form/karma-test-shim.js
index 9ea964ad00..1fe35e272a 100644
--- a/ng2-components/ng2-activiti-form/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-form/karma-test-shim.js
@@ -1,119 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-activiti-form/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'md-date-time-picker' : 'npm:md-date-time-picker',
-    'moment' : 'npm:moment/min/moment.min.js',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'md-date-time-picker': { defaultExtension: 'js' },
-    'moment': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-activiti-form/karma.conf.js b/ng2-components/ng2-activiti-form/karma.conf.js
deleted file mode 100644
index 7491894e79..0000000000
--- a/ng2-components/ng2-activiti-form/karma.conf.js
+++ /dev/null
@@ -1,134 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-      'node_modules/moment/min/moment.min.js',
-      'node_modules/md-date-time-picker/dist/js/mdDateTimePicker.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js.map', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      // paths to support debugging with source maps in dev tools
-
-      {pattern: './index.ts', included: false, watched: true},
-      {pattern: './index.js', included: false, watched: true},
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.js.map', included: false, watched: false},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true}
-
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-activiti-form/package.json b/ng2-components/ng2-activiti-form/package.json
index 23f7672e9d..f2391890cc 100644
--- a/ng2-components/ng2-activiti-form/package.json
+++ b/ng2-components/ng2-activiti-form/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-activiti-form",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-activiti-form",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-activiti-form.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -46,63 +36,35 @@
     "activiti"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "md-date-time-picker": "2.2.0",
     "moment": "2.15.1",
     "ng2-alfresco-core": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
     "cpx": "^1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-ajax": "^3.2.0",
-    "jasmine-core": "2.4.1",
-    "karma": "~0.13.22",
-    "karma-chrome-launcher": "~1.0.1",
-    "karma-coverage": "^1.0.0",
-    "karma-jasmine": "~1.0.2",
-    "karma-jasmine-ajax": "^0.1.13",
-    "karma-jasmine-html-reporter": "^0.2.0",
-    "karma-mocha-reporter": "^2.0.3",
     "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "^0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
@@ -114,7 +76,7 @@
   },
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-content.component.ts b/ng2-components/ng2-activiti-form/src/components/activiti-content.component.ts
index 4b6f3212fb..cc7516136e 100644
--- a/ng2-components/ng2-activiti-form/src/components/activiti-content.component.ts
+++ b/ng2-components/ng2-activiti-form/src/components/activiti-content.component.ts
@@ -22,7 +22,6 @@ import { ContentLinkModel } from './widgets/core/content-link.model';
 import { Observable } from 'rxjs/Rx';
 
 @Component({
-    moduleId: module.id,
     selector: 'activiti-content',
     templateUrl: './activiti-content.component.html',
     styleUrls: ['./activiti-content.component.css']
@@ -44,6 +43,9 @@ export class ActivitiContent implements OnChanges {
     @Output()
     contentLoaded: EventEmitter<any> = new EventEmitter<any>();
 
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
     content: ContentLinkModel;
 
     constructor(private translate: AlfrescoTranslationService,
@@ -71,8 +73,8 @@ export class ActivitiContent implements OnChanges {
                     this.contentLoaded.emit(this.content);
                     this.loadThumbnailUrl(this.content);
                 },
-                error => {
-                    this.logService.error(error);
+                (error) => {
+                    this.error.emit(error);
                 }
             );
     }
@@ -93,8 +95,9 @@ export class ActivitiContent implements OnChanges {
                         this.content.thumbnailUrl = this.contentService.createTrustedUrl(response);
                         this.thumbnailLoaded.emit(this.content.thumbnailUrl);
                     },
-                    error => {
-                        this.logService.error(error);
+                    (error) => {
+                        this.error.emit(error);
+
                     }
                 );
             }
@@ -109,7 +112,9 @@ export class ActivitiContent implements OnChanges {
                 this.logService.info('Content clicked' + content.id);
                 this.formService.formContentClicked.next(content);
             },
-            error => this.logService.error(error)
+            (error) => {
+                this.error.emit(error);
+            }
         );
     }
 
@@ -119,7 +124,9 @@ export class ActivitiContent implements OnChanges {
     download(content: ContentLinkModel): void {
         this.formService.getFileRawContent(content.id).subscribe(
             (blob: Blob) => this.contentService.downloadBlob(blob, content.name),
-            error => this.logService.error(error)
+            (error) => {
+                this.error.emit(error);
+            }
         );
     }
 }
diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts b/ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts
index 0fa09bf4fd..840f345484 100644
--- a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts
+++ b/ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts
@@ -71,7 +71,6 @@ declare var componentHandler: any;
  * @returns {ActivitiForm} .
  */
 @Component({
-    moduleId: module.id,
     selector: 'activiti-form',
     templateUrl: './activiti-form.component.html',
     styleUrls: ['./activiti-form.component.css']
@@ -238,6 +237,12 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
             this.getFormDefinitionByFormName(formName.currentValue);
             return;
         }
+
+        let nodeId = changes['nodeId'];
+        if (nodeId && nodeId.currentValue) {
+            this.loadFormForEcmNode();
+            return;
+        }
     }
 
     /**
@@ -431,7 +436,6 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
     }
 
     handleError(err: any): any {
-        this.logService.error(err);
         this.onError.emit(err);
     }
 
diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.ts b/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.ts
index 47c23acbae..af36437238 100644
--- a/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.ts
+++ b/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.ts
@@ -51,7 +51,6 @@ import { ContentLinkModel } from './widgets/core/content-link.model';
  * @returns {ActivitiForm} .
  */
 @Component({
-    moduleId: module.id,
     selector: 'activiti-start-form',
     templateUrl: './activiti-start-form.component.html',
     styleUrls: ['./activiti-form.component.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.ts
index 5efd7c2bb3..adf67f1954 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.ts
@@ -19,7 +19,6 @@ import { Component, OnInit } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
 
 @Component({
-    moduleId: module.id,
     selector: 'amount-widget',
     templateUrl: './amount.widget.html',
     styleUrls: ['./amount.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.spec.ts
index 2d767db20b..1857b82b95 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.spec.ts
@@ -38,7 +38,8 @@ describe('AttachWidget', () => {
 
         dialogPolyfill = {
             registerDialog(obj: any) {
-                obj.showModal = function () {};
+                obj.showModal = function () {
+                };
             }
         };
         window['dialogPolyfill'] = dialogPolyfill;
@@ -58,7 +59,7 @@ describe('AttachWidget', () => {
 
         widget.field = new FormFieldModel(null, {
             type: FormFieldTypes.UPLOAD,
-            value: [{ name: 'file' }]
+            value: [{name: 'file'}]
         });
         widget.ngOnInit();
         expect(widget.hasFile()).toBeTruthy();
@@ -68,8 +69,8 @@ describe('AttachWidget', () => {
         let nodes = [{}];
         spyOn(contentService, 'getAlfrescoNodes').and.returnValue(
             Observable.create(observer => {
-                 observer.next(nodes);
-                 observer.complete();
+                observer.next(nodes);
+                observer.complete();
             })
         );
 
@@ -124,7 +125,7 @@ describe('AttachWidget', () => {
     it('should reset', () => {
         widget.field = new FormFieldModel(null, {
             type: FormFieldTypes.UPLOAD,
-            value: [{ name: 'filename' }]
+            value: [{name: 'filename'}]
         });
 
         widget.reset();
@@ -138,7 +139,7 @@ describe('AttachWidget', () => {
         let closed = false;
         widget.dialog = {
             nativeElement: {
-                close: function() {
+                close: function () {
                     closed = true;
                 }
             }
@@ -150,8 +151,8 @@ describe('AttachWidget', () => {
     it('should show modal dialog', () => {
         spyOn(contentService, 'getAlfrescoNodes').and.returnValue(
             Observable.create(observer => {
-                 observer.next([]);
-                 observer.complete();
+                observer.next([]);
+                observer.complete();
             })
         );
 
@@ -167,7 +168,7 @@ describe('AttachWidget', () => {
         let modalShown = false;
         widget.dialog = {
             nativeElement: {
-                showModal: function() {
+                showModal: function () {
                     modalShown = true;
                 }
             }
@@ -181,12 +182,12 @@ describe('AttachWidget', () => {
         let nodes = [{}];
         spyOn(contentService, 'getAlfrescoNodes').and.returnValue(
             Observable.create(observer => {
-                 observer.next(nodes);
-                 observer.complete();
+                observer.next(nodes);
+                observer.complete();
             })
         );
 
-        let node = <ExternalContent> { id: '<id>' };
+        let node = <ExternalContent> {id: '<id>'};
         widget.selectFolder(node, null);
 
         expect(widget.selectedFolderPathId).toBe(node.id);
@@ -202,7 +203,7 @@ describe('AttachWidget', () => {
 
     it('should get linked file name via selected file', () => {
         widget.fileName = null;
-        widget.selectedFile = <ExternalContent> { title: '<title>' };
+        widget.selectedFile = <ExternalContent> {title: '<title>'};
         widget.field = null;
         expect(widget.getLinkedFileName()).toBe(widget.selectedFile.title);
     });
@@ -214,7 +215,7 @@ describe('AttachWidget', () => {
         let name = '<file>';
         widget.field = new FormFieldModel(null, {
             type: FormFieldTypes.UPLOAD,
-            value: [{ name: name }]
+            value: [{name: name}]
         });
 
         expect(widget.getLinkedFileName()).toBe(name);
@@ -250,8 +251,8 @@ describe('AttachWidget', () => {
         let nodes = [{}];
         spyOn(contentService, 'getAlfrescoNodes').and.returnValue(
             Observable.create(observer => {
-                 observer.next(nodes);
-                 observer.complete();
+                observer.next(nodes);
+                observer.complete();
             })
         );
 
@@ -265,15 +266,17 @@ describe('AttachWidget', () => {
         expect(widget.selectedFolderNodes).toEqual(nodes);
     });
 
-    it('should handle error', () => {
+    it('should handle error', (done) => {
         let error = 'error';
         spyOn(contentService, 'getAlfrescoNodes').and.returnValue(
             Observable.throw(error)
         );
 
-        spyOn(logService, 'error').and.stub();
+        widget.error.subscribe(() => {
+            done();
+        });
+
         widget.getExternalContentNodes();
-        expect(logService.error).toHaveBeenCalledWith(error);
     });
 
     it('should register dialog via polyfill', () => {
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts
index 8b6ae72cc9..47c7b3aa5f 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts
@@ -26,7 +26,6 @@ import { FormFieldModel } from '../core/form-field.model';
 declare let dialogPolyfill: any;
 
 @Component({
-    moduleId: module.id,
     selector: 'attach-widget',
     templateUrl: './attach.widget.html',
     styleUrls: ['./attach.widget.css']
@@ -47,6 +46,9 @@ export class AttachWidget extends WidgetComponent implements OnInit {
     @Output()
     fieldChanged: EventEmitter<FormFieldModel> = new EventEmitter<FormFieldModel>();
 
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
     @ViewChild('dialog')
     dialog: any;
 
@@ -99,7 +101,9 @@ export class AttachWidget extends WidgetComponent implements OnInit {
         this.contentService.getAlfrescoNodes(this.selectedFolderAccountId, this.selectedFolderPathId)
             .subscribe(
                 nodes => this.selectedFolderNodes = nodes,
-                error => this.logService.error(error)
+                (err) => {
+                    this.error.emit(err);
+                }
             );
     }
 
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/checkbox/checkbox.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/checkbox/checkbox.widget.ts
index dba856da62..def030d15e 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/checkbox/checkbox.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/checkbox/checkbox.widget.ts
@@ -20,7 +20,6 @@ import { WidgetComponent } from './../widget.component';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'checkbox-widget',
     templateUrl: './checkbox.widget.html'
 })
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts
index af367ca9a4..4d92c19be0 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts
@@ -22,7 +22,6 @@ import { WidgetComponent } from './../widget.component';
 declare var componentHandler: any;
 
 @Component({
-    moduleId: module.id,
     selector: 'container-widget',
     templateUrl: './container.widget.html',
     styleUrls: ['./container.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts
index 4f1b739c47..dcd05c8926 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts
@@ -23,7 +23,6 @@ declare let mdDateTimePicker: any;
 declare var componentHandler: any;
 
 @Component({
-    moduleId: module.id,
     selector: 'date-widget',
     templateUrl: './date.widget.html',
     styleUrls: ['./date.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/display-text/display-text.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/display-text/display-text.widget.ts
index e95d6aecdb..e389fa8ebd 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/display-text/display-text.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/display-text/display-text.widget.ts
@@ -19,7 +19,6 @@ import { Component } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
 
 @Component({
-    moduleId: module.id,
     selector: 'display-text-widget',
     templateUrl: './display-text.widget.html',
     styleUrls: ['./display-text.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts
index 2cb5bee5b9..17af6953c6 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts
@@ -39,7 +39,7 @@ describe('DisplayValueWidget', () => {
         logService = new LogServiceMock();
         formService = new FormService(null, null, logService);
         visibilityService = new WidgetVisibilityService(null, logService);
-        widget = new DisplayValueWidget(formService, visibilityService, logService);
+        widget = new DisplayValueWidget(formService, visibilityService);
     });
 
     it('should require field to setup default value', () => {
@@ -387,14 +387,12 @@ describe('DisplayValueWidget', () => {
         expect(widget.value).toBe('100');
     });
 
-    it('should handle rest error', () => {
+    it('should handle rest error', (done) => {
         const error = 'ERROR';
         spyOn(formService, 'getRestFieldValues').and.returnValue(
             Observable.throw(error)
         );
 
-        spyOn(logService, 'error').and.stub();
-
         let form = new FormModel({taskId: '<id>'});
 
         widget.field = new FormFieldModel(form, {
@@ -407,10 +405,12 @@ describe('DisplayValueWidget', () => {
                 }
             }
         });
+        widget.error.subscribe(() => {
+            expect(formService.getRestFieldValues).toHaveBeenCalled();
+            expect(widget.value).toBe('100');
+            done();
+        });
         widget.ngOnInit();
-        expect(formService.getRestFieldValues).toHaveBeenCalled();
-        expect(logService.error).toHaveBeenCalledWith(error);
-        expect(widget.value).toBe('100');
     });
 
     it('should setup [DATE] field with valid date', () => {
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts
index c1f16decf6..44e1e84ca1 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts
@@ -15,9 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import * as moment from 'moment';
-import { LogService } from 'ng2-alfresco-core';
 import { WidgetComponent } from './../widget.component';
 import { FormFieldTypes } from '../core/form-field-types';
 import { FormService } from '../../../services/form.service';
@@ -26,13 +25,15 @@ import { WidgetVisibilityService } from '../../../services/widget-visibility.ser
 import { NumberFieldValidator } from '../core/form-field-validator';
 
 @Component({
-    moduleId: module.id,
     selector: 'display-value-widget',
     templateUrl: './display-value.widget.html',
     styleUrls: ['./display-value.widget.css']
 })
 export class DisplayValueWidget extends WidgetComponent implements OnInit {
 
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
     value: any;
     fieldType: string;
     id: any;
@@ -49,8 +50,7 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit {
     showDocumentContent: boolean = true;
 
     constructor(private formService: FormService,
-                private visibilityService: WidgetVisibilityService,
-                private logService: LogService) {
+                private visibilityService: WidgetVisibilityService) {
         super();
     }
 
@@ -185,8 +185,7 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit {
                     }
                     this.visibilityService.refreshVisibility(this.field.form);
                 },
-                error => {
-                    this.logService.error(error);
+                (error) => {
                     this.value = this.field.value;
                 }
             );
@@ -207,8 +206,8 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit {
                     }
                     this.visibilityService.refreshVisibility(this.field.form);
                 },
-                error => {
-                    this.logService.error(error);
+                (error) => {
+                    this.error.emit(error);
                     this.value = this.field.value;
                 }
             );
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.ts
index 5d1b7db5de..aa13e5b44e 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.ts
@@ -23,7 +23,6 @@ import { FormFieldOption } from './../core/form-field-option';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'dropdown-widget',
     templateUrl: './dropdown.widget.html',
     styleUrls: ['./dropdown.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts
index d0cd9c75ff..5ded9b6033 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts
@@ -23,7 +23,6 @@ import { WidgetVisibilityService } from '../../../services/widget-visibility.ser
 import { FormFieldModel } from '../core/form-field.model';
 
 @Component({
-    moduleId: module.id,
     selector: 'dynamic-table-widget',
     templateUrl: './dynamic-table.widget.html',
     styleUrls: ['./dynamic-table.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.ts
index f7d3a63cf9..7b5940900a 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.ts
@@ -19,7 +19,6 @@ import { Component, Input } from '@angular/core';
 import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../../dynamic-table.widget.model';
 
 @Component({
-    moduleId: module.id,
     selector: 'alf-boolean-editor',
     templateUrl: './boolean.editor.html',
     styleUrls: ['./boolean.editor.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts
index e0362c1f72..ff5c7bb73b 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts
@@ -22,7 +22,6 @@ import * as moment from 'moment';
 declare let mdDateTimePicker: any;
 
 @Component({
-    moduleId: module.id,
     selector: 'alf-date-editor',
     templateUrl: './date.editor.html',
     styleUrls: ['./date.editor.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.ts
index 0bafb62d33..b2887bbe08 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.ts
@@ -21,7 +21,6 @@ import { DynamicTableModel, DynamicTableRow, DynamicTableColumn, DynamicTableCol
 import { FormService } from './../../../../../services/form.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'alf-dropdown-editor',
     templateUrl: './dropdown.editor.html',
     styleUrls: ['./dropdown.editor.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/row.editor.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/row.editor.ts
index 323bb2770c..1fe609469d 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/row.editor.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/row.editor.ts
@@ -19,7 +19,6 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { DynamicTableModel, DynamicTableRow, DynamicTableColumn, DynamicRowValidationSummary } from './../dynamic-table.widget.model';
 
 @Component({
-    moduleId: module.id,
     selector: 'row-editor',
     templateUrl: './row.editor.html',
     styleUrls: ['./row.editor.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.ts
index c411ec0808..b9ff993b13 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.ts
@@ -19,7 +19,6 @@ import { Component, Input, OnInit } from '@angular/core';
 import { DynamicTableRow, DynamicTableColumn, DynamicTableModel } from './../../dynamic-table.widget.model';
 
 @Component({
-    moduleId: module.id,
     selector: 'alf-text-editor',
     templateUrl: './text.editor.html',
     styleUrls: ['./text.editor.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts
index e44e3cf185..118f3daf75 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts
@@ -21,7 +21,6 @@ import { FormService } from '../../../services/form.service';
 import { GroupModel } from './../core/group.model';
 
 @Component({
-    moduleId: module.id,
     selector: 'functional-group-widget',
     templateUrl: './functional-group.widget.html',
     styleUrls: ['./functional-group.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/hyperlink/hyperlink.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/hyperlink/hyperlink.widget.ts
index 82983f9fd0..e6882a18bd 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/hyperlink/hyperlink.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/hyperlink/hyperlink.widget.ts
@@ -19,7 +19,6 @@ import { Component, OnInit } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
 
 @Component({
-    moduleId: module.id,
     selector: 'hyperlink-widget',
     templateUrl: './hyperlink.widget.html',
     styleUrls: ['./hyperlink.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.ts
index 20ebeae749..dafc83f9c1 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.ts
@@ -19,7 +19,6 @@ import { Component } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
 
 @Component({
-    moduleId: module.id,
     selector: 'multiline-text-widget',
     templateUrl: './multiline-text.widget.html',
     styleUrls: ['./multiline-text.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.ts
index adea9826f5..83aedefe77 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.ts
@@ -19,7 +19,6 @@ import { Component } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
 
 @Component({
-    moduleId: module.id,
     selector: 'number-widget',
     templateUrl: './number.widget.html',
     styleUrls: ['./number.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts
index ec0bf04db7..59a77b19cd 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts
@@ -22,7 +22,6 @@ import { GroupModel } from '../core/group.model';
 import { GroupUserModel } from '../core/group-user.model';
 
 @Component({
-    moduleId: module.id,
     selector: 'people-widget',
     templateUrl: './people.widget.html',
     styleUrls: ['./people.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.ts
index 5f1c960241..2c63ca5268 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.ts
@@ -23,7 +23,6 @@ import { FormFieldOption } from './../core/form-field-option';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'radio-buttons-widget',
     templateUrl: './radio-buttons.widget.html',
     styleUrls: ['./radio-buttons.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts
index 4e7ab7cd8f..e81d1bcb5f 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts
@@ -21,7 +21,6 @@ import { TabModel, FormFieldModel } from './../core/index';
 declare var componentHandler: any;
 
 @Component({
-    moduleId: module.id,
     selector: 'tabs-widget',
     templateUrl: './tabs.widget.html'
 })
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.ts
index 43370f32ba..309ed71135 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.ts
@@ -19,7 +19,6 @@ import { Component } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
 
 @Component({
-    moduleId: module.id,
     selector: 'text-widget',
     templateUrl: './text.widget.html',
     styleUrls: ['./text.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts
index 37eb4ac166..be5ee9444d 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts
@@ -23,7 +23,6 @@ import { FormFieldOption } from './../core/form-field-option';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'typeahead-widget',
     templateUrl: './typeahead.widget.html',
     styleUrls: ['./typeahead.widget.css']
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts
index 2314853757..214304e06f 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts
@@ -21,7 +21,6 @@ import { WidgetComponent } from './../widget.component';
 import { FormService } from '../../../services/form.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'upload-widget',
     templateUrl: './upload.widget.html',
     styleUrls: ['./upload.widget.css']
@@ -69,8 +68,7 @@ export class UploadWidget extends WidgetComponent implements OnInit {
                     this.field.value = [response];
                     this.field.json.value = [response];
                 }, (error: any) => {
-                    this.logService.error(error);
-                    window.alert('Error uploading file. See console output for more details.');
+                    this.logService.error('Error uploading file. See console output for more details.');
                 });
         }
     }
diff --git a/ng2-components/ng2-activiti-form/src/services/assets/widget-visibility.service.mock.ts b/ng2-components/ng2-activiti-form/src/services/assets/widget-visibility.service.mock.ts
index 15c5b8cdc8..80976e59f1 100644
--- a/ng2-components/ng2-activiti-form/src/services/assets/widget-visibility.service.mock.ts
+++ b/ng2-components/ng2-activiti-form/src/services/assets/widget-visibility.service.mock.ts
@@ -17,15 +17,15 @@
 
 import { FormModel, FormValues } from '../../components/widgets/core/index';
 
-export var formTest = new FormModel({});
+export let formTest = new FormModel({});
 
-export var fakeTaskProcessVariableModels = [
+export let fakeTaskProcessVariableModels = [
     {id: 'TEST_VAR_1', type: 'string', value: 'test_value_1'},
     {id: 'TEST_VAR_2', type: 'string', value: 'test_value_2'},
     {id: 'TEST_VAR_3', type: 'string', value: 'test_value_3'}
 ];
 
-export var formValues: FormValues = {
+export let formValues: FormValues = {
     'test_1': 'value_1',
     'test_2': 'value_2',
     'test_3': 'value_1',
@@ -34,7 +34,7 @@ export var formValues: FormValues = {
     'dropdown': {'id': 'dropdown_id', 'name': 'dropdown_label'}
 };
 
-export var fakeFormJson = {
+export let fakeFormJson = {
     id: '9999',
     name: 'FORM_VISIBILITY',
     processDefinitionId: 'PROCESS_TEST:9:9999',
diff --git a/ng2-components/ng2-activiti-form/src/services/form.service.ts b/ng2-components/ng2-activiti-form/src/services/form.service.ts
index 5845f3f947..4a789cd5f3 100644
--- a/ng2-components/ng2-activiti-form/src/services/form.service.ts
+++ b/ng2-components/ng2-activiti-form/src/services/form.service.ts
@@ -158,7 +158,7 @@ export class FormService {
      * @returns {Observable<any>}
      */
     saveTaskForm(taskId: string, formValues: FormValues): Observable<any> {
-        let body = JSON.stringify({ values: formValues });
+        let body = JSON.stringify({values: formValues});
 
         return Observable.fromPromise(this.apiService.getInstance().activiti.taskApi.saveTaskForm(taskId, body))
             .catch(err => this.handleError(err));
@@ -172,7 +172,7 @@ export class FormService {
      * @returns {Observable<any>}
      */
     completeTaskForm(taskId: string, formValues: FormValues, outcome?: string): Observable<any> {
-        let data: any = { values: formValues };
+        let data: any = {values: formValues};
         if (outcome) {
             data.outcome = outcome;
         }
@@ -251,17 +251,17 @@ export class FormService {
      * @returns {Observable<any>}
      */
     createTemporaryRawRelatedContent(file: any): Observable<any> {
-        return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.createTemporaryRawRelatedContent(file));
+        return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.createTemporaryRawRelatedContent(file)).catch(err => this.handleError(err));
     }
 
     getFileContent(contentId: number): Observable<any> {
         let alfrescoApi = this.apiService.getInstance();
-        return Observable.fromPromise(alfrescoApi.activiti.contentApi.getContent(contentId));
+        return Observable.fromPromise(alfrescoApi.activiti.contentApi.getContent(contentId)).catch(err => this.handleError(err));
     }
 
     getFileRawContent(contentId: number): Observable<any> {
         let alfrescoApi = this.apiService.getInstance();
-        return Observable.fromPromise(alfrescoApi.activiti.contentApi.getRawContent(contentId));
+        return Observable.fromPromise(alfrescoApi.activiti.contentApi.getRawContent(contentId)).catch(err => this.handleError(err));
     }
 
     getFileRawContentUrl(contentId: number): string {
@@ -271,31 +271,31 @@ export class FormService {
 
     getContentThumbnailUrl(contentId: number): Observable<any> {
         let alfrescoApi = this.apiService.getInstance();
-        return Observable.fromPromise(alfrescoApi.activiti.contentApi.getContentThumbnailUrl(contentId));
+        return Observable.fromPromise(alfrescoApi.activiti.contentApi.getContentThumbnailUrl(contentId)).catch(err => this.handleError(err));
     }
 
     getRestFieldValues(taskId: string, field: string): Observable<any> {
         let alfrescoApi = this.apiService.getInstance();
-        return Observable.fromPromise(alfrescoApi.activiti.taskApi.getRestFieldValues(taskId, field));
+        return Observable.fromPromise(alfrescoApi.activiti.taskApi.getRestFieldValues(taskId, field)).catch(err => this.handleError(err));
     }
 
     getRestFieldValuesByProcessId(processDefinitionId: string, field: string): Observable<any> {
         let alfrescoApi = this.apiService.getInstance();
-        return Observable.fromPromise(alfrescoApi.activiti.processApi.getRestFieldValues(processDefinitionId, field));
+        return Observable.fromPromise(alfrescoApi.activiti.processApi.getRestFieldValues(processDefinitionId, field)).catch(err => this.handleError(err));
     }
 
     getRestFieldValuesColumnByProcessId(processDefinitionId: string, field: string, column?: string): Observable<any> {
         let alfrescoApi = this.apiService.getInstance();
-        return Observable.fromPromise(alfrescoApi.activiti.processApi.getRestTableFieldValues(processDefinitionId, field, column));
+        return Observable.fromPromise(alfrescoApi.activiti.processApi.getRestTableFieldValues(processDefinitionId, field, column)).catch(err => this.handleError(err));
     }
 
     getRestFieldValuesColumn(taskId: string, field: string, column?: string): Observable<any> {
         let alfrescoApi = this.apiService.getInstance();
-        return Observable.fromPromise(alfrescoApi.activiti.taskApi.getRestFieldValuesColumn(taskId, field, column));
+        return Observable.fromPromise(alfrescoApi.activiti.taskApi.getRestFieldValuesColumn(taskId, field, column)).catch(err => this.handleError(err));
     }
 
     getWorkflowUsers(filter: string, groupId?: string): Observable<GroupUserModel[]> {
-        let option: any = { filter: filter };
+        let option: any = {filter: filter};
         if (groupId) {
             option.groupId = groupId;
         }
@@ -310,7 +310,7 @@ export class FormService {
     }
 
     getWorkflowGroups(filter: string, groupId?: string): Observable<GroupModel[]> {
-        let option: any = { filter: filter };
+        let option: any = {filter: filter};
         if (groupId) {
             option.groupId = groupId;
         }
diff --git a/ng2-components/ng2-activiti-form/tsconfig.json b/ng2-components/ng2-activiti-form/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-activiti-form/tsconfig.json
+++ b/ng2-components/ng2-activiti-form/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-activiti-form/webpack.build.js b/ng2-components/ng2-activiti-form/webpack.build.js
new file mode 100644
index 0000000000..ca03eac369
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-activiti-form": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-activiti-processlist/README.md b/ng2-components/ng2-activiti-processlist/README.md
index af59e10333..247132c2fd 100644
--- a/ng2-components/ng2-activiti-processlist/README.md
+++ b/ng2-components/ng2-activiti-processlist/README.md
@@ -425,7 +425,6 @@ npm start
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-activiti-processlist/demo/package.json b/ng2-components/ng2-activiti-processlist/demo/package.json
index da0ce56e29..12d7875f30 100644
--- a/ng2-components/ng2-activiti-processlist/demo/package.json
+++ b/ng2-components/ng2-activiti-processlist/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Will Abson",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -25,22 +25,22 @@
     "demo"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.7.6",
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
@@ -48,7 +48,7 @@
     "material-design-lite": "1.2.1",
     "moment": "2.15.1",
     "md-date-time-picker": "2.2.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-activiti-tasklist": "1.4.0",
     "ng2-alfresco-core": "1.4.0",
diff --git a/ng2-components/ng2-activiti-processlist/demo/systemjs.config.js b/ng2-components/ng2-activiti-processlist/demo/systemjs.config.js
index 66d1d46149..952fd92e90 100644
--- a/ng2-components/ng2-activiti-processlist/demo/systemjs.config.js
+++ b/ng2-components/ng2-activiti-processlist/demo/systemjs.config.js
@@ -46,11 +46,11 @@
             'moment': { defaultExtension: 'js' },
             'ng2-translate': { defaultExtension: 'js' },
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-processlist': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-alfresco-datatable': { main: './bundles/ng2-alfresco-datatable.js', defaultExtension: 'js'},
+            'ng2-activiti-form': { main: './bundles/ng2-activiti-form.js', defaultExtension: 'js'},
+            'ng2-activiti-tasklist': { main: './bundles/ng2-activiti-tasklist.js', defaultExtension: 'js'},
+            'ng2-activiti-processlist': { main: './bundles/ng2-activiti-processlist.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-activiti-processlist/demo/tslint.json b/ng2-components/ng2-activiti-processlist/demo/tslint.json
index 55c0f8a666..36e753c92c 100644
--- a/ng2-components/ng2-activiti-processlist/demo/tslint.json
+++ b/ng2-components/ng2-activiti-processlist/demo/tslint.json
@@ -26,7 +26,7 @@
     "label-undefined": true,
     "max-line-length": [
       true,
-      140
+      180
     ],
     "member-ordering": [
       true,
@@ -36,7 +36,7 @@
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
     "no-consecutive-blank-lines": true,
     "no-console": [
@@ -52,11 +52,11 @@
     "no-debugger": true,
     "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
diff --git a/ng2-components/ng2-activiti-processlist/gulpfile.ts b/ng2-components/ng2-activiti-processlist/gulpfile.ts
deleted file mode 100755
index ebf8207f0d..0000000000
--- a/ng2-components/ng2-activiti-processlist/gulpfile.ts
+++ /dev/null
@@ -1,307 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/'
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-activiti-processlist/karma-test-shim.js b/ng2-components/ng2-activiti-processlist/karma-test-shim.js
index a74dc45f44..4639fe986a 100644
--- a/ng2-components/ng2-activiti-processlist/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-processlist/karma-test-shim.js
@@ -1,123 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-activiti-processlist/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'moment' : 'npm:moment/min/moment.min.js',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-activiti-form': 'npm:ng2-activiti-form',
-    'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-    'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'moment': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
-    'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-activiti-processlist/karma.conf.js b/ng2-components/ng2-activiti-processlist/karma.conf.js
deleted file mode 100644
index 62bec8921f..0000000000
--- a/ng2-components/ng2-activiti-processlist/karma.conf.js
+++ /dev/null
@@ -1,138 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-      'node_modules/moment/min/moment.min.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-activiti-form/src/**/*.*', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-activiti-form/index.js', included: false, served: true, watched: false },
-
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      { pattern: 'node_modules/ng2-alfresco-datatable/src/**/*.*', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-datatable/index.js', included: false, served: true, watched: false },
-
-      { pattern: 'node_modules/ng2-activiti-tasklist/src/**/*.*', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-activiti-tasklist/index.js', included: false, served: true, watched: false },
-
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event|mdl*).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-activiti-processlist/package.json b/ng2-components/ng2-activiti-processlist/package.json
index 53606b53bf..0c2ebcb793 100644
--- a/ng2-components/ng2-activiti-processlist/package.json
+++ b/ng2-components/ng2-activiti-processlist/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-form ng2-activiti-tasklist",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-activiti-processlist",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-activiti-processlist",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-activiti-processlist.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -45,15 +35,15 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
@@ -63,48 +53,20 @@
     "ng2-activiti-tasklist": "1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
     "cpx": "^1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-ajax": "^3.2.0",
-    "jasmine-core": "2.4.1",
-    "karma": "~0.13.22",
-    "karma-chrome-launcher": "~1.0.1",
-    "karma-coverage": "^1.0.0",
-    "karma-jasmine": "~1.0.2",
-    "karma-jasmine-ajax": "^0.1.13",
-    "karma-jasmine-html-reporter": "^0.2.0",
-    "karma-mocha-reporter": "^2.0.3",
     "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "^0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
@@ -116,7 +78,7 @@
   },
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": false,
diff --git a/ng2-components/ng2-activiti-processlist/src/assets/activiti-process-instances-list.mock.ts b/ng2-components/ng2-activiti-processlist/src/assets/activiti-process-instances-list.mock.ts
index 1181b9df2d..0292f2076d 100644
--- a/ng2-components/ng2-activiti-processlist/src/assets/activiti-process-instances-list.mock.ts
+++ b/ng2-components/ng2-activiti-processlist/src/assets/activiti-process-instances-list.mock.ts
@@ -17,7 +17,7 @@
 
 import { ProcessInstance } from '../models/process-instance.model';
 
-export var fakeProcessInstances = [
+export let fakeProcessInstances = [
     new ProcessInstance({
         id: 1,
         name: 'Process 773443333',
@@ -45,7 +45,7 @@ export var fakeProcessInstances = [
     })
 ];
 
-export var fakeProcessInstancesWithNoName = [
+export let fakeProcessInstancesWithNoName = [
     new ProcessInstance({
         id: 1,
         name: null,
diff --git a/ng2-components/ng2-activiti-processlist/src/assets/activiti-process.model.mock.ts b/ng2-components/ng2-activiti-processlist/src/assets/activiti-process.model.mock.ts
index bbcf650f15..08c6d83361 100644
--- a/ng2-components/ng2-activiti-processlist/src/assets/activiti-process.model.mock.ts
+++ b/ng2-components/ng2-activiti-processlist/src/assets/activiti-process.model.mock.ts
@@ -39,7 +39,7 @@ export class SingleProcessList extends ProcessList {
     }
 }
 
-export var exampleProcess = new ProcessInstance({
+export let exampleProcess = new ProcessInstance({
     id: '123',
     name: 'Process 123',
     started: '2016-11-10T03:37:30.010+0000',
@@ -51,7 +51,7 @@ export var exampleProcess = new ProcessInstance({
     }
 });
 
-export var exampleProcessNoName = new ProcessInstance({
+export let exampleProcessNoName = new ProcessInstance({
     id: '123',
     name: null,
     started: '2016-11-10T03:37:30.010+0000',
diff --git a/ng2-components/ng2-activiti-processlist/src/assets/activiti-process.service.mock.ts b/ng2-components/ng2-activiti-processlist/src/assets/activiti-process.service.mock.ts
index a218c3c10e..145261ffd1 100644
--- a/ng2-components/ng2-activiti-processlist/src/assets/activiti-process.service.mock.ts
+++ b/ng2-components/ng2-activiti-processlist/src/assets/activiti-process.service.mock.ts
@@ -23,7 +23,7 @@ import {
 } from 'ng2-activiti-tasklist';
 import { ProcessDefinitionRepresentation, FilterProcessRepresentationModel } from '../models/index';
 
-export var fakeFilters = {
+export let fakeFilters = {
     size: 1, total: 1, start: 0,
     data: [new FilterProcessRepresentationModel({
         'name': 'Running',
@@ -35,17 +35,17 @@ export var fakeFilters = {
     })]
 };
 
-export var fakeEmptyFilters = {
+export let fakeEmptyFilters = {
     size: 0, total: 0, start: 0,
     data: []
 };
 
-export var fakeError = {
+export let fakeError = {
     message: null,
     messageKey: 'GENERAL.ERROR.FORBIDDEN'
 };
 
-export var fakeApp1 = new AppDefinitionRepresentationModel({
+export let fakeApp1 = new AppDefinitionRepresentationModel({
     deploymentId: 26,
     name: 'HR processes',
     icon: 'glyphicon-cloud',
@@ -55,7 +55,7 @@ export var fakeApp1 = new AppDefinitionRepresentationModel({
     id: 1
 });
 
-export var fakeApp2 = new AppDefinitionRepresentationModel({
+export let fakeApp2 = new AppDefinitionRepresentationModel({
     deploymentId: 2501,
     name: 'Sales onboarding',
     icon: 'glyphicon-asterisk',
@@ -65,7 +65,7 @@ export var fakeApp2 = new AppDefinitionRepresentationModel({
     id: 1000
 });
 
-export var fakeTaskList = {
+export let fakeTaskList = {
     data: [ new TaskDetailsModel({
         id: 1,
         name: 'Task 1',
@@ -79,14 +79,14 @@ export var fakeTaskList = {
     })]
 };
 
-export var fakeComment = new Comment(1, 'Test', '2016-11-10T03:37:30.010+0000', new User({
+export let fakeComment = new Comment(1, 'Test', '2016-11-10T03:37:30.010+0000', new User({
     id: 13,
     firstName: 'Wilbur',
     lastName: 'Adams',
     email: 'wilbur@app.com'
 }));
 
-export var fakeProcessDef = new ProcessDefinitionRepresentation({
+export let fakeProcessDef = new ProcessDefinitionRepresentation({
     id: '32323',
     key: 'blah',
     name: 'Process 1'
diff --git a/ng2-components/ng2-activiti-processlist/src/assets/activiti-start-process.component.mock.ts b/ng2-components/ng2-activiti-processlist/src/assets/activiti-start-process.component.mock.ts
index da1ed613fe..bf6fdeae78 100644
--- a/ng2-components/ng2-activiti-processlist/src/assets/activiti-start-process.component.mock.ts
+++ b/ng2-components/ng2-activiti-processlist/src/assets/activiti-start-process.component.mock.ts
@@ -18,12 +18,12 @@
 import { ProcessInstance } from './../models/process-instance.model';
 import { ProcessDefinitionRepresentation } from './../models/process-definition.model';
 
-export var newProcess = new ProcessInstance({
+export let newProcess = new ProcessInstance({
     id: '32323',
     name: 'Process'
 });
 
-export var fakeProcessDefs = [new ProcessDefinitionRepresentation({
+export let fakeProcessDefs = [new ProcessDefinitionRepresentation({
     id: 'my:process1',
     name: 'My Process 1',
     hasStartForm: false
@@ -33,13 +33,13 @@ export var fakeProcessDefs = [new ProcessDefinitionRepresentation({
     hasStartForm: false
 })];
 
-export var fakeProcessDefWithForm = [new ProcessDefinitionRepresentation({
+export let fakeProcessDefWithForm = [new ProcessDefinitionRepresentation({
     id: 'my:process1',
     name: 'My Process 1',
     hasStartForm: true
 })];
 
-export var taskFormMock = {
+export let taskFormMock = {
     'id': 4,
     'name': 'Translation request',
     'processDefinitionId': 'TranslationProcess:2:8',
diff --git a/ng2-components/ng2-activiti-processlist/src/assets/task-details.mock.ts b/ng2-components/ng2-activiti-processlist/src/assets/task-details.mock.ts
index ef07e36a07..eacb298e81 100644
--- a/ng2-components/ng2-activiti-processlist/src/assets/task-details.mock.ts
+++ b/ng2-components/ng2-activiti-processlist/src/assets/task-details.mock.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-export var taskDetailsMock = {
+export let taskDetailsMock = {
     'id': '91',
     'name': 'Request translation',
     'description': null,
@@ -49,7 +49,7 @@ export var taskDetailsMock = {
     'memberOfCandidateGroup': false
 };
 
-export var taskFormMock = {
+export let taskFormMock = {
     'id': 4,
     'name': 'Translation request',
     'processDefinitionId': 'TranslationProcess:2:8',
@@ -181,12 +181,12 @@ export var taskFormMock = {
     'globalDateFormat': 'D-M-YYYY'
 };
 
-export var tasksMock = {
+export let tasksMock = {
     data: [
         taskDetailsMock
     ]
 };
 
-export var noDataMock = {
+export let noDataMock = {
     data: []
 };
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts
index 96ed76ce60..95d61cf168 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts
@@ -25,7 +25,6 @@ declare let componentHandler: any;
 
 @Component({
     selector: 'activiti-process-instance-filters',
-    moduleId: module.id,
     templateUrl: './activiti-filters.component.html',
     styleUrls: ['activiti-filters.component.css']
 })
@@ -101,7 +100,6 @@ export class ActivitiProcessFilters implements OnInit, OnChanges {
                             this.onSuccess.emit(resDefault);
                         },
                         (errDefault: any) => {
-                            this.logService.error(errDefault);
                             this.onError.emit(errDefault);
                         }
                     );
@@ -116,7 +114,6 @@ export class ActivitiProcessFilters implements OnInit, OnChanges {
                 }
             },
             (err: any) => {
-                this.logService.error(err);
                 this.onError.emit(err);
             }
         );
@@ -133,7 +130,6 @@ export class ActivitiProcessFilters implements OnInit, OnChanges {
                 this.selectFirstFilter();
             },
             (err) => {
-                this.logService.error(err);
                 this.onError.emit(err);
             });
     }
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.ts
index a62fbd2b2c..17449f34c3 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.ts
@@ -27,7 +27,6 @@ declare let dialogPolyfill: any;
 
 @Component({
     selector: 'activiti-process-instance-comments',
-    moduleId: module.id,
     templateUrl: './activiti-process-comments.component.html',
     styleUrls: ['./activiti-process-comments.component.css'],
     providers: [ActivitiProcessService]
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.ts
index b39ae9ca56..350098bf35 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.ts
@@ -27,7 +27,6 @@ import { ProcessInstance } from '../models/process-instance.model';
 
 @Component({
     selector: 'activiti-process-instance-details',
-    moduleId: module.id,
     templateUrl: './activiti-process-instance-details.component.html',
     styleUrls: ['./activiti-process-instance-details.component.css']
 })
@@ -51,6 +50,9 @@ export class ActivitiProcessInstanceDetails implements OnChanges {
     @Output()
     processCancelled: EventEmitter<any> = new EventEmitter<any>();
 
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
     @Output()
     taskClick: EventEmitter<TaskDetailsEvent> = new EventEmitter<TaskDetailsEvent>();
 
@@ -108,7 +110,7 @@ export class ActivitiProcessInstanceDetails implements OnChanges {
             (data) => {
                 this.processCancelled.emit(data);
             }, (err) => {
-                this.logService.error(err);
+                this.error.emit(err);
             });
     }
 
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.ts
index b1ecf3f1ce..d1877a47ec 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.ts
@@ -24,7 +24,6 @@ declare let componentHandler: any;
 
 @Component({
     selector: 'activiti-process-instance-header',
-    moduleId: module.id,
     templateUrl: './activiti-process-instance-header.component.html',
     styleUrls: ['./activiti-process-instance-header.component.css']
 })
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-tasks.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-tasks.component.ts
index 5ae9d8a90f..c5e9d12de6 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-tasks.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-tasks.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit, ViewChild, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, Output, OnInit, ViewChild, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { DatePipe } from '@angular/common';
 import { Observable, Observer } from 'rxjs/Rx';
 import { AlfrescoTranslationService, LogService } from 'ng2-alfresco-core';
@@ -28,7 +28,6 @@ declare let dialogPolyfill: any;
 
 @Component({
     selector: 'activiti-process-instance-tasks',
-    moduleId: module.id,
     templateUrl: './activiti-process-instance-tasks.component.html',
     styleUrls: ['./activiti-process-instance-tasks.component.css']
 })
@@ -40,6 +39,9 @@ export class ActivitiProcessInstanceTasks implements OnInit, OnChanges {
     @Input()
     showRefreshButton: boolean = true;
 
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
     activeTasks: TaskDetailsModel[] = [];
     completedTasks: TaskDetailsModel[] = [];
 
@@ -106,7 +108,7 @@ export class ActivitiProcessInstanceTasks implements OnInit, OnChanges {
                     });
                 },
                 (err) => {
-                    this.logService.error(err);
+                    this.error.emit(err);
                 }
             );
         } else {
@@ -124,7 +126,7 @@ export class ActivitiProcessInstanceTasks implements OnInit, OnChanges {
                     });
                 },
                 (err) => {
-                    this.logService.error(err);
+                    this.error.emit(err);
                 }
             );
         } else {
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts
index 34c8ae18f4..ed8f578e20 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts
@@ -27,7 +27,6 @@ declare let dialogPolyfill: any;
 
 @Component({
     selector: 'activiti-process-instance-variables',
-    moduleId: module.id,
     templateUrl: './activiti-process-instance-variables.component.html',
     styleUrls: [],
     providers: [ActivitiProcessService]
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts
index e9deafd322..fbc0ab7704 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts
@@ -25,7 +25,6 @@ import { ActivitiProcessService } from '../services/activiti-process.service';
 
 @Component({
     selector: 'activiti-process-instance-list',
-    moduleId: module.id,
     styleUrls: ['./activiti-processlist.component.css'],
     templateUrl: './activiti-processlist.component.html'
 })
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts
index 04f600864c..35ff83ec9a 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts
@@ -27,7 +27,6 @@ declare let dialogPolyfill: any;
 
 @Component({
     selector: 'activiti-start-process',
-    moduleId: module.id,
     templateUrl: './activiti-start-process.component.html',
     styleUrls: ['./activiti-start-process.component.css']
 })
diff --git a/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.ts b/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.ts
index abdb80ed37..6e0659bc7e 100644
--- a/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.ts
+++ b/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.ts
@@ -24,7 +24,7 @@ import { ProcessInstanceVariable } from './../models/process-instance-variable.m
 import { AppDefinitionRepresentationModel, Comment, TaskDetailsModel, User } from 'ng2-activiti-tasklist';
 import { FilterProcessRepresentationModel } from '../models/filter-process.model';
 
-declare var moment: any;
+declare let moment: any;
 
 @Injectable()
 export class ActivitiProcessService {
diff --git a/ng2-components/ng2-activiti-processlist/tsconfig.json b/ng2-components/ng2-activiti-processlist/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-activiti-processlist/tsconfig.json
+++ b/ng2-components/ng2-activiti-processlist/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-activiti-processlist/tslint.json b/ng2-components/ng2-activiti-processlist/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-activiti-processlist/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-activiti-processlist/webpack.build.js b/ng2-components/ng2-activiti-processlist/webpack.build.js
new file mode 100644
index 0000000000..00308bce8f
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-activiti-processlist": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md
index c61f6334f3..a0b588a6b2 100644
--- a/ng2-components/ng2-activiti-tasklist/README.md
+++ b/ng2-components/ng2-activiti-tasklist/README.md
@@ -452,7 +452,6 @@ npm start
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-activiti-tasklist/demo/package.json b/ng2-components/ng2-activiti-tasklist/demo/package.json
index 77b30a3cda..6a4217bd79 100644
--- a/ng2-components/ng2-activiti-tasklist/demo/package.json
+++ b/ng2-components/ng2-activiti-tasklist/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -19,22 +19,22 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.7.6",
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
@@ -42,7 +42,7 @@
     "material-design-lite": "1.2.1",
     "moment": "2.15.1",
     "md-date-time-picker": "2.2.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0",
diff --git a/ng2-components/ng2-activiti-tasklist/demo/systemjs.config.js b/ng2-components/ng2-activiti-tasklist/demo/systemjs.config.js
index e17ac70556..772a76380a 100644
--- a/ng2-components/ng2-activiti-tasklist/demo/systemjs.config.js
+++ b/ng2-components/ng2-activiti-tasklist/demo/systemjs.config.js
@@ -45,10 +45,10 @@
             'moment': { defaultExtension: 'js' },
             'ng2-translate': { defaultExtension: 'js' },
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-alfresco-datatable': { main: './bundles/ng2-alfresco-datatable.js', defaultExtension: 'js'},
+            'ng2-activiti-form': { main: './bundles/ng2-activiti-form.js', defaultExtension: 'js'},
+            'ng2-activiti-tasklist': { main: './bundles/ng2-activiti-tasklist.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-activiti-tasklist/demo/tslint.json b/ng2-components/ng2-activiti-tasklist/demo/tslint.json
index 55c0f8a666..36e753c92c 100644
--- a/ng2-components/ng2-activiti-tasklist/demo/tslint.json
+++ b/ng2-components/ng2-activiti-tasklist/demo/tslint.json
@@ -26,7 +26,7 @@
     "label-undefined": true,
     "max-line-length": [
       true,
-      140
+      180
     ],
     "member-ordering": [
       true,
@@ -36,7 +36,7 @@
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
     "no-consecutive-blank-lines": true,
     "no-console": [
@@ -52,11 +52,11 @@
     "no-debugger": true,
     "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
diff --git a/ng2-components/ng2-activiti-tasklist/gulpfile.ts b/ng2-components/ng2-activiti-tasklist/gulpfile.ts
deleted file mode 100755
index 7df53caceb..0000000000
--- a/ng2-components/ng2-activiti-tasklist/gulpfile.ts
+++ /dev/null
@@ -1,308 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/',
-            'moment':'node_modules/moment/min/moment.min'
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-activiti-tasklist/karma-test-shim.js b/ng2-components/ng2-activiti-tasklist/karma-test-shim.js
index c22efeb90d..a18cfe9c2c 100644
--- a/ng2-components/ng2-activiti-tasklist/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-tasklist/karma-test-shim.js
@@ -1,121 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-activiti-tasklist/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'moment' : 'npm:moment/min/moment.min.js',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-activiti-form': 'npm:ng2-activiti-form',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-    'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'moment': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-activiti-tasklist/karma.conf.js b/ng2-components/ng2-activiti-tasklist/karma.conf.js
deleted file mode 100644
index a6f530c506..0000000000
--- a/ng2-components/ng2-activiti-tasklist/karma.conf.js
+++ /dev/null
@@ -1,134 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-      'node_modules/moment/min/moment.min.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-activiti-form/src/**/*.*', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-activiti-form/index.js', included: false, served: true, watched: false },
-
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      { pattern: 'node_modules/ng2-alfresco-datatable/src/**/*.*', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-datatable/index.js', included: false, served: true, watched: false },
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event|mdl*).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-activiti-tasklist/package.json b/ng2-components/ng2-activiti-tasklist/package.json
index 0425d066cc..e84b13e3ab 100644
--- a/ng2-components/ng2-activiti-tasklist/package.json
+++ b/ng2-components/ng2-activiti-tasklist/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-form",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-activiti-tasklist",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-activiti-tasklist",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-activiti-tasklist.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -50,15 +40,15 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
@@ -67,51 +57,24 @@
     "ng2-activiti-form": "1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
-    "cpx": "1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-core": "2.4.1",
-    "karma": "0.13.22",
-    "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "1.0.0",
-    "karma-jasmine": "1.0.2",
-    "karma-jasmine-ajax": "0.1.13",
-    "karma-jasmine-html-reporter": "0.2.0",
-    "karma-mocha-reporter": "2.0.3",
-    "license-check": "1.1.5",
+    "cpx": "^1.3.1",
+    "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
-    "traceur": "0.0.91",
+    "traceur": "^0.0.91",
     "ts-node": "^1.7.0",
     "tslint": "3.15.1",
     "typescript": "^2.0.3",
@@ -119,7 +82,7 @@
   },
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/ng2-components/ng2-activiti-tasklist/src/assets/activiti-apps.mock.ts b/ng2-components/ng2-activiti-tasklist/src/assets/activiti-apps.mock.ts
index 3be2948ddc..d70da2e7b1 100644
--- a/ng2-components/ng2-activiti-tasklist/src/assets/activiti-apps.mock.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/assets/activiti-apps.mock.ts
@@ -17,7 +17,7 @@
 
 import { AppDefinitionRepresentationModel } from '../models/filter.model';
 
-export var nonDeployedApps = [new AppDefinitionRepresentationModel({
+export let nonDeployedApps = [new AppDefinitionRepresentationModel({
     id: '1',
     name: '1',
     icon: 'icon1'
@@ -30,7 +30,7 @@ export var nonDeployedApps = [new AppDefinitionRepresentationModel({
     name: '3',
     icon: 'icon3'
 })];
-export var deployedApps = [new AppDefinitionRepresentationModel({
+export let deployedApps = [new AppDefinitionRepresentationModel({
     id: 1,
     name: 'App1',
     icon: 'icon1',
@@ -74,6 +74,6 @@ export var deployedApps = [new AppDefinitionRepresentationModel({
     tenantId: 9,
     modelId: 66
 })];
-export var defaultApp = [new AppDefinitionRepresentationModel({
+export let defaultApp = [new AppDefinitionRepresentationModel({
     defaultAppId: 'tasks'
 })];
diff --git a/ng2-components/ng2-activiti-tasklist/src/assets/task-details.component.mock.ts b/ng2-components/ng2-activiti-tasklist/src/assets/task-details.component.mock.ts
index cb96238dcf..05bb6c4750 100644
--- a/ng2-components/ng2-activiti-tasklist/src/assets/task-details.component.mock.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/assets/task-details.component.mock.ts
@@ -15,6 +15,6 @@
  * limitations under the License.
  */
 
-export var mockTaskDetailsComponent = {
+export let mockTaskDetailsComponent = {
     noTaskDetailsTemplateComponent: null
 };
diff --git a/ng2-components/ng2-activiti-tasklist/src/assets/task-details.mock.ts b/ng2-components/ng2-activiti-tasklist/src/assets/task-details.mock.ts
index ef07e36a07..eacb298e81 100644
--- a/ng2-components/ng2-activiti-tasklist/src/assets/task-details.mock.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/assets/task-details.mock.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-export var taskDetailsMock = {
+export let taskDetailsMock = {
     'id': '91',
     'name': 'Request translation',
     'description': null,
@@ -49,7 +49,7 @@ export var taskDetailsMock = {
     'memberOfCandidateGroup': false
 };
 
-export var taskFormMock = {
+export let taskFormMock = {
     'id': 4,
     'name': 'Translation request',
     'processDefinitionId': 'TranslationProcess:2:8',
@@ -181,12 +181,12 @@ export var taskFormMock = {
     'globalDateFormat': 'D-M-YYYY'
 };
 
-export var tasksMock = {
+export let tasksMock = {
     data: [
         taskDetailsMock
     ]
 };
 
-export var noDataMock = {
+export let noDataMock = {
     data: []
 };
diff --git a/ng2-components/ng2-activiti-tasklist/src/assets/tasklist-service.mock.ts b/ng2-components/ng2-activiti-tasklist/src/assets/tasklist-service.mock.ts
index ed6ec3e523..c9e6e93e95 100644
--- a/ng2-components/ng2-activiti-tasklist/src/assets/tasklist-service.mock.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/assets/tasklist-service.mock.ts
@@ -20,7 +20,7 @@ import {
     AppDefinitionRepresentationModel
 } from '../models/filter.model';
 
-export var fakeFilters = {
+export let fakeFilters = {
     size: 2, total: 2, start: 0,
     data: [
         new AppDefinitionRepresentationModel(
@@ -36,7 +36,7 @@ export var fakeFilters = {
     ]
 };
 
-export var fakeAppFilter = {
+export let fakeAppFilter = {
     size: 1, total: 1, start: 0,
     data: [
         {
@@ -46,7 +46,7 @@ export var fakeAppFilter = {
     ]
 };
 
-export var fakeApps = {
+export let fakeApps = {
     size: 2, total: 2, start: 0,
     data: [
         {
@@ -60,17 +60,17 @@ export var fakeApps = {
     ]
 };
 
-export var fakeFilter = {
+export let fakeFilter = {
     sort: 'created-desc', text: '', state: 'open', assignment: 'fake-assignee'
 };
 
-export var fakeFilterWithProcessDefinitionKey = {
+export let fakeFilterWithProcessDefinitionKey = {
     sort: 'created-desc', text: '', state: 'open', assignment: 'fake-assignee', processDefinitionKey: '1'
 };
 
-export var fakeUser = { id: 1, email: 'fake-email@dom.com', firstName: 'firstName', lastName: 'lastName' };
+export let fakeUser = { id: 1, email: 'fake-email@dom.com', firstName: 'firstName', lastName: 'lastName' };
 
-export var fakeTaskList = {
+export let fakeTaskList = {
     size: 1, total: 1, start: 0,
     data: [
         {
@@ -81,7 +81,7 @@ export var fakeTaskList = {
     ]
 };
 
-export var fakeTaskListDifferentProcessDefinitionKey = {
+export let fakeTaskListDifferentProcessDefinitionKey = {
     size: 1, total: 1, start: 0,
     data: [
         {
@@ -99,7 +99,7 @@ export var fakeTaskListDifferentProcessDefinitionKey = {
     ]
 };
 
-export var secondFakeTaskList = {
+export let secondFakeTaskList = {
     size: 1, total: 1, start: 0,
     data: [
         {
@@ -110,13 +110,13 @@ export var secondFakeTaskList = {
     ]
 };
 
-export var fakeErrorTaskList = {
+export let fakeErrorTaskList = {
     error: 'wrong request'
 };
 
-export var fakeTaskDetails = { id: '999', name: 'fake-task-name', formKey: '99', assignee: fakeUser };
+export let fakeTaskDetails = { id: '999', name: 'fake-task-name', formKey: '99', assignee: fakeUser };
 
-export var fakeTasksComment = {
+export let fakeTasksComment = {
     size: 2, total: 2, start: 0,
     data: [
         {
@@ -128,7 +128,7 @@ export var fakeTasksComment = {
     ]
 };
 
-export var fakeTasksChecklist = {
+export let fakeTasksChecklist = {
     size: 1, total: 1, start: 0,
     data: [
         {
@@ -144,7 +144,7 @@ export var fakeTasksChecklist = {
     ]
 };
 
-export var fakeRepresentationFilter1: FilterRepresentationModel = new FilterRepresentationModel({
+export let fakeRepresentationFilter1: FilterRepresentationModel = new FilterRepresentationModel({
     appId: 1,
     name: 'CONTAIN FILTER',
     recent: true,
@@ -161,7 +161,7 @@ export var fakeRepresentationFilter1: FilterRepresentationModel = new FilterRepr
     }
 });
 
-export var fakeRepresentationFilter2: FilterRepresentationModel = new FilterRepresentationModel({
+export let fakeRepresentationFilter2: FilterRepresentationModel = new FilterRepresentationModel({
     appId: 2,
     name: 'NO TASK FILTER',
     recent: false,
@@ -178,11 +178,11 @@ export var fakeRepresentationFilter2: FilterRepresentationModel = new FilterRepr
     }
 });
 
-export var fakeAppPromise = new Promise(function (resolve, reject) {
+export let fakeAppPromise = new Promise(function (resolve, reject) {
     resolve(fakeAppFilter);
 });
 
-export var fakeFormList = {
+export let fakeFormList = {
     size: 2,
     total: 2,
     start: 0,
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.ts
index 099bd5c496..88a367b323 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.ts
@@ -27,7 +27,6 @@ declare let componentHandler: any;
 
 @Component({
     selector: 'activiti-apps',
-    moduleId: module.id,
     templateUrl: 'activiti-apps.component.html',
     styleUrls: ['./activiti-apps.component.css', './activiti-apps-grid.component.css'],
     providers: [ActivitiTaskListService]
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-checklist.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-checklist.component.ts
index 6aab11ba69..8ddfa2430f 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-checklist.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-checklist.component.ts
@@ -25,7 +25,6 @@ declare let dialogPolyfill: any;
 
 @Component({
     selector: 'activiti-checklist',
-    moduleId: module.id,
     templateUrl: './activiti-checklist.component.html',
     styleUrls: ['./activiti-checklist.component.css'],
     providers: [ActivitiTaskListService]
@@ -47,6 +46,9 @@ export class ActivitiChecklist implements OnInit, OnChanges {
     @Output()
     checklistTaskDeleted: EventEmitter<string> = new EventEmitter<string>();
 
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
     @ViewChild('dialog')
     dialog: any;
 
@@ -95,8 +97,8 @@ export class ActivitiChecklist implements OnInit, OnChanges {
                         this.taskObserver.next(task);
                     });
                 },
-                (err) => {
-                    this.logService.error(err);
+                (error) => {
+                    this.error.emit(error);
                 }
             );
         } else {
@@ -125,8 +127,8 @@ export class ActivitiChecklist implements OnInit, OnChanges {
                 this.checklistTaskCreated.emit(res);
                 this.taskName = '';
             },
-            (err) => {
-                this.logService.error(err);
+            (error) => {
+                this.error.emit(error);
             }
         );
         this.cancel();
@@ -138,8 +140,8 @@ export class ActivitiChecklist implements OnInit, OnChanges {
                 this.checklist = this.checklist.filter(check => check.id !== taskId);
                 this.checklistTaskDeleted.emit(taskId);
             },
-            (err) => {
-                this.logService.error(err);
+            (error) => {
+                this.error.emit(error);
             });
     }
 
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.ts
index 4380c3ad82..2f2256d0f7 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.ts
@@ -25,7 +25,6 @@ declare let dialogPolyfill: any;
 
 @Component({
     selector: 'activiti-comments',
-    moduleId: module.id,
     templateUrl: './activiti-comments.component.html',
     styleUrls: ['./activiti-comments.component.css'],
     providers: [ActivitiTaskListService]
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.ts
index 415c13e2da..a5898262ad 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.ts
@@ -25,7 +25,6 @@ declare let componentHandler: any;
 
 @Component({
     selector: 'activiti-filters',
-    moduleId: module.id,
     templateUrl: './activiti-filters.component.html',
     styleUrls: ['activiti-filters.component.css'],
     providers: [ActivitiTaskListService]
@@ -120,7 +119,6 @@ export class ActivitiFilters implements OnInit, OnChanges {
                             this.onSuccess.emit(resDefault);
                         },
                         (errDefault: any) => {
-                            this.logService.error(errDefault);
                             this.onError.emit(errDefault);
                         }
                     );
@@ -135,7 +133,6 @@ export class ActivitiFilters implements OnInit, OnChanges {
                 }
             },
             (err: any) => {
-                this.logService.error(err);
                 this.onError.emit(err);
             }
         );
@@ -152,7 +149,6 @@ export class ActivitiFilters implements OnInit, OnChanges {
                 this.selectFirstFilter();
             },
             (err) => {
-                this.logService.error(err);
                 this.onError.emit(err);
             });
     }
@@ -173,7 +169,6 @@ export class ActivitiFilters implements OnInit, OnChanges {
                 filteredFilterList.push(filter);
             },
             (err) => {
-                this.logService.error(err);
                 this.onError.emit(err);
             },
             () => {
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.ts
index 2defe31809..077cad8a2b 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.ts
@@ -25,17 +25,14 @@ declare let componentHandler: any;
 
 @Component({
     selector: 'activiti-people-search',
-    moduleId: module.id,
     templateUrl: './activiti-people-search.component.html',
     styleUrls: ['./activiti-people-search.component.css']
 })
 
 export class ActivitiPeopleSearch implements OnInit, AfterViewInit {
 
-    private baseComponentPath: string = module.id.replace('components/activiti-people-search.component.js', '');
-
     @Input()
-    iconImageUrl: string = this.baseComponentPath + 'assets/images/user.jpg';
+    iconImageUrl: string = require('../assets/images/user.jpg');
 
     @Input()
     results: Observable<User[]>;
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.ts
index 3009213b80..3b93f7e1f0 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.ts
@@ -25,16 +25,13 @@ declare let dialogPolyfill: any;
 
 @Component({
     selector: 'activiti-people',
-    moduleId: module.id,
     templateUrl: './activiti-people.component.html',
     styleUrls: ['./activiti-people.component.css']
 })
 export class ActivitiPeople {
 
-    private baseComponentPath: string = module.id.replace('components/activiti-people.component.js', '');
-
     @Input()
-    iconImageUrl: string = this.baseComponentPath + 'assets/images/user.jpg';
+    iconImageUrl: string = require('../assets/images/user.jpg');
 
     @Input()
     people: User [] = [];
@@ -110,7 +107,7 @@ export class ActivitiPeople {
 
     getDisplayUser(user: User): string {
         let firstName = user.firstName && user.firstName !== 'null' ? user.firstName : 'N/A';
-        let lastName =  user.lastName && user.lastName !== 'null' ? user.lastName : 'N/A';
+        let lastName = user.lastName && user.lastName !== 'null' ? user.lastName : 'N/A';
         return firstName + ' ' + lastName;
     }
 
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts
index d380a14b4a..673f0f449a 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts
@@ -25,7 +25,6 @@ declare let dialogPolyfill: any;
 
 @Component({
     selector: 'activiti-start-task',
-    moduleId: module.id,
     templateUrl: './activiti-start-task.component.html',
     styleUrls: ['./activiti-start-task.component.css']
 })
@@ -37,6 +36,9 @@ export class ActivitiStartTaskButton {
     @Output()
     onSuccess: EventEmitter<any> = new EventEmitter<any>();
 
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
     @ViewChild('dialog')
     dialog: any;
 
@@ -76,8 +78,7 @@ export class ActivitiStartTaskButton {
                     this.attachForm(res.id);
                 },
                 (err) => {
-                    window.alert('An error occurred while trying to add the task');
-                    this.logService.error(err);
+                    this.logService.error('An error occurred while trying to add the task');
                 }
             );
         }
@@ -111,8 +112,8 @@ export class ActivitiStartTaskButton {
                 this.forms = res;
             },
             (err) => {
-                window.alert('An error occurred while trying to get the forms');
-                this.logService.error(err);
+                this.error.emit(err);
+                this.logService.error('An error occurred while trying to get the forms');
             });
     }
 
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
index cc33b8efd8..131d3554a2 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
@@ -25,14 +25,11 @@ import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
 
 @Component({
     selector: 'activiti-task-details',
-    moduleId: module.id,
     templateUrl: './activiti-task-details.component.html',
     styleUrls: ['./activiti-task-details.component.css']
 })
 export class ActivitiTaskDetails implements OnInit, OnChanges {
 
-    private baseComponentPath: string = module.id.replace('components/activiti-task-details.component', '');
-
     @ViewChild('activiticomments')
     activiticomments: any;
 
@@ -82,7 +79,7 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
     showFormRefreshButton: boolean = true;
 
     @Input()
-    peopleIconImageUrl: string = this.baseComponentPath + 'assets/images/user.jpg';
+    peopleIconImageUrl: string = require('../assets/images/user.jpg');
 
     @Output()
     formSaved: EventEmitter<FormModel> = new EventEmitter<FormModel>();
@@ -223,7 +220,6 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
                     this.reset();
                 }
             }, (error) => {
-                this.logService.error(error);
                 this.onError.emit(error);
             });
     }
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.ts
index 0c4af57dd0..4a48b82f84 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.ts
@@ -22,7 +22,6 @@ import { ActivitiTaskListService } from './../services/activiti-tasklist.service
 
 @Component({
     selector: 'activiti-task-header',
-    moduleId: module.id,
     templateUrl: './activiti-task-header.component.html',
     styleUrls: ['./activiti-task-header.component.css']
 })
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
index 14368caeba..888a66e577 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
@@ -38,7 +38,6 @@ import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
 
 @Component({
     selector: 'activiti-tasklist',
-    moduleId: module.id,
     templateUrl: './activiti-tasklist.component.html',
     styleUrls: ['./activiti-tasklist.component.css']
 })
@@ -191,11 +190,9 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
                         this.selectTask(requestNode.landingTaskId);
                         this.onSuccess.emit(response);
                     }, (error) => {
-                        this.logService.error(error);
                         this.onError.emit(error);
                     });
             }, (err) => {
-                this.logService.error(err);
                 this.onError.emit(err);
             });
     }
diff --git a/ng2-components/ng2-activiti-tasklist/tsconfig.json b/ng2-components/ng2-activiti-tasklist/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-activiti-tasklist/tsconfig.json
+++ b/ng2-components/ng2-activiti-tasklist/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-activiti-tasklist/tslint.json b/ng2-components/ng2-activiti-tasklist/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-activiti-tasklist/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-activiti-tasklist/webpack.build.js b/ng2-components/ng2-activiti-tasklist/webpack.build.js
new file mode 100644
index 0000000000..9ba6ea0a4f
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-activiti-tasklist": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-alfresco-core/README.md b/ng2-components/ng2-alfresco-core/README.md
index 88522d275c..1f9a408051 100644
--- a/ng2-components/ng2-alfresco-core/README.md
+++ b/ng2-components/ng2-alfresco-core/README.md
@@ -503,7 +503,6 @@ npm run coverage
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-alfresco-core/gulpfile.ts b/ng2-components/ng2-alfresco-core/gulpfile.ts
deleted file mode 100755
index 847cd6dfd1..0000000000
--- a/ng2-components/ng2-alfresco-core/gulpfile.ts
+++ /dev/null
@@ -1,308 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/'
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/alfresco-js-api/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-alfresco-core/karma-test-shim.js b/ng2-components/ng2-alfresco-core/karma-test-shim.js
index 1e8aa6757b..3fd44b2d86 100644
--- a/ng2-components/ng2-alfresco-core/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-core/karma-test-shim.js
@@ -1,113 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-alfresco-core/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-alfresco-core/karma.conf.js b/ng2-components/ng2-alfresco-core/karma.conf.js
deleted file mode 100644
index dd1f324fb8..0000000000
--- a/ng2-components/ng2-alfresco-core/karma.conf.js
+++ /dev/null
@@ -1,123 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/ng2-translate/**/*.js.map', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event|*interface|mdl*).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-alfresco-core/package.json b/ng2-components/ng2-alfresco-core/package.json
index 0935281b73..660ed4d635 100644
--- a/ng2-components/ng2-alfresco-core/package.json
+++ b/ng2-components/ng2-alfresco-core/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "echo 'placeholder'",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-alfresco-core",
+    "test-browser": "./node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-alfresco-core",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-alfresco-core.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -54,17 +44,17 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "dialog-polyfill": "0.4.7",
@@ -73,51 +63,24 @@
     "intl": "1.2.4",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
-    "cpx": "1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-core": "2.4.1",
-    "karma": "0.13.22",
-    "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "1.0.0",
-    "karma-jasmine": "1.0.2",
-    "karma-jasmine-ajax": "0.1.13",
-    "karma-jasmine-html-reporter": "0.2.0",
-    "karma-mocha-reporter": "2.0.3",
-    "license-check": "1.1.5",
+    "cpx": "^1.3.1",
+    "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
-    "traceur": "0.0.91",
+    "traceur": "^0.0.91",
     "ts-node": "^1.7.0",
     "tslint": "3.15.1",
     "typescript": "^2.0.3",
@@ -125,7 +88,7 @@
   },
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/ng2-components/ng2-alfresco-core/src/assets/renditionsService.mock.ts b/ng2-components/ng2-alfresco-core/src/assets/renditionsService.mock.ts
index 91c7d1148a..a340020192 100644
--- a/ng2-components/ng2-alfresco-core/src/assets/renditionsService.mock.ts
+++ b/ng2-components/ng2-alfresco-core/src/assets/renditionsService.mock.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-export var fakeRedition = {
+export let fakeRedition = {
     'entry': {
         'id': 'pdf',
         'content': {'mimeType': 'application/pdf', 'mimeTypeName': 'Adobe PDF Document'},
@@ -23,7 +23,7 @@ export var fakeRedition = {
     }
 };
 
-export var fakeReditionCreated = {
+export let fakeReditionCreated = {
     'entry': {
         'id': 'pdf',
         'content': {'mimeType': 'application/pdf', 'mimeTypeName': 'Adobe PDF Document'},
@@ -31,7 +31,7 @@ export var fakeReditionCreated = {
     }
 };
 
-export var fakeReditionsList = {
+export let fakeReditionsList = {
     'list': {
         'pagination': {
             'count': 6,
diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
index ad0fb22e46..56995042ca 100644
--- a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
@@ -20,7 +20,6 @@ import { AccordionComponent } from './accordion.component';
 
 @Component({
     selector: 'adf-accordion-group',
-    moduleId: module.id,
     templateUrl: 'accordion-group.component.html',
     styleUrls: ['./accordion-group.component.css']
 
diff --git a/ng2-components/ng2-alfresco-core/tsconfig.json b/ng2-components/ng2-alfresco-core/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-alfresco-core/tsconfig.json
+++ b/ng2-components/ng2-alfresco-core/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-core/tslint.json b/ng2-components/ng2-alfresco-core/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-alfresco-core/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-alfresco-core/webpack.build.js b/ng2-components/ng2-alfresco-core/webpack.build.js
new file mode 100644
index 0000000000..176daf7abc
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-alfresco-core": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md
index e220785767..cc01ffef56 100644
--- a/ng2-components/ng2-alfresco-datatable/README.md
+++ b/ng2-components/ng2-alfresco-datatable/README.md
@@ -679,7 +679,6 @@ npm start
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-alfresco-datatable/demo/package.json b/ng2-components/ng2-alfresco-datatable/demo/package.json
index 1b7dbdede8..9cfb151e2a 100644
--- a/ng2-components/ng2-alfresco-datatable/demo/package.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -25,28 +25,28 @@
     }
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.7.6",
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0"
diff --git a/ng2-components/ng2-alfresco-datatable/demo/systemjs.config.js b/ng2-components/ng2-alfresco-datatable/demo/systemjs.config.js
index 3b24c15dd5..bf0730f3cf 100644
--- a/ng2-components/ng2-alfresco-datatable/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-datatable/demo/systemjs.config.js
@@ -41,8 +41,8 @@
             },
             'ng2-translate': { defaultExtension: 'js' },
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-alfresco-datatable': { main: './bundles/ng2-alfresco-datatable.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-alfresco-datatable/demo/tslint.json b/ng2-components/ng2-alfresco-datatable/demo/tslint.json
index 55c0f8a666..36e753c92c 100644
--- a/ng2-components/ng2-alfresco-datatable/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/tslint.json
@@ -26,7 +26,7 @@
     "label-undefined": true,
     "max-line-length": [
       true,
-      140
+      180
     ],
     "member-ordering": [
       true,
@@ -36,7 +36,7 @@
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
     "no-consecutive-blank-lines": true,
     "no-console": [
@@ -52,11 +52,11 @@
     "no-debugger": true,
     "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
diff --git a/ng2-components/ng2-alfresco-datatable/gulpfile.ts b/ng2-components/ng2-alfresco-datatable/gulpfile.ts
deleted file mode 100755
index 398ca66acd..0000000000
--- a/ng2-components/ng2-alfresco-datatable/gulpfile.ts
+++ /dev/null
@@ -1,307 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/',
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-alfresco-datatable/karma-test-shim.js b/ng2-components/ng2-alfresco-datatable/karma-test-shim.js
index 8696dd2b16..fca731ab6b 100644
--- a/ng2-components/ng2-alfresco-datatable/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-datatable/karma-test-shim.js
@@ -1,115 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-alfresco-datatable/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-alfresco-datatable/karma.conf.js b/ng2-components/ng2-alfresco-datatable/karma.conf.js
deleted file mode 100644
index b3920fc80c..0000000000
--- a/ng2-components/ng2-alfresco-datatable/karma.conf.js
+++ /dev/null
@@ -1,127 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json
index 4475c3e80b..e23f93d849 100644
--- a/ng2-components/ng2-alfresco-datatable/package.json
+++ b/ng2-components/ng2-alfresco-datatable/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-alfresco-datatable",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-alfresco-datatable",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-alfresco-datatable.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -46,64 +36,37 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
-    "cpx": "1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-core": "2.4.1",
-    "karma": "0.13.22",
-    "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "1.0.0",
-    "karma-jasmine": "1.0.2",
-    "karma-jasmine-ajax": "^0.1.13",
-    "karma-jasmine-html-reporter": "0.2.0",
-    "karma-mocha-reporter": "2.0.3",
-    "license-check": "1.1.5",
+    "cpx": "^1.3.1",
+    "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
-    "traceur": "0.0.91",
+    "traceur": "^0.0.91",
     "ts-node": "^1.7.0",
     "tslint": "3.15.1",
     "typescript": "^2.0.3",
@@ -111,7 +74,7 @@
   },
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
index 0727ec7a13..ed5ef52bb7 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
@@ -48,7 +48,7 @@ describe('DataTable', () => {
         fixture = TestBed.createComponent(DataTableComponent);
         dataTable = fixture.componentInstance;
         element = fixture.debugElement.nativeElement;
-        fixture.detectChanges();
+        //fixture.detectChanges();
     });
 
     beforeEach(() => {
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
index 0cde9dd3ab..f958e7ecad 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
@@ -37,7 +37,6 @@ import { MdCheckboxChange } from '@angular/material';
 declare var componentHandler;
 
 @Component({
-    moduleId: module.id,
     selector: 'alfresco-datatable',
     styleUrls: ['./datatable.component.css'],
     templateUrl: './datatable.component.html'
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination.component.ts
index 3643ac9c65..6d5a9d1908 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination.component.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination.component.ts
@@ -20,7 +20,6 @@ import { PaginationData } from '../../models/pagination.data';
 import { Pagination } from 'alfresco-js-api';
 
 @Component({
-    moduleId: module.id,
     selector: 'alfresco-pagination',
     templateUrl: './pagination.component.html',
     styleUrls: ['./pagination.component.css']
diff --git a/ng2-components/ng2-alfresco-datatable/tsconfig.json b/ng2-components/ng2-alfresco-datatable/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-alfresco-datatable/tsconfig.json
+++ b/ng2-components/ng2-alfresco-datatable/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-datatable/tslint.json b/ng2-components/ng2-alfresco-datatable/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-alfresco-datatable/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-alfresco-datatable/webpack.build.js b/ng2-components/ng2-alfresco-datatable/webpack.build.js
new file mode 100644
index 0000000000..84d761017a
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-alfresco-datatable": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md
index a663399537..08e8ad7034 100644
--- a/ng2-components/ng2-alfresco-documentlist/README.md
+++ b/ng2-components/ng2-alfresco-documentlist/README.md
@@ -1098,7 +1098,6 @@ npm start
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/package.json b/ng2-components/ng2-alfresco-documentlist/demo/package.json
index 32251822d0..e72980bff6 100644
--- a/ng2-components/ng2-alfresco-documentlist/demo/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -19,23 +19,23 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
-    "ng2-translate": "2.5.0",
+    "zone.js": "0.7.6",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0",
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js b/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js
index bfb3f615bf..70b1c64bca 100644
--- a/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js
@@ -40,11 +40,11 @@
             rxjs: {
                 defaultExtension: 'js'
             },
-            'ng2-translate': { defaultExtension: 'js' },
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-documentlist': { main: './index.js', defaultExtension: 'js'}
+            'ng2-translate': {defaultExtension: 'js'},
+            'alfresco-js-api': {main: './alfresco-js-api.js', defaultExtension: 'js'},
+            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-alfresco-datatable': {main: './bundles/ng2-alfresco-datatable.js', defaultExtension: 'js'},
+            'ng2-alfresco-documentlist': {main: './bundles/ng2-alfresco-documentlist.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/tslint.json b/ng2-components/ng2-alfresco-documentlist/demo/tslint.json
index 54ed5e7fc2..8e3f8b16ac 100644
--- a/ng2-components/ng2-alfresco-documentlist/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-documentlist/demo/tslint.json
@@ -35,7 +35,7 @@
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
     "no-consecutive-blank-lines": true,
     "no-console": [
@@ -51,11 +51,11 @@
     "no-debugger": true,
     "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
diff --git a/ng2-components/ng2-alfresco-documentlist/gulpfile.ts b/ng2-components/ng2-alfresco-documentlist/gulpfile.ts
deleted file mode 100755
index ebf8207f0d..0000000000
--- a/ng2-components/ng2-alfresco-documentlist/gulpfile.ts
+++ /dev/null
@@ -1,307 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/'
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js b/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js
index a8e0869510..f7be58e211 100644
--- a/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js
@@ -1,117 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-alfresco-documentlist/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-    'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-alfresco-documentlist/karma.conf.js b/ng2-components/ng2-alfresco-documentlist/karma.conf.js
deleted file mode 100644
index fe1de2aada..0000000000
--- a/ng2-components/ng2-alfresco-documentlist/karma.conf.js
+++ /dev/null
@@ -1,132 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      { pattern: 'node_modules/ng2-alfresco-datatable/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-datatable/index.js', included: false, served: true, watched: false },
-      { pattern: 'src/assets/images/empty_doc_lib.svg', included: false, served: true, watched: false },
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json
index 8fb0f3a01b..67f040d9fb 100644
--- a/ng2-components/ng2-alfresco-documentlist/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-alfresco-documentlist",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-alfresco-documentlist",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-alfresco-documentlist.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -54,65 +44,38 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
-    "cpx": "1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-core": "2.4.1",
-    "karma": "0.13.22",
-    "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "1.0.0",
-    "karma-jasmine": "1.0.2",
-    "karma-jasmine-ajax": "^0.1.13",
-    "karma-jasmine-html-reporter": "0.2.0",
-    "karma-mocha-reporter": "2.0.3",
-    "license-check": "1.1.5",
+    "cpx": "^1.3.1",
+    "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
-    "traceur": "0.0.91",
+    "traceur": "^0.0.91",
     "ts-node": "^1.7.0",
     "tslint": "3.15.1",
     "typescript": "^2.0.3",
@@ -120,7 +83,7 @@
   },
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/ng2-components/ng2-alfresco-documentlist/src/assets/document-list.service.mock.ts b/ng2-components/ng2-alfresco-documentlist/src/assets/document-list.service.mock.ts
index 6a16887303..0fdfc469aa 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/assets/document-list.service.mock.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/assets/document-list.service.mock.ts
@@ -38,7 +38,7 @@ export class DocumentListServiceMock extends DocumentListService {
         authService?: AlfrescoAuthenticationService,
         contentService?: AlfrescoContentService,
         apiService?: AlfrescoApiService,
-        logService?: LogService,
+        logService?: LogService
     ) {
         super(authService, contentService, apiService, logService);
     }
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts
index c462817dee..c14b2249b7 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts
@@ -20,7 +20,6 @@ import { MinimalNodeEntryEntity, PathElementEntity } from 'alfresco-js-api';
 import { DocumentListComponent } from '../document-list.component';
 
 @Component({
-    moduleId: module.id,
     selector: 'alfresco-document-list-breadcrumb',
     templateUrl: './breadcrumb.component.html',
     styleUrls: ['./breadcrumb.component.css']
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts
index 95c4393b8d..f82be39c34 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts
@@ -38,7 +38,6 @@ import { NodeEntityEvent, NodeEntryEvent } from './node.event';
 declare var module: any;
 
 @Component({
-    moduleId: module.id,
     selector: 'alfresco-document-list',
     styleUrls: ['./document-list.component.css'],
     templateUrl: './document-list.component.html'
@@ -49,12 +48,10 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
     static DOUBLE_CLICK_NAVIGATION: string = 'dblclick';
     static DEFAULT_PAGE_SIZE: number = 20;
 
-    baseComponentPath = module.id.replace('components/document-list.component.js', '');
-
     @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
     @Input()
-    fallbackThumbnail: string = this.baseComponentPath + 'assets/images/ft_ic_miscellaneous.svg';
+    fallbackThumbnail: string = require('../assets/images/ft_ic_miscellaneous.svg');
 
     @Input()
     navigate: boolean = true;
@@ -87,7 +84,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
     pageSize: number = DocumentListComponent.DEFAULT_PAGE_SIZE;
 
     @Input()
-    emptyFolderImageUrl: string = this.baseComponentPath + 'assets/images/empty_doc_lib.svg';
+    emptyFolderImageUrl: string = require('../assets/images/empty_doc_lib.svg');
 
     @Input()
     allowDropFiles: boolean = false;
@@ -155,7 +152,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
                 private ngZone: NgZone,
                 private translateService: AlfrescoTranslationService) {
 
-        this.data = new ShareDataTableAdapter(this.documentListService, this.baseComponentPath);
+        this.data = new ShareDataTableAdapter(this.documentListService);
 
         if (translateService) {
             translateService.addTranslationFolder('ng2-alfresco-documentlist', 'node_modules/ng2-alfresco-documentlist/src');
@@ -205,7 +202,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
         }
 
         if (!this.data) {
-            this.data = new ShareDataTableAdapter(this.documentListService, this.baseComponentPath, schema);
+            this.data = new ShareDataTableAdapter(this.documentListService, schema);
         } else if (schema && schema.length > 0) {
             this.data.setColumns(schema);
         }
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.ts
index e6f4f9ce94..6f36f4ecf0 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.ts
@@ -28,7 +28,6 @@ declare let dialogPolyfill: any;
 const ERROR_FOLDER_ALREADY_EXIST = 409;
 
 @Component({
-    moduleId: module.id,
     selector: 'alfresco-document-menu-action',
     styleUrls: ['./document-menu-action.component.css'],
     templateUrl: './document-menu-action.component.html'
@@ -93,10 +92,8 @@ export class DocumentMenuActionComponent implements OnChanges {
                             let errorMessagePlaceholder = this.getErrorMessage(error.response);
                             this.message = this.formatString(errorMessagePlaceholder, [name]);
                             this.error.emit({ message: this.message });
-                            this.logService.error(this.message);
                         } else {
                             this.error.emit(error);
-                            this.logService.error(error);
                         }
                     }
                 );
diff --git a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.spec.ts
index 8916edaa63..bd9f2e93db 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.spec.ts
@@ -22,38 +22,36 @@ import { FileNode, FolderNode/*, PageNode*/ } from './../assets/document-library
 
 describe('ShareDataTableAdapter', () => {
 
-    let basePath: string;
     let documentListService: DocumentListServiceMock;
 
     beforeEach(() => {
-        basePath = '/root/';
         documentListService = new DocumentListServiceMock();
     });
 
     it('should setup rows and columns with constructor', () => {
         let schema = [<DataColumn> {}];
-        let adapter = new ShareDataTableAdapter(null, null, schema);
+        let adapter = new ShareDataTableAdapter(null, schema);
 
         expect(adapter.getRows()).toEqual([]);
         expect(adapter.getColumns()).toEqual(schema);
     });
 
     it('should setup columns when constructor is missing schema', () => {
-        let adapter = new ShareDataTableAdapter(null, null, null);
+        let adapter = new ShareDataTableAdapter(null, null);
 
         expect(adapter.getColumns()).toEqual([]);
     });
 
     it('should set new columns', () => {
         let columns = [<DataColumn> {}, <DataColumn> {}];
-        let adapter = new ShareDataTableAdapter(null, null, null);
+        let adapter = new ShareDataTableAdapter(null, null);
         adapter.setColumns(columns);
         expect(adapter.getColumns()).toEqual(columns);
     });
 
     it('should reset columns', () => {
         let columns = [<DataColumn> {}, <DataColumn> {}];
-        let adapter = new ShareDataTableAdapter(null, null, columns);
+        let adapter = new ShareDataTableAdapter(null, columns);
 
         expect(adapter.getColumns()).toEqual(columns);
         adapter.setColumns(null);
@@ -62,7 +60,7 @@ describe('ShareDataTableAdapter', () => {
 
     it('should set new rows', () => {
         let rows = [<DataRow> {}, <DataRow> {}];
-        let adapter = new ShareDataTableAdapter(null, null, null);
+        let adapter = new ShareDataTableAdapter(null, null);
 
         expect(adapter.getRows()).toEqual([]);
         adapter.setRows(rows);
@@ -71,7 +69,7 @@ describe('ShareDataTableAdapter', () => {
 
     it('should reset rows', () => {
         let rows = [<DataRow> {}, <DataRow> {}];
-        let adapter = new ShareDataTableAdapter(null, null, null);
+        let adapter = new ShareDataTableAdapter(null, null);
 
         adapter.setRows(rows);
         expect(adapter.getRows()).toEqual(rows);
@@ -81,7 +79,7 @@ describe('ShareDataTableAdapter', () => {
     });
 
     it('should sort new rows', () => {
-        let adapter = new ShareDataTableAdapter(null, null, null);
+        let adapter = new ShareDataTableAdapter(null, null);
         spyOn(adapter, 'sort').and.callThrough();
 
         let rows = [<DataRow> {}];
@@ -91,13 +89,13 @@ describe('ShareDataTableAdapter', () => {
     });
 
     it('should fail when getting value for missing row', () => {
-        let adapter = new ShareDataTableAdapter(null, null, null);
+        let adapter = new ShareDataTableAdapter(null, null);
         let check = () => { return adapter.getValue(null, <DataColumn>{}); };
         expect(check).toThrowError(adapter.ERR_ROW_NOT_FOUND);
     });
 
     it('should fail when getting value for missing column', () => {
-        let adapter = new ShareDataTableAdapter(null, null, null);
+        let adapter = new ShareDataTableAdapter(null, null);
         let check = () => { return adapter.getValue(<DataRow>{}, null); };
         expect(check).toThrowError(adapter.ERR_COL_NOT_FOUND);
     });
@@ -106,7 +104,7 @@ describe('ShareDataTableAdapter', () => {
     it('should require path to load data', () => {
         spyOn(documentListService, 'getFolder').and.callThrough();
 
-        let adapter = new ShareDataTableAdapter(documentListService, null, null);
+        let adapter = new ShareDataTableAdapter(documentListService, null);
         adapter.loadPath(null);
 
         expect(documentListService.getFolder).not.toHaveBeenCalled();
@@ -122,7 +120,7 @@ describe('ShareDataTableAdapter', () => {
         spyOn(documentListService, 'getFolder').and.callThrough();
         documentListService.getFolderResult = page;
 
-        let adapter = new ShareDataTableAdapter(documentListService, null, null);
+        let adapter = new ShareDataTableAdapter(documentListService, null);
         adapter.loadPath(path);
 
         expect(documentListService.getFolder).toHaveBeenCalledWith(path, jasmine.anything());
@@ -147,7 +145,7 @@ describe('ShareDataTableAdapter', () => {
         };
 
         let row = new ShareDataRow(file);
-        let adapter = new ShareDataTableAdapter(null, null, null);
+        let adapter = new ShareDataTableAdapter(null, null);
 
         let value = adapter.getValue(row, col);
         expect(value).toBe(dateValue);
@@ -167,7 +165,7 @@ describe('ShareDataTableAdapter', () => {
         };
 
         let row = new ShareDataRow(file);
-        let adapter = new ShareDataTableAdapter(null, null, null);
+        let adapter = new ShareDataTableAdapter(null, null);
 
         let value = adapter.getValue(row, col);
         expect(value).toBe(dateValue);
@@ -185,7 +183,7 @@ describe('ShareDataTableAdapter', () => {
         };
 
         let row = new ShareDataRow(file);
-        let adapter = new ShareDataTableAdapter(null, null, null);
+        let adapter = new ShareDataTableAdapter(null, null);
 
         let value = adapter.getValue(row, col);
         expect(value).toBe(rawValue);
@@ -203,7 +201,7 @@ describe('ShareDataTableAdapter', () => {
         };
 
         let row = new ShareDataRow(file);
-        let adapter = new ShareDataTableAdapter(null, null, null);
+        let adapter = new ShareDataTableAdapter(null, null);
         spyOn(console, 'error').and.stub();
 
         let value = adapter.getValue(row, col);
@@ -212,18 +210,18 @@ describe('ShareDataTableAdapter', () => {
     });
 
     it('should generate fallback icon for a file thumbnail with unknown mime type', () => {
-        let adapter = new ShareDataTableAdapter(documentListService, basePath, null);
+        let adapter = new ShareDataTableAdapter(documentListService, null);
 
         let file = new FileNode('file', 'wrong-mime');
         let row = new ShareDataRow(file);
         let col = <DataColumn> { type: 'image', key: '$thumbnail' };
 
         let value = adapter.getValue(row, col);
-        expect(value).toBe(`${basePath}assets/images/ft_ic_miscellaneous.svg`);
+        expect(value).toContain(`assets/images/ft_ic_miscellaneous.svg`);
     });
 
     it('should generate fallback icon for a file thumbnail with missing mime type', () => {
-        let adapter = new ShareDataTableAdapter(documentListService, basePath, null);
+        let adapter = new ShareDataTableAdapter(documentListService, null);
 
         let file = new FileNode();
         file.entry.content.mimeType = null;
@@ -232,11 +230,11 @@ describe('ShareDataTableAdapter', () => {
         let col = <DataColumn> { type: 'image', key: '$thumbnail' };
 
         let value = adapter.getValue(row, col);
-        expect(value).toBe(`${basePath}assets/images/ft_ic_miscellaneous.svg`);
+        expect(value).toContain(`assets/images/ft_ic_miscellaneous.svg`);
     });
 
     it('should generate fallback icon for a file with no content entry', () => {
-        let adapter = new ShareDataTableAdapter(documentListService, basePath, null);
+        let adapter = new ShareDataTableAdapter(documentListService, null);
 
         let file = new FileNode();
         file.entry.content = null;
@@ -245,19 +243,19 @@ describe('ShareDataTableAdapter', () => {
         let col = <DataColumn> { type: 'image', key: '$thumbnail' };
 
         let value = adapter.getValue(row, col);
-        expect(value).toBe(`${basePath}assets/images/ft_ic_miscellaneous.svg`);
+        expect(value).toContain(`assets/images/ft_ic_miscellaneous.svg`);
     });
 
     it('should generate fallback icon when document service fails to find one', () => {
         spyOn(documentListService, 'getMimeTypeIcon').and.returnValue(null);
-        let adapter = new ShareDataTableAdapter(documentListService, basePath, null);
+        let adapter = new ShareDataTableAdapter(documentListService, null);
 
         let file = new FileNode();
         let row = new ShareDataRow(file);
         let col = <DataColumn> { type: 'image', key: '$thumbnail' };
 
         let value = adapter.getValue(row, col);
-        expect(value).toBe(`${basePath}assets/images/ft_ic_miscellaneous.svg`);
+        expect(value).toContain(`assets/images/ft_ic_miscellaneous.svg`);
     });
 
     it('should return image value unmodified', () => {
@@ -266,7 +264,7 @@ describe('ShareDataTableAdapter', () => {
         let file = new FileNode();
         file.entry['icon'] = imageUrl;
 
-        let adapter = new ShareDataTableAdapter(null, basePath, null);
+        let adapter = new ShareDataTableAdapter(null, null);
         let row = new ShareDataRow(file);
         let col = <DataColumn> { type: 'image', key: 'icon' };
 
@@ -275,20 +273,20 @@ describe('ShareDataTableAdapter', () => {
     });
 
     it('should resolve folder icon', () => {
-        let adapter = new ShareDataTableAdapter(null, basePath, null);
+        let adapter = new ShareDataTableAdapter(null, null);
 
         let row = new ShareDataRow(new FolderNode());
         let col = <DataColumn> { type: 'image', key: '$thumbnail' };
 
         let value = adapter.getValue(row, col);
-        expect(value).toBe(`${basePath}assets/images/ft_ic_folder.svg`);
+        expect(value).toContain(`assets/images/ft_ic_folder.svg`);
     });
 
     it('should resolve file thumbnail', () => {
         let imageUrl: string = 'http://<addresss>';
         spyOn(documentListService, 'getDocumentThumbnailUrl').and.returnValue(imageUrl);
 
-        let adapter = new ShareDataTableAdapter(documentListService, basePath, null);
+        let adapter = new ShareDataTableAdapter(documentListService, null);
         adapter.thumbnails = true;
 
         let file = new FileNode();
@@ -301,7 +299,7 @@ describe('ShareDataTableAdapter', () => {
     });
 
     it('should resolve fallback file icon for unknown node', () => {
-        let adapter = new ShareDataTableAdapter(null, basePath, null);
+        let adapter = new ShareDataTableAdapter(null, null);
 
         let file = new FileNode();
         file.entry.isFile = false;
@@ -311,11 +309,11 @@ describe('ShareDataTableAdapter', () => {
         let col = <DataColumn> { type: 'image', key: '$thumbnail' };
 
         let value = adapter.getValue(row, col);
-        expect(value).toBe(`${basePath}assets/images/ft_ic_miscellaneous.svg`);
+        expect(value).toContain(`assets/images/ft_ic_miscellaneous.svg`);
     });
 
     it('should require document service to resolve thumbnail', () => {
-        let adapter = new ShareDataTableAdapter(null, basePath, null);
+        let adapter = new ShareDataTableAdapter(null, null);
         adapter.thumbnails = true;
 
         let file = new FileNode();
@@ -335,7 +333,7 @@ describe('ShareDataTableAdapter', () => {
         spyOn(console, 'error').and.stub();
         spyOn(documentListService, 'getFolder').and.callThrough();
 
-        let adapter = new ShareDataTableAdapter(documentListService, null, null);
+        let adapter = new ShareDataTableAdapter(documentListService, null);
         adapter.loadPath('/some/path').catch(err => {
             expect(err).toBe(error);
             done();
@@ -343,18 +341,18 @@ describe('ShareDataTableAdapter', () => {
     });
     */
 
-    it('should generate file icon path based on mime type', () => {
-        let fileName = 'custom-icon.svg';
+    xit('should generate file icon path based on mime type', () => {
+        let fileName = 'dist/assets/empty_doc_lib.svg';
         spyOn(documentListService, 'getMimeTypeIcon').and.returnValue(fileName);
 
         let file = new FileNode('file1', 'text/plain');
         let row = new ShareDataRow(file);
         let col = <DataColumn> {type: 'image', key: '$thumbnail'};
 
-        let adapter = new ShareDataTableAdapter(documentListService, basePath, null);
+        let adapter = new ShareDataTableAdapter(documentListService, null);
         let value = adapter.getValue(row, col);
 
-        expect(value).toBe(`${basePath}assets/images/${fileName}`);
+        expect(value).toContain(`assets/images/${fileName}`);
         expect(documentListService.getMimeTypeIcon).toHaveBeenCalled();
     });
 
@@ -364,7 +362,7 @@ describe('ShareDataTableAdapter', () => {
         let folder = new FolderNode();
 
         let col = <DataColumn> { key: 'name' };
-        let adapter = new ShareDataTableAdapter(null, null, [col]);
+        let adapter = new ShareDataTableAdapter(null, [col]);
         adapter.setSorting(new DataSorting('name', 'asc'));
 
         adapter.setRows([
@@ -387,7 +385,7 @@ describe('ShareDataTableAdapter', () => {
         file2.entry['dateProp'] = new Date(2016, 6, 30, 13, 14, 2);
 
         let col = <DataColumn> { key: 'dateProp' };
-        let adapter = new ShareDataTableAdapter(null, null, [col]);
+        let adapter = new ShareDataTableAdapter(null, [col]);
 
         adapter.setRows([
             new ShareDataRow(file2),
@@ -413,7 +411,7 @@ describe('ShareDataTableAdapter', () => {
         let file4 = new FileNode('file4');
 
         let col = <DataColumn> { key: 'name' };
-        let adapter = new ShareDataTableAdapter(documentListService, null, [col]);
+        let adapter = new ShareDataTableAdapter(documentListService, [col]);
         adapter.setSorting(new DataSorting('name', 'asc'));
 
         let page1 = new PageNode([file2, file1]);
diff --git a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts
index 0a723023fe..47a6982c8c 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts
@@ -41,7 +41,6 @@ export class ShareDataTableAdapter implements DataTableAdapter {
     selectedRow: DataRow;
 
     constructor(private documentListService: DocumentListService,
-                private basePath: string,
                 schema: DataColumn[] = []) {
         this.rows = [];
         this.columns = schema || [];
@@ -223,7 +222,7 @@ export class ShareDataTableAdapter implements DataTableAdapter {
     }
 
     getImagePath(id: string): any {
-        return `${this.basePath}assets/images/${id}`;
+        return require('../assets/images/' + id);
     }
 }
 
diff --git a/ng2-components/ng2-alfresco-documentlist/tsconfig.json b/ng2-components/ng2-alfresco-documentlist/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-alfresco-documentlist/tsconfig.json
+++ b/ng2-components/ng2-alfresco-documentlist/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-documentlist/tslint.json b/ng2-components/ng2-alfresco-documentlist/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-alfresco-documentlist/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-alfresco-documentlist/webpack.build.js b/ng2-components/ng2-alfresco-documentlist/webpack.build.js
new file mode 100644
index 0000000000..fca998d50f
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-alfresco-documentlist": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md
index a4067003b2..d06660d9e5 100644
--- a/ng2-components/ng2-alfresco-login/README.md
+++ b/ng2-components/ng2-alfresco-login/README.md
@@ -370,7 +370,6 @@ npm start
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-alfresco-login/demo/package.json b/ng2-components/ng2-alfresco-login/demo/package.json
index 832428db1a..5a4e6f8ee2 100644
--- a/ng2-components/ng2-alfresco-login/demo/package.json
+++ b/ng2-components/ng2-alfresco-login/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -47,28 +47,28 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.7.6",
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-login": "1.4.0"
diff --git a/ng2-components/ng2-alfresco-login/demo/systemjs.config.js b/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
index c1d9ec9a81..0991c99dcf 100644
--- a/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
@@ -41,8 +41,8 @@
             },
             'ng2-translate': { defaultExtension: 'js' },
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-alfresco-login': {main: './bundles/ng2-alfresco-login.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-alfresco-login/demo/tslint.json b/ng2-components/ng2-alfresco-login/demo/tslint.json
index 8c9703b9de..36e753c92c 100644
--- a/ng2-components/ng2-alfresco-login/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-login/demo/tslint.json
@@ -36,7 +36,7 @@
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
     "no-consecutive-blank-lines": true,
     "no-console": [
@@ -52,11 +52,11 @@
     "no-debugger": true,
     "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
diff --git a/ng2-components/ng2-alfresco-login/gulpfile.ts b/ng2-components/ng2-alfresco-login/gulpfile.ts
deleted file mode 100755
index ebf8207f0d..0000000000
--- a/ng2-components/ng2-alfresco-login/gulpfile.ts
+++ /dev/null
@@ -1,307 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/'
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-alfresco-login/karma-test-shim.js b/ng2-components/ng2-alfresco-login/karma-test-shim.js
index 8696dd2b16..f9bb186595 100644
--- a/ng2-components/ng2-alfresco-login/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-login/karma-test-shim.js
@@ -1,115 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-alfresco-login/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-alfresco-login/karma.conf.js b/ng2-components/ng2-alfresco-login/karma.conf.js
deleted file mode 100644
index 0ddb8bc985..0000000000
--- a/ng2-components/ng2-alfresco-login/karma.conf.js
+++ /dev/null
@@ -1,131 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false},
-
-      //Assets
-      {pattern: 'src/assets/images/background.svg', included: false, watched: false},
-      {pattern: 'src/assets/images/alfresco-logo.svg', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-alfresco-login/package.json b/ng2-components/ng2-alfresco-login/package.json
index 81257fc588..2febe1aaf6 100644
--- a/ng2-components/ng2-alfresco-login/package.json
+++ b/ng2-components/ng2-alfresco-login/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-alfresco-login",
+    "test-browser": "concurrently \"../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-alfresco-login\"",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-alfresco-login.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -58,23 +48,23 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
@@ -82,39 +72,13 @@
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
     "concurrently": "^2.2.0",
-    "cpx": "1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-core": "2.4.1",
-    "karma": "0.13.22",
-    "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "1.0.0",
-    "karma-jasmine": "1.0.2",
-    "karma-jasmine-ajax": "0.1.13",
-    "karma-jasmine-html-reporter": "0.2.0",
-    "karma-mocha-reporter": "2.0.3",
-    "license-check": "1.1.5",
+    "cpx": "^1.3.1",
+    "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
-    "traceur": "0.0.91",
+    "traceur": "^0.0.91",
     "ts-node": "^1.7.0",
     "tslint": "3.15.1",
     "typescript": "^2.0.3",
@@ -122,7 +86,7 @@
   },
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
index 32db6e7938..40c3b6fccf 100644
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
+++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
@@ -24,15 +24,12 @@ declare let componentHandler: any;
 
 @Component({
     selector: 'alfresco-login',
-    moduleId: module.id,
     templateUrl: './alfresco-login.component.html',
     styleUrls: ['./alfresco-login.component.css'],
     host: {'(blur)': 'onBlur($event)'}
 })
 export class AlfrescoLoginComponent implements OnInit {
 
-    private baseComponentPath: string = module.id.replace('components/alfresco-login.component.js', '');
-
     isPasswordShow: boolean = false;
 
     @Input()
@@ -48,10 +45,10 @@ export class AlfrescoLoginComponent implements OnInit {
     registerLink: string = '';
 
     @Input()
-    logoImageUrl: string = this.baseComponentPath + 'assets/images/alfresco-logo.svg';
+    logoImageUrl: string = require('../assets/images/alfresco-logo.svg');
 
     @Input()
-    backgroundImageUrl: string = this.baseComponentPath + 'assets/images/background.svg';
+    backgroundImageUrl: string = require('../assets/images/background.svg');
 
     @Input()
     providers: string;
@@ -175,7 +172,6 @@ export class AlfrescoLoginComponent implements OnInit {
                     this.displayErrorMessage(err);
                     this.enableError();
                     this.onError.emit(err);
-                    this.logService.error(err);
                 },
                 () => this.logService.info('Login done')
             );
diff --git a/ng2-components/ng2-alfresco-login/tsconfig.json b/ng2-components/ng2-alfresco-login/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-alfresco-login/tsconfig.json
+++ b/ng2-components/ng2-alfresco-login/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-login/tslint.json b/ng2-components/ng2-alfresco-login/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-alfresco-login/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-alfresco-login/webpack.build.js b/ng2-components/ng2-alfresco-login/webpack.build.js
new file mode 100644
index 0000000000..81b2ab9019
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-alfresco-login": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-alfresco-search/README.md b/ng2-components/ng2-alfresco-search/README.md
index 8adfd5bd9e..49dd6693f5 100644
--- a/ng2-components/ng2-alfresco-search/README.md
+++ b/ng2-components/ng2-alfresco-search/README.md
@@ -295,7 +295,6 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-alfresco-search/demo/package.json b/ng2-components/ng2-alfresco-search/demo/package.json
index b7849c326f..2e8fb4606e 100644
--- a/ng2-components/ng2-alfresco-search/demo/package.json
+++ b/ng2-components/ng2-alfresco-search/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -47,28 +47,28 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.7.6",
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0",
diff --git a/ng2-components/ng2-alfresco-search/demo/systemjs.config.js b/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
index 17f153a4d0..353cef68ae 100644
--- a/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
@@ -43,10 +43,10 @@
             },
             'ng2-translate': { defaultExtension: 'js' },
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-documentlist': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-search': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-alfresco-documentlist': {main: './bundles/ng2-alfresco-documentlist.js', defaultExtension: 'js'},
+            'ng2-alfresco-datatable': {main: './bundles/ng2-alfresco-datatable.js', defaultExtension: 'js'},
+            'ng2-alfresco-search': {main: './bundles/ng2-alfresco-search.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-alfresco-search/demo/tslint.json b/ng2-components/ng2-alfresco-search/demo/tslint.json
index 55c0f8a666..36e753c92c 100644
--- a/ng2-components/ng2-alfresco-search/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-search/demo/tslint.json
@@ -26,7 +26,7 @@
     "label-undefined": true,
     "max-line-length": [
       true,
-      140
+      180
     ],
     "member-ordering": [
       true,
@@ -36,7 +36,7 @@
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
     "no-consecutive-blank-lines": true,
     "no-console": [
@@ -52,11 +52,11 @@
     "no-debugger": true,
     "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
diff --git a/ng2-components/ng2-alfresco-search/gulpfile.ts b/ng2-components/ng2-alfresco-search/gulpfile.ts
deleted file mode 100755
index ebf8207f0d..0000000000
--- a/ng2-components/ng2-alfresco-search/gulpfile.ts
+++ /dev/null
@@ -1,307 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/'
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-alfresco-search/karma-test-shim.js b/ng2-components/ng2-alfresco-search/karma-test-shim.js
index b983f317d5..47bc89a346 100644
--- a/ng2-components/ng2-alfresco-search/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-search/karma-test-shim.js
@@ -1,119 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-alfresco-search/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-    'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable',
-    'ng2-alfresco-documentlist': 'npm:ng2-alfresco-documentlist'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-documentlist': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-alfresco-search/karma.conf.js b/ng2-components/ng2-alfresco-search/karma.conf.js
deleted file mode 100644
index cc34058353..0000000000
--- a/ng2-components/ng2-alfresco-search/karma.conf.js
+++ /dev/null
@@ -1,136 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-      // mimetype icons
-      {pattern: '/src/img/*.svg', included: false, served: true, watched: false},
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      { pattern: 'node_modules/ng2-alfresco-datatable/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-datatable/index.js', included: false, served: true, watched: false },
-
-      { pattern: 'node_modules/ng2-alfresco-documentlist/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-documentlist/index.js', included: false, served: true, watched: false },
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-alfresco-search/package.json b/ng2-components/ng2-alfresco-search/package.json
index 813a10a203..f04b79b90f 100644
--- a/ng2-components/ng2-alfresco-search/package.json
+++ b/ng2-components/ng2-alfresco-search/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-alfresco-search",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-alfresco-search",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-alfresco-documentlist",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-alfresco-search.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -54,66 +44,39 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0",
     "ng2-alfresco-documentlist": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
-    "cpx": "1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-core": "2.4.1",
-    "karma": "0.13.22",
-    "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "1.0.0",
-    "karma-jasmine": "1.0.2",
-    "karma-jasmine-ajax": "^0.1.13",
-    "karma-jasmine-html-reporter": "0.2.0",
-    "karma-mocha-reporter": "2.0.3",
-    "license-check": "1.1.5",
+    "cpx": "^1.3.1",
+    "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
-    "traceur": "0.0.91",
+    "traceur": "^0.0.91",
     "ts-node": "^1.7.0",
     "tslint": "3.15.1",
     "typescript": "^2.0.3",
@@ -121,7 +84,7 @@
   },
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/ng2-components/ng2-alfresco-search/src/assets/alfresco-search.component.mock.ts b/ng2-components/ng2-alfresco-search/src/assets/alfresco-search.component.mock.ts
index edd563beb7..3039a85532 100644
--- a/ng2-components/ng2-alfresco-search/src/assets/alfresco-search.component.mock.ts
+++ b/ng2-components/ng2-alfresco-search/src/assets/alfresco-search.component.mock.ts
@@ -32,7 +32,7 @@ const entryItem = {
     }
 };
 
-export var result = {
+export let result = {
     list: {
         entries: [
             entryItem
@@ -40,7 +40,7 @@ export var result = {
     }
 };
 
-export var results = {
+export let results = {
     list: {
         entries: [
             entryItem,
@@ -50,7 +50,7 @@ export var results = {
     }
 };
 
-export var folderResult = {
+export let folderResult = {
     list: {
         entries: [
             {
@@ -71,13 +71,13 @@ export var folderResult = {
     }
 };
 
-export var noResult = {
+export let noResult = {
     list: {
         entries: []
     }
 };
 
-export var errorJson = {
+export let errorJson = {
     error: {
         errorKey: 'Search failed',
         statusCode: 400,
diff --git a/ng2-components/ng2-alfresco-search/src/assets/alfresco-search.service.mock.ts b/ng2-components/ng2-alfresco-search/src/assets/alfresco-search.service.mock.ts
index 22e61c1090..188027b9ab 100644
--- a/ng2-components/ng2-alfresco-search/src/assets/alfresco-search.service.mock.ts
+++ b/ng2-components/ng2-alfresco-search/src/assets/alfresco-search.service.mock.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-export var fakeSearch = {
+export let fakeSearch = {
     list: {
         pagination: {
             count: 1,
@@ -44,7 +44,7 @@ export var fakeSearch = {
     }
 };
 
-export var fakeError = {
+export let fakeError = {
     error: {
         errorKey: 'Search failed',
         statusCode: 400,
@@ -54,7 +54,7 @@ export var fakeError = {
     }
 };
 
-export var fakeApi = {
+export let fakeApi = {
     core: {
         queriesApi: {
             findNodes: (term, opts) => Promise.resolve(fakeSearch)
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
index a7c0f8f6b2..798b877004 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
@@ -22,7 +22,6 @@ import { AlfrescoSearchService, SearchOptions } from './../services/alfresco-sea
 import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'alfresco-search-autocomplete',
     templateUrl: './alfresco-search-autocomplete.component.html',
     styleUrls: ['./alfresco-search-autocomplete.component.css']
@@ -68,8 +67,6 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges {
 
     @ViewChild('resultsTableBody', {}) resultsTableBody: ElementRef;
 
-    baseComponentPath: string = module.id.replace('components/alfresco-search-autocomplete.component.js', '');
-
     constructor(private searchService: AlfrescoSearchService,
                 private translateService: AlfrescoTranslationService,
                 private thumbnailService: AlfrescoThumbnailService) {
@@ -130,12 +127,12 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges {
             return this.resolveIconPath(icon);
         }
         if (node.entry.isFolder) {
-            return `${this.baseComponentPath}assets/images/ft_ic_folder.svg`;
+            return require('../assets/images/ft_ic_folder.svg');
         }
     }
 
     resolveIconPath(icon: string): string {
-        return `${this.baseComponentPath}assets/images/${icon}`;
+        return require('../assets/images/' + icon);
     }
 
     /**
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
index 5c74e3be11..3dd7b15804 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
@@ -23,7 +23,6 @@ import { AlfrescoSearchAutocompleteComponent } from './alfresco-search-autocompl
 import { SearchTermValidator } from './../forms/search-term-validator';
 
 @Component({
-    moduleId: module.id,
     selector: 'alfresco-search-control',
     templateUrl: './alfresco-search-control.component.html',
     styleUrls: ['./alfresco-search-control.component.css']
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
index 7b64a613d2..e1a8918bfb 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
@@ -22,7 +22,6 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { NodePaging, Pagination } from 'alfresco-js-api';
 
 @Component({
-    moduleId: module.id,
     selector: 'alfresco-search',
     styleUrls: ['./alfresco-search.component.css'],
     templateUrl: './alfresco-search.component.html'
@@ -32,8 +31,6 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
     static SINGLE_CLICK_NAVIGATION: string = 'click';
     static DOUBLE_CLICK_NAVIGATION: string = 'dblclick';
 
-    private baseComponentPath: string = module.id.replace('components/alfresco-search.component.js', '');
-
     @Input()
     searchTerm: string = '';
 
@@ -53,7 +50,7 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
     navigationMode: string = AlfrescoSearchComponent.DOUBLE_CLICK_NAVIGATION; // click|dblclick
 
     @Input()
-    emptyFolderImageUrl: string = this.baseComponentPath + 'assets/images/empty_doc_lib.svg';
+    emptyFolderImageUrl: string = require('../assets/images/empty_doc_lib.svg');
 
     @Output()
     resultsLoad = new EventEmitter();
diff --git a/ng2-components/ng2-alfresco-search/tsconfig.json b/ng2-components/ng2-alfresco-search/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-alfresco-search/tsconfig.json
+++ b/ng2-components/ng2-alfresco-search/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-search/tslint.json b/ng2-components/ng2-alfresco-search/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-alfresco-search/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-alfresco-search/webpack.build.js b/ng2-components/ng2-alfresco-search/webpack.build.js
new file mode 100644
index 0000000000..25c421022d
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-alfresco-search": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-alfresco-social/demo/package.json b/ng2-components/ng2-alfresco-social/demo/package.json
index d4051d2a1b..c833061861 100644
--- a/ng2-components/ng2-alfresco-social/demo/package.json
+++ b/ng2-components/ng2-alfresco-social/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -19,28 +19,28 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.7.6",
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-translate": "4.0.0",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-social": "1.4.0"
diff --git a/ng2-components/ng2-alfresco-social/demo/systemjs.config.js b/ng2-components/ng2-alfresco-social/demo/systemjs.config.js
index b449fbd000..b5e32d070a 100644
--- a/ng2-components/ng2-alfresco-social/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-social/demo/systemjs.config.js
@@ -41,8 +41,8 @@
             },
             'ng2-translate': { defaultExtension: 'js' },
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-social': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-alfresco-social': {main: './bundles/ng2-alfresco-social.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-alfresco-social/gulpfile.ts b/ng2-components/ng2-alfresco-social/gulpfile.ts
deleted file mode 100755
index 7f7285181b..0000000000
--- a/ng2-components/ng2-alfresco-social/gulpfile.ts
+++ /dev/null
@@ -1,307 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-social': 'node_modules/ng2-alfresco-social/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/'
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-social/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-alfresco-social/karma-test-shim.js b/ng2-components/ng2-alfresco-social/karma-test-shim.js
index 8696dd2b16..8aa8c354b0 100644
--- a/ng2-components/ng2-alfresco-social/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-social/karma-test-shim.js
@@ -1,115 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-alfresco-social/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-alfresco-social/karma.conf.js b/ng2-components/ng2-alfresco-social/karma.conf.js
deleted file mode 100644
index b3920fc80c..0000000000
--- a/ng2-components/ng2-alfresco-social/karma.conf.js
+++ /dev/null
@@ -1,127 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-alfresco-social/package.json b/ng2-components/ng2-alfresco-social/package.json
index 29e01a450f..1d3180c9b1 100644
--- a/ng2-components/ng2-alfresco-social/package.json
+++ b/ng2-components/ng2-alfresco-social/package.json
@@ -4,23 +4,15 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-alfresco-social",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-alfresco-social",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
   "main": "./index.js",
   "module": "./index.js",
@@ -103,7 +95,7 @@
   ],
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/ng2-components/ng2-alfresco-social/tsconfig.json b/ng2-components/ng2-alfresco-social/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-alfresco-social/tsconfig.json
+++ b/ng2-components/ng2-alfresco-social/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-social/tslint.json b/ng2-components/ng2-alfresco-social/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-alfresco-social/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-alfresco-social/webpack.build.js b/ng2-components/ng2-alfresco-social/webpack.build.js
new file mode 100644
index 0000000000..00156458bd
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-alfresco-social": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-alfresco-tag/README.md b/ng2-components/ng2-alfresco-tag/README.md
index 92286a232c..aaad015826 100644
--- a/ng2-components/ng2-alfresco-tag/README.md
+++ b/ng2-components/ng2-alfresco-tag/README.md
@@ -316,7 +316,6 @@ npm start
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-alfresco-tag/demo/package.json b/ng2-components/ng2-alfresco-tag/demo/package.json
index ab49727fba..78581fc354 100644
--- a/ng2-components/ng2-alfresco-tag/demo/package.json
+++ b/ng2-components/ng2-alfresco-tag/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -19,28 +19,28 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.7.6",
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-tag": "1.4.0"
diff --git a/ng2-components/ng2-alfresco-tag/demo/systemjs.config.js b/ng2-components/ng2-alfresco-tag/demo/systemjs.config.js
index 58142204f3..6d080473a1 100644
--- a/ng2-components/ng2-alfresco-tag/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-tag/demo/systemjs.config.js
@@ -41,8 +41,8 @@
             },
             'ng2-translate': { defaultExtension: 'js' },
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-tag': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-alfresco-tag': {main: './bundles/ng2-alfresco-tag.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-alfresco-tag/demo/tslint.json b/ng2-components/ng2-alfresco-tag/demo/tslint.json
index 8c9703b9de..36e753c92c 100644
--- a/ng2-components/ng2-alfresco-tag/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-tag/demo/tslint.json
@@ -36,7 +36,7 @@
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
     "no-consecutive-blank-lines": true,
     "no-console": [
@@ -52,11 +52,11 @@
     "no-debugger": true,
     "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
diff --git a/ng2-components/ng2-alfresco-tag/gulpfile.ts b/ng2-components/ng2-alfresco-tag/gulpfile.ts
deleted file mode 100755
index ebf8207f0d..0000000000
--- a/ng2-components/ng2-alfresco-tag/gulpfile.ts
+++ /dev/null
@@ -1,307 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/'
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-alfresco-tag/karma-test-shim.js b/ng2-components/ng2-alfresco-tag/karma-test-shim.js
index 8696dd2b16..cf6e0b8fbe 100644
--- a/ng2-components/ng2-alfresco-tag/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-tag/karma-test-shim.js
@@ -1,115 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-alfresco-tag/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-alfresco-tag/karma.conf.js b/ng2-components/ng2-alfresco-tag/karma.conf.js
deleted file mode 100644
index b3920fc80c..0000000000
--- a/ng2-components/ng2-alfresco-tag/karma.conf.js
+++ /dev/null
@@ -1,127 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-alfresco-tag/package.json b/ng2-components/ng2-alfresco-tag/package.json
index b35a9542ff..0627f12ab9 100644
--- a/ng2-components/ng2-alfresco-tag/package.json
+++ b/ng2-components/ng2-alfresco-tag/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-alfresco-tag",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-alfresco-tag",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-alfresco-tag.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -33,67 +23,39 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
     "cpx": "^1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-ajax": "^3.2.0",
-    "jasmine-core": "2.4.1",
-    "karma": "~0.13.22",
-    "karma-chrome-launcher": "~1.0.1",
-    "karma-coverage": "^1.0.0",
-    "karma-jasmine": "~1.0.2",
-    "karma-jasmine-ajax": "^0.1.13",
-    "karma-jasmine-html-reporter": "^0.2.0",
-    "karma-mocha-reporter": "^2.0.3",
     "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "^0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
     "traceur": "^0.0.91",
     "ts-node": "^1.7.0",
-    "tslint": "^3.8.1",
+    "tslint": "3.15.1",
     "typescript": "^2.0.3",
     "wsrv": "^0.1.5"
   },
@@ -103,7 +65,7 @@
   ],
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.ts b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.ts
index f58f321996..95bdd2ad87 100644
--- a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.ts
+++ b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.ts
@@ -27,7 +27,6 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core';
  */
 
 @Component({
-    moduleId: module.id,
     selector: 'alfresco-tag-node-actions-list',
     templateUrl: './tag-actions.component.html',
     styleUrls: ['./tag-actions.component.css']
diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.ts b/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.ts
index e6ff780766..8db185e749 100644
--- a/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.ts
+++ b/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.ts
@@ -26,7 +26,6 @@ import { TagService } from '../services/tag.service';
  */
 
 @Component({
-    moduleId: module.id,
     selector: 'alfresco-tag-list',
     templateUrl: './tag-list.component.html'
 })
diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.ts b/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.ts
index e4469b56cd..20193f34cb 100644
--- a/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.ts
+++ b/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.ts
@@ -26,7 +26,6 @@ import { TagService } from '../services/tag.service';
  */
 
 @Component({
-    moduleId: module.id,
     selector: 'alfresco-tag-node-list',
     templateUrl: './tag-node-list.component.html',
     styleUrls: ['./tag-node-list.component.css']
diff --git a/ng2-components/ng2-alfresco-tag/tsconfig.json b/ng2-components/ng2-alfresco-tag/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-alfresco-tag/tsconfig.json
+++ b/ng2-components/ng2-alfresco-tag/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-tag/tslint.json b/ng2-components/ng2-alfresco-tag/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-alfresco-tag/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-alfresco-tag/webpack.build.js b/ng2-components/ng2-alfresco-tag/webpack.build.js
new file mode 100644
index 0000000000..ddfc811cff
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-alfresco-tag": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-alfresco-upload/README.md b/ng2-components/ng2-alfresco-upload/README.md
index f0c688a215..a43714be19 100644
--- a/ng2-components/ng2-alfresco-upload/README.md
+++ b/ng2-components/ng2-alfresco-upload/README.md
@@ -358,7 +358,6 @@ npm start
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-alfresco-upload/demo/package.json b/ng2-components/ng2-alfresco-upload/demo/package.json
index d4d6e6f9f8..d539b4ccf9 100644
--- a/ng2-components/ng2-alfresco-upload/demo/package.json
+++ b/ng2-components/ng2-alfresco-upload/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -47,28 +47,28 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.7.6",
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-upload": "1.4.0"
diff --git a/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js b/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
index a383112368..c9897420b6 100644
--- a/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
@@ -41,8 +41,8 @@
             },
             'ng2-translate': { defaultExtension: 'js' },
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-upload': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-alfresco-upload': {main: './bundles/ng2-alfresco-upload.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-alfresco-upload/demo/tslint.json b/ng2-components/ng2-alfresco-upload/demo/tslint.json
index 8c9703b9de..36e753c92c 100644
--- a/ng2-components/ng2-alfresco-upload/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-upload/demo/tslint.json
@@ -36,7 +36,7 @@
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
     "no-consecutive-blank-lines": true,
     "no-console": [
@@ -52,11 +52,11 @@
     "no-debugger": true,
     "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
diff --git a/ng2-components/ng2-alfresco-upload/gulpfile.ts b/ng2-components/ng2-alfresco-upload/gulpfile.ts
deleted file mode 100755
index ebf8207f0d..0000000000
--- a/ng2-components/ng2-alfresco-upload/gulpfile.ts
+++ /dev/null
@@ -1,307 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/'
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-alfresco-upload/karma-test-shim.js b/ng2-components/ng2-alfresco-upload/karma-test-shim.js
index 8696dd2b16..40751756b9 100644
--- a/ng2-components/ng2-alfresco-upload/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-upload/karma-test-shim.js
@@ -1,115 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-alfresco-upload/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-alfresco-upload/karma.conf.js b/ng2-components/ng2-alfresco-upload/karma.conf.js
deleted file mode 100644
index 940f9f2f5e..0000000000
--- a/ng2-components/ng2-alfresco-upload/karma.conf.js
+++ /dev/null
@@ -1,128 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-alfresco-upload/package.json b/ng2-components/ng2-alfresco-upload/package.json
index 3dd62e31de..54e5acd17d 100644
--- a/ng2-components/ng2-alfresco-upload/package.json
+++ b/ng2-components/ng2-alfresco-upload/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-alfresco-upload",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-alfresco-upload",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-alfresco-upload.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -55,65 +45,37 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
-    "cpx": "1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-ajax": "3.2.0",
-    "jasmine-core": "2.4.1",
-    "karma": "0.13.22",
-    "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "1.0.0",
-    "karma-jasmine": "1.0.2",
-    "karma-jasmine-ajax": "0.1.13",
-    "karma-jasmine-html-reporter": "0.2.0",
-    "karma-mocha-reporter": "2.0.3",
-    "license-check": "1.1.5",
+    "cpx": "^1.3.1",
+    "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
-    "traceur": "0.0.91",
+    "traceur": "^0.0.91",
     "ts-node": "^1.7.0",
     "tslint": "3.15.1",
     "typescript": "^2.0.3",
@@ -121,7 +83,7 @@
   },
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.ts b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.ts
index 52f642c134..eef1571632 100644
--- a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.ts
@@ -33,7 +33,6 @@ import { UploadService } from '../services/upload.service';
  */
 @Component({
     selector: 'file-uploading-dialog',
-    moduleId: module.id,
     templateUrl: './file-uploading-dialog.component.html',
     styleUrls: ['./file-uploading-dialog.component.css']
 })
diff --git a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.ts b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.ts
index f6de9f950b..dc1285fbc1 100644
--- a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.ts
@@ -30,7 +30,6 @@ import { FileModel } from '../models/file.model';
  */
 @Component({
     selector: 'alfresco-file-uploading-list',
-    moduleId: module.id,
     templateUrl: './file-uploading-list.component.html',
     styleUrls: ['./file-uploading-list.component.css']
 })
diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts
index 96a0c29d69..84d19f9b9a 100644
--- a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts
@@ -48,7 +48,6 @@ const ERROR_FOLDER_ALREADY_EXIST = 409;
  */
 @Component({
     selector: 'alfresco-upload-button',
-    moduleId: module.id,
     templateUrl: './upload-button.component.html',
     styleUrls: ['./upload-button.component.css']
 })
diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts
index e5c9dd2242..70763a0ee8 100644
--- a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts
@@ -35,7 +35,6 @@ const ERROR_FOLDER_ALREADY_EXIST = 409;
  */
 @Component({
     selector: 'alfresco-upload-drag-area',
-    moduleId: module.id,
     templateUrl: './upload-drag-area.component.html',
     styleUrls: ['./upload-drag-area.component.css']
 })
diff --git a/ng2-components/ng2-alfresco-upload/tsconfig.json b/ng2-components/ng2-alfresco-upload/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-alfresco-upload/tsconfig.json
+++ b/ng2-components/ng2-alfresco-upload/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-upload/tslint.json b/ng2-components/ng2-alfresco-upload/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-alfresco-upload/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-alfresco-upload/webpack.build.js b/ng2-components/ng2-alfresco-upload/webpack.build.js
new file mode 100644
index 0000000000..61d28b4335
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-alfresco-upload": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-alfresco-userinfo/README.md b/ng2-components/ng2-alfresco-userinfo/README.md
index 0073c8fd54..4a95d8bca7 100644
--- a/ng2-components/ng2-alfresco-userinfo/README.md
+++ b/ng2-components/ng2-alfresco-userinfo/README.md
@@ -164,7 +164,6 @@ npm start
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/package.json b/ng2-components/ng2-alfresco-userinfo/demo/package.json
index 10ffd46558..460b97c8ff 100644
--- a/ng2-components/ng2-alfresco-userinfo/demo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -19,28 +19,28 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.7.6",
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-login": "1.4.0",
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/systemjs.config.js b/ng2-components/ng2-alfresco-userinfo/demo/systemjs.config.js
index 3caf1946ad..9a8c09d837 100644
--- a/ng2-components/ng2-alfresco-userinfo/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-userinfo/demo/systemjs.config.js
@@ -41,10 +41,10 @@
                 defaultExtension: 'js'
             },
             'ng2-translate': { defaultExtension: 'js' },
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-userinfo': { main: './index.js', defaultExtension: 'js'},
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-alfresco-userinfo': {main: './bundles/ng2-alfresco-userinfo.js', defaultExtension: 'js'},
+            'ng2-alfresco-login': {main: './bundles/ng2-alfresco-login.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/tslint.json b/ng2-components/ng2-alfresco-userinfo/demo/tslint.json
index 27e0dd81da..acc666937e 100644
--- a/ng2-components/ng2-alfresco-userinfo/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-userinfo/demo/tslint.json
@@ -53,7 +53,7 @@
         "no-eval": true,
         "no-inferrable-types": false,
         "no-internal-module": true,
-        "no-require-imports": true,
+        "no-require-imports": false,
         "no-shadowed-variable": true,
         "no-switch-case-fall-through": true,
         "no-trailing-whitespace": true,
diff --git a/ng2-components/ng2-alfresco-userinfo/gulpfile.ts b/ng2-components/ng2-alfresco-userinfo/gulpfile.ts
deleted file mode 100755
index ebf8207f0d..0000000000
--- a/ng2-components/ng2-alfresco-userinfo/gulpfile.ts
+++ /dev/null
@@ -1,307 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/'
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js b/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js
index 8696dd2b16..f1f4095a4b 100644
--- a/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js
@@ -1,115 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-alfresco-userinfo/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-alfresco-userinfo/karma.conf.js b/ng2-components/ng2-alfresco-userinfo/karma.conf.js
deleted file mode 100644
index ee42634b06..0000000000
--- a/ng2-components/ng2-alfresco-userinfo/karma.conf.js
+++ /dev/null
@@ -1,135 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      // Fake files
-      {pattern: 'src/assets/images/ecmImg.gif', included: false, watched: true, served: true},
-      {pattern: 'src/assets/images/bpmImg.gif', included: false, watched: true, served: true},
-      {pattern: 'src/assets/images/anonymous.gif', included: false, watched: true, served: true},
-      {pattern: 'src/assets/images/bpm-background.png', included: false, watched: true, served: true},
-      {pattern: 'src/assets/images/ecm-background.png', included: false, watched: true, served: true},
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false},
-      {pattern: 'src/assets/images/**/*.*', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-alfresco-userinfo/package.json b/ng2-components/ng2-alfresco-userinfo/package.json
index 521bb4fd6a..1c60eac71b 100644
--- a/ng2-components/ng2-alfresco-userinfo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-alfresco-userinfo",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-alfresco-userinfo",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-alfresco-userinfo.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -33,67 +23,39 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
     "cpx": "^1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-ajax": "^3.2.0",
-    "jasmine-core": "2.4.1",
-    "karma": "~0.13.22",
-    "karma-chrome-launcher": "~1.0.1",
-    "karma-coverage": "^1.0.0",
-    "karma-jasmine": "~1.0.2",
-    "karma-jasmine-ajax": "^0.1.13",
-    "karma-jasmine-html-reporter": "^0.2.0",
-    "karma-mocha-reporter": "^2.0.3",
     "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "^0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
     "traceur": "^0.0.91",
     "ts-node": "^1.7.0",
-    "tslint": "^3.8.1",
+    "tslint": "3.15.1",
     "typescript": "^2.0.3",
     "wsrv": "^0.1.5"
   },
@@ -103,10 +65,10 @@
   ],
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
-    "blocking": false,
+    "blocking": true,
     "logInfo": false,
     "logError": true
   },
diff --git a/ng2-components/ng2-alfresco-userinfo/src/assets/fake-bpm-user.service.mock.ts b/ng2-components/ng2-alfresco-userinfo/src/assets/fake-bpm-user.service.mock.ts
index 2eda651858..4278c09d51 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/assets/fake-bpm-user.service.mock.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/assets/fake-bpm-user.service.mock.ts
@@ -19,7 +19,7 @@
 export { BpmUserModel } from '../models/bpm-user.model';
 export { BpmUserService } from '../services/bpm-user.service';
 
-export var fakeBpmUserNoImage = {
+export let fakeBpmUserNoImage = {
     apps: [],
     capabilities: 'fake-capability',
     company: 'fake-company',
@@ -42,7 +42,7 @@ export var fakeBpmUserNoImage = {
     type: 'fake-type'
 };
 
-export var fakeBpmUser = {
+export let fakeBpmUser = {
     apps: [],
     capabilities: null,
     company: 'fake-company',
@@ -65,7 +65,7 @@ export var fakeBpmUser = {
     type: 'fake-type'
 };
 
-export var fakeBpmEditedUser = {
+export let fakeBpmEditedUser = {
     apps: [],
     capabilities: 'fake-capability',
     company: 'fake-company',
diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
index c5af7a1eeb..7dadf39f03 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
@@ -26,19 +26,16 @@ declare let componentHandler: any;
 
 @Component({
     selector: 'ng2-alfresco-userinfo',
-    moduleId: module.id,
     styleUrls: ['./user-info.component.css'],
     templateUrl: './user-info.component.html'
 })
 export class UserInfoComponent implements OnInit {
 
-    private baseComponentPath = module.id.replace('components/user-info.component.js', '');
+    @Input()
+    ecmBackgroundImage: string = require('../assets/images/ecm-background.png');
 
     @Input()
-    ecmBackgroundImage: string = this.baseComponentPath + 'assets/images/ecm-background.png';
-
-    @Input()
-    bpmBackgroundImage: string = this.baseComponentPath + 'assets/images/bpm-background.png';
+    bpmBackgroundImage: string = require('../assets/images/bpm-background.png');
 
     @Input()
     menuOpenType: string = 'right';
@@ -48,7 +45,7 @@ export class UserInfoComponent implements OnInit {
 
     ecmUser: EcmUserModel;
     bpmUser: BpmUserModel;
-    anonymousImageUrl: string = this.baseComponentPath + 'assets/images/anonymous.gif';
+    anonymousImageUrl: string = require('../assets/images/anonymous.gif');
     bpmUserImage: any;
     ecmUserImage: any;
 
diff --git a/ng2-components/ng2-alfresco-userinfo/tsconfig.json b/ng2-components/ng2-alfresco-userinfo/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-alfresco-userinfo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-userinfo/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-userinfo/tslint.json b/ng2-components/ng2-alfresco-userinfo/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-alfresco-userinfo/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-alfresco-userinfo/webpack.build.js b/ng2-components/ng2-alfresco-userinfo/webpack.build.js
new file mode 100644
index 0000000000..c22fd50cd9
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-alfresco-userinfo": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-alfresco-viewer/README.md b/ng2-components/ng2-alfresco-viewer/README.md
index f55425aad8..02c42f2491 100644
--- a/ng2-components/ng2-alfresco-viewer/README.md
+++ b/ng2-components/ng2-alfresco-viewer/README.md
@@ -327,7 +327,6 @@ npm start
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-alfresco-viewer/demo/package.json b/ng2-components/ng2-alfresco-viewer/demo/package.json
index 2ff2cb21be..bbbad09958 100644
--- a/ng2-components/ng2-alfresco-viewer/demo/package.json
+++ b/ng2-components/ng2-alfresco-viewer/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -19,28 +19,28 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.7.6",
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-viewer": "1.4.0",
diff --git a/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js b/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
index 80e07f4f9c..b37069fb4d 100644
--- a/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
@@ -43,8 +43,8 @@
             'ng2-translate': { defaultExtension: 'js' },
 
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-viewer': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-alfresco-viewer': {main: './bundles/ng2-alfresco-viewer.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-alfresco-viewer/demo/tslint.json b/ng2-components/ng2-alfresco-viewer/demo/tslint.json
index 55c0f8a666..2956587706 100644
--- a/ng2-components/ng2-alfresco-viewer/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-viewer/demo/tslint.json
@@ -23,10 +23,9 @@
     "interface-name": false,
     "jsdoc-format": true,
     "label-position": true,
-    "label-undefined": true,
     "max-line-length": [
       true,
-      140
+      180
     ],
     "member-ordering": [
       true,
@@ -36,7 +35,7 @@
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
     "no-consecutive-blank-lines": true,
     "no-console": [
@@ -50,17 +49,15 @@
     "no-construct": true,
     "no-constructor-vars": false,
     "no-debugger": true,
-    "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
-    "no-unreachable": true,
     "no-unused-expression": true,
     "no-unused-variable": true,
     "no-use-before-declare": true,
diff --git a/ng2-components/ng2-alfresco-viewer/gulpfile.ts b/ng2-components/ng2-alfresco-viewer/gulpfile.ts
deleted file mode 100755
index ebf8207f0d..0000000000
--- a/ng2-components/ng2-alfresco-viewer/gulpfile.ts
+++ /dev/null
@@ -1,307 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/'
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-alfresco-viewer/karma-test-shim.js b/ng2-components/ng2-alfresco-viewer/karma-test-shim.js
index 8696dd2b16..0f63f9e77c 100644
--- a/ng2-components/ng2-alfresco-viewer/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-viewer/karma-test-shim.js
@@ -1,115 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-alfresco-viewer/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-alfresco-viewer/karma.conf.js b/ng2-components/ng2-alfresco-viewer/karma.conf.js
deleted file mode 100644
index e9641f411c..0000000000
--- a/ng2-components/ng2-alfresco-viewer/karma.conf.js
+++ /dev/null
@@ -1,134 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true},
-      {pattern: 'src/**/*.html', included: true, served: true, watched: true},
-      {pattern: 'src/**/*.css', included: true, served: true, watched: true},
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      // pdf-js
-      { pattern: 'node_modules/pdfjs-dist/build/pdf.js', included: true, watched: false },
-      { pattern: 'node_modules/pdfjs-dist/build/pdf.worker.js', included: true, watched: false },
-      { pattern: 'node_modules/pdfjs-dist/web/pdf_viewer.js', included: true, watched: false },
-      { pattern: 'src/assets/fake-test-file.pdf', included: false, watched: true, served: true },
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false},
-      {pattern: 'src/**/*.js.map', included: false, watched: false}
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'text-summary'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json
index 5644d5ce95..0be29b82a6 100644
--- a/ng2-components/ng2-alfresco-viewer/package.json
+++ b/ng2-components/ng2-alfresco-viewer/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-alfresco-viewer",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-alfresco-viewer",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-alfresco-viewer.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -48,60 +38,33 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "pdfjs-dist": "1.5.404",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
-    "cpx": "1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-ajax": "3.2.0",
-    "jasmine-core": "2.4.1",
-    "karma": "0.13.22",
-    "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "1.0.0",
-    "karma-jasmine": "1.0.2",
-    "karma-jasmine-ajax": "0.1.13",
-    "karma-jasmine-html-reporter": "0.2.0",
-    "karma-mocha-reporter": "2.0.3",
-    "license-check": "1.1.5",
+    "cpx": "^1.3.1",
+    "license-check": "^1.0.4",
     "merge-stream": "^1.0.1",
     "remap-istanbul": "0.6.3",
     "rimraf": "2.5.2",
@@ -115,8 +78,9 @@
   },
   "license-check-config": {
     "src": [
-      "./src/**/*.js",
-      "!./src/services/rendering-queue.services.js"
+      "./src/**/*.ts",
+      "!./src/services/rendering-queue.services.ts",
+      "!./src/services/rendering-queue.services.d.ts"
     ],
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts
index d222a5e7da..78cd0fd4b7 100644
--- a/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts
@@ -19,7 +19,6 @@ import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { ContentService } from 'ng2-alfresco-core';
 
 @Component({
-    moduleId: module.id,
     selector: 'img-viewer',
     templateUrl: './imgViewer.component.html',
     styleUrls: ['./imgViewer.component.css']
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts
index c7185f92ef..6011c80123 100644
--- a/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts
@@ -19,7 +19,6 @@ import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { ContentService } from 'ng2-alfresco-core';
 
 @Component({
-    moduleId: module.id,
     selector: 'media-player',
     templateUrl: './mediaPlayer.component.html',
     styleUrls: ['./mediaPlayer.component.css']
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts
index 43907ae3a8..3632c5b51c 100644
--- a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts
@@ -18,7 +18,6 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-    moduleId: module.id,
     selector: 'not-supported-format',
     templateUrl: './notSupportedFormat.component.html',
     styleUrls: ['./notSupportedFormat.component.css']
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.spec.ts
index eb8771872a..92ab3c45a5 100644
--- a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.spec.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.spec.ts
@@ -80,7 +80,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
 
     describe('View with url file', () => {
         beforeEach(() => {
-            component.urlFile = 'base/src/assets/fake-test-file.pdf';
+            component.urlFile = require('../assets/fake-test-file.pdf');
             fixture.detectChanges();
         });
 
@@ -177,7 +177,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
     describe('User interaction', () => {
 
         beforeEach(() => {
-            component.urlFile = 'base/src/assets/fake-test-file.pdf';
+            component.urlFile = require('../assets/fake-test-file.pdf');
             fixture.detectChanges();
             component.inputPage('1');
         });
@@ -315,7 +315,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
 
     describe('Resize interaction', () => {
         beforeEach(() => {
-            component.urlFile = 'base/src/assets/fake-test-file.pdf';
+            component.urlFile = require('../assets/fake-test-file.pdf');
             component.inputPage('1');
         });
         it('resize event should trigger setScaleUpdatePages', (done) => {
@@ -331,7 +331,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
 
     describe('scroll interaction', () => {
         beforeEach(() => {
-            component.urlFile = 'base/src/assets/fake-test-file.pdf';
+            component.urlFile = require('../assets/fake-test-file.pdf');
             fixture.detectChanges();
         });
         it('scroll page should return the current page', (done) => {
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts
index e9b5177b1f..3e776af28e 100644
--- a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts
@@ -22,7 +22,6 @@ import { RenderingQueueServices } from '../services/rendering-queue.services';
 declare let PDFJS: any;
 
 @Component({
-    moduleId: module.id,
     selector: 'pdf-viewer',
     templateUrl: './pdfViewer.component.html',
     styleUrls: ['./pdfViewer.component.css', './pdfViewerHost.component.css'],
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewerHost.component.css b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewerHost.component.css
index 4b2bb347aa..a44e1c317e 100644
--- a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewerHost.component.css
+++ b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewerHost.component.css
@@ -228,7 +228,6 @@
     height: 100%;
     width: 100%;
     background-color: #404040;
-    background-image: url(images/texture.png);
 }
 
 :host >>> body,
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts
index c9dda5fcf9..c8b06ecad0 100644
--- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts
@@ -21,7 +21,6 @@ import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
 
 @Component({
-    moduleId: module.id,
     selector: 'alfresco-viewer',
     templateUrl: './viewer.component.html',
     styleUrls: ['./viewer.component.css']
@@ -73,8 +72,10 @@ export class ViewerComponent {
 
     ngOnChanges(changes) {
         if (this.showViewer) {
-            this.hideOtherHeaderBar();
-            this.blockOtherScrollBar();
+            if (this.overlayMode) {
+                this.hideOtherHeaderBar();
+                this.blockOtherScrollBar();
+            }
             if (!this.urlFile && !this.blobFile && !this.fileNodeId) {
                 throw new Error('Attribute urlFile or fileNodeId or blobFile is required');
             }
diff --git a/ng2-components/ng2-alfresco-viewer/tsconfig.json b/ng2-components/ng2-alfresco-viewer/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-alfresco-viewer/tsconfig.json
+++ b/ng2-components/ng2-alfresco-viewer/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-viewer/tslint.json b/ng2-components/ng2-alfresco-viewer/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-alfresco-viewer/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-alfresco-viewer/webpack.build.js b/ng2-components/ng2-alfresco-viewer/webpack.build.js
new file mode 100644
index 0000000000..3158b14ea1
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-alfresco-viewer": "./index.ts"
+    }
+});
diff --git a/ng2-components/ng2-alfresco-webscript/README.md b/ng2-components/ng2-alfresco-webscript/README.md
index d20c3ff4c1..72756ec301 100644
--- a/ng2-components/ng2-alfresco-webscript/README.md
+++ b/ng2-components/ng2-alfresco-webscript/README.md
@@ -336,7 +336,6 @@ npm start
 | Command | Description |
 | --- | --- |
 | npm run build | Build component |
-| npm run build:w | Build component and keep watching the changes |
 | npm run test | Run unit tests in the console |
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
diff --git a/ng2-components/ng2-alfresco-webscript/demo/package.json b/ng2-components/ng2-alfresco-webscript/demo/package.json
index 0e7b52b287..ee378181e2 100644
--- a/ng2-components/ng2-alfresco-webscript/demo/package.json
+++ b/ng2-components/ng2-alfresco-webscript/demo/package.json
@@ -5,7 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
     "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
@@ -19,28 +19,28 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/compiler-cli": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.2.2",
-    "@angular/upgrade": "2.2.2",
+    "@angular/router": "3.4.7",
+    "@angular/upgrade": "2.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.7.6",
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "alfresco-js-api": "~1.4.0",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0",
diff --git a/ng2-components/ng2-alfresco-webscript/demo/systemjs.config.js b/ng2-components/ng2-alfresco-webscript/demo/systemjs.config.js
index afa6c78ebb..ef3161379c 100644
--- a/ng2-components/ng2-alfresco-webscript/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-webscript/demo/systemjs.config.js
@@ -41,10 +41,10 @@
                 defaultExtension: 'js'
             },
             'ng2-translate': { defaultExtension: 'js' },
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-webscript': { main: './index.js', defaultExtension: 'js'},
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'}
+            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
+            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
+            'ng2-alfresco-datatable': {main: './bundles/ng2-alfresco-datatable.js', defaultExtension: 'js'},
+            'ng2-alfresco-webscript': {main: './bundles/ng2-alfresco-webscript.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-alfresco-webscript/demo/tslint.json b/ng2-components/ng2-alfresco-webscript/demo/tslint.json
index 55c0f8a666..36e753c92c 100644
--- a/ng2-components/ng2-alfresco-webscript/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-webscript/demo/tslint.json
@@ -26,7 +26,7 @@
     "label-undefined": true,
     "max-line-length": [
       true,
-      140
+      180
     ],
     "member-ordering": [
       true,
@@ -36,7 +36,7 @@
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
     "no-consecutive-blank-lines": true,
     "no-console": [
@@ -52,11 +52,11 @@
     "no-debugger": true,
     "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
diff --git a/ng2-components/ng2-alfresco-webscript/gulpfile.ts b/ng2-components/ng2-alfresco-webscript/gulpfile.ts
deleted file mode 100755
index ebf8207f0d..0000000000
--- a/ng2-components/ng2-alfresco-webscript/gulpfile.ts
+++ /dev/null
@@ -1,307 +0,0 @@
-import * as gulp from 'gulp';
-import * as util from 'gulp-util';
-import * as runSequence from 'run-sequence';
-import * as gulpLoadPlugins from 'gulp-load-plugins';
-import * as merge from 'merge-stream';
-import * as rimraf from 'rimraf';
-import { join } from 'path';
-import * as Builder from 'systemjs-builder';
-var autoprefixer = require('autoprefixer');
-import * as cssnano from 'cssnano';
-import * as filter from 'gulp-filter';
-import * as sourcemaps from 'gulp-sourcemaps';
-
-var APP_SRC = `.`;
-var CSS_PROD_BUNDLE = 'main.css';
-var JS_PROD_SHIMS_BUNDLE = 'shims.js';
-var NG_FACTORY_FILE = 'main-prod';
-
-const BUILD_TYPES = {
-    DEVELOPMENT: 'dev',
-    PRODUCTION: 'prod'
-};
-
-function normalizeDependencies(deps) {
-    deps
-        .filter((d) => !/\*/.test(d.src)) // Skip globs
-        .forEach((d) => d.src = require.resolve(d.src));
-    return deps;
-}
-
-function filterDependency(type: string, d): boolean {
-    const t = d.buildType || d.env;
-    d.buildType = t;
-    if (!t) {
-        d.buildType = Object.keys(BUILD_TYPES).map(k => BUILD_TYPES[k]);
-    }
-    if (!(d.buildType instanceof Array)) {
-        (<any>d).env = [d.buildType];
-    }
-    return d.buildType.indexOf(type) >= 0;
-}
-
-function getInjectableDependency() {
-    var APP_ASSETS = [
-        {src: `src/css/main.css`, inject: true, vendor: false},
-    ];
-
-    var NPM_DEPENDENCIES = [
-        {src: 'zone.js/dist/zone.js', inject: 'libs'},
-        {src: 'core-js/client/shim.min.js', inject: 'shims'},
-        {src: 'systemjs/dist/system.src.js', inject: 'shims', buildType:'dev'}
-    ];
-
-    return normalizeDependencies(NPM_DEPENDENCIES.filter(filterDependency.bind(null, 'dev')))
-        .concat(APP_ASSETS.filter(filterDependency.bind(null, 'dev')));
-}
-
-const plugins = <any>gulpLoadPlugins();
-
-let tsProjects: any = {};
-
-function makeTsProject(options: Object = {}) {
-    let optionsHash = JSON.stringify(options);
-    if (!tsProjects[optionsHash]) {
-        let config = Object.assign({
-            typescript: require('typescript')
-        }, options);
-        tsProjects[optionsHash] =
-            plugins.typescript.createProject('tsconfig.json', config);
-    }
-    return tsProjects[optionsHash];
-}
-
-gulp.task('build.html_css', () => {
-    const gulpConcatCssConfig = {
-        targetFile: CSS_PROD_BUNDLE,
-        options: {
-            rebaseUrls: false
-        }
-    };
-
-    const processors = [
-        autoprefixer({
-            browsers: [
-                'ie >= 10',
-                'ie_mob >= 10',
-                'ff >= 30',
-                'chrome >= 34',
-                'safari >= 7',
-                'opera >= 23',
-                'ios >= 7',
-                'android >= 4.4',
-                'bb >= 10'
-            ]
-        })
-    ];
-
-    const reportPostCssError = (e: any) => util.log(util.colors.red(e.message));
-
-    processors.push(
-        cssnano({
-            discardComments: {removeAll: true},
-            discardUnused: false, // unsafe, see http://goo.gl/RtrzwF
-            zindex: false, // unsafe, see http://goo.gl/vZ4gbQ
-            reduceIdents: false // unsafe, see http://goo.gl/tNOPv0
-        })
-    );
-
-    /**
-     * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
-     * configured processors
-     * Execute the appropriate component-stylesheet processing method based on user stylesheet preference.
-     */
-    function processComponentStylesheets() {
-        return gulp.src(join('src/**', '*.css'))
-            .pipe(plugins.cached('process-component-css'))
-            .pipe(plugins.postcss(processors))
-            .on('error', reportPostCssError);
-    }
-
-
-    /**
-     * Get a stream of external css files for subsequent processing.
-     */
-    function getExternalCssStream() {
-        return gulp.src(getExternalCss())
-            .pipe(plugins.cached('process-external-css'));
-    }
-
-    /**
-     * Get an array of filenames referring to all external css stylesheets.
-     */
-    function getExternalCss() {
-        return getInjectableDependency().filter(dep => /\.css$/.test(dep.src)).map(dep => dep.src);
-    }
-
-    /**
-     * Processes the external CSS files using `postcss` with the configured processors.
-     */
-    function processExternalCss() {
-        return getExternalCssStream()
-            .pipe(plugins.postcss(processors))
-            .pipe(plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options))
-            .on('error', reportPostCssError);
-    }
-
-    return merge(processComponentStylesheets(), processExternalCss());
-
-});
-
-gulp.task('build.bundles.app', (done) => {
-    var BUNDLER_OPTIONS = {
-        format: 'umd',
-        minify: false,
-        mangle: false,
-        sourceMaps: true
-    };
-    var CONFIG_TYPESCRIPT = {
-        baseURL: '.',
-        transpiler: 'typescript',
-        typescriptOptions: {
-            module: 'cjs'
-        },
-        map: {
-            typescript: 'node_modules/typescript/lib/typescript.js',
-            '@angular': 'node_modules/@angular',
-            rxjs: 'node_modules/rxjs',
-            'ng2-translate': 'node_modules/ng2-translate',
-            'alfresco-js-api': 'node_modules/alfresco-js-api/dist/alfresco-js-api',
-            'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/',
-            'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/',
-            'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/',
-            'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/',
-            'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/',
-            'ng2-activiti-form': 'node_modules/ng2-activiti-form/',
-            'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/',
-            'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist/',
-            'ng2-alfresco-search': 'node_modules/ng2-alfresco-search/',
-            'ng2-activiti-tasklist': 'node_modules/ng2-activiti-tasklist/',
-            'ng2-alfresco-tag': 'node_modules/ng2-alfresco-tag/',
-            'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload/',
-            'ng2-alfresco-userinfo': 'node_modules/ng2-alfresco-userinfo/',
-            'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/',
-            'ng2-alfresco-webscript': 'node_modules/ng2-alfresco-webscript/'
-        },
-        paths: {
-            '*': '*.js'
-        },
-        meta: {
-            'node_modules/@angular/*': {build: false},
-            'node_modules/rxjs/*': {build: false},
-            'node_modules/ng2-translate/*': {build: false},
-            'node_modules/ng2-alfresco-core/*': {build: false},
-            'node_modules/ng2-activiti-diagrams/*': {build: false},
-            'node_modules/ng2-activiti-analytics/*': {build: false},
-            'node_modules/ng2-alfresco-datatable/*': {build: false},
-            'node_modules/ng2-alfresco-documentlist/*': {build: false},
-            'node_modules/ng2-activiti-form/*': {build: false},
-            'node_modules/ng2-alfresco-login/*': {build: false},
-            'node_modules/ng2-activiti-processlist/*': {build: false},
-            'node_modules/ng2-alfresco-search/*': {build: false},
-            'node_modules/ng2-activiti-tasklist/*': {build: false},
-            'node_modules/ng2-alfresco-tag/*': {build: false},
-            'node_modules/ng2-alfresco-upload/*': {build: false},
-            'node_modules/ng2-alfresco-userinfo/*': {build: false},
-            'node_modules/ng2-alfresco-viewer/*': {build: false},
-            'node_modules/ng2-alfresco-webscript/*': {build: false}
-        }
-    };
-
-    var pkg = require('./package.json');
-    var namePkg = pkg.name;
-
-    var builder = new Builder(CONFIG_TYPESCRIPT);
-    builder
-        .buildStatic(APP_SRC + "/index", 'bundles/' + namePkg + '.js', BUNDLER_OPTIONS)
-        .then(function () {
-            return done();
-        })
-        .catch(function (err) {
-            return done(err);
-        });
-});
-
-gulp.task('build.assets.prod', () => {
-    return gulp.src([
-        join('src/**', '*.ts'),
-        'index.ts',
-        join('src/**', '*.css'),
-        join('src/**', '*.html'),
-        '!'+join('*/**', '*.d.ts'),
-        '!'+join('*/**', '*.spec.ts'),
-        '!gulpfile.ts'])
-
-});
-
-gulp.task('build.bundles', () => {
-    merge(bundleShims());
-
-    /**
-     * Returns the shim files to be injected.
-     */
-    function getShims() {
-        let libs = getInjectableDependency()
-            .filter(d => /\.js$/.test(d.src));
-
-        return libs.filter(l => l.inject === 'shims')
-            .concat(libs.filter(l => l.inject === 'libs'))
-            .concat(libs.filter(l => l.inject === true))
-            .map(l => l.src);
-    }
-
-    /**
-     * Bundles the shim files.
-     */
-    function bundleShims() {
-        return gulp.src(getShims())
-            .pipe(plugins.concat(JS_PROD_SHIMS_BUNDLE))
-            // Strip the first (global) 'use strict' added by reflect-metadata, but don't strip any others to avoid unintended scope leaks.
-            .pipe(plugins.replace(/('|")use strict\1;var Reflect;/, 'var Reflect;'))
-            .pipe(gulp.dest('bundles'));
-    }
-
-});
-
-gulp.task('build.js.prod', () => {
-    const INLINE_OPTIONS = {
-        base: APP_SRC,
-        target: 'es5',
-        useRelativePaths: true,
-        removeLineBreaks: true
-    };
-
-    let tsProject = makeTsProject();
-    let src = [
-        join('src/**/*.ts'),
-        join('!src/**/*.d.ts'),
-        join('!src/**/*.spec.ts'),
-        `!src/**/${NG_FACTORY_FILE}.ts`
-    ];
-
-    let result = gulp.src(src)
-        .pipe(plugins.plumber())
-        .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
-        .pipe(sourcemaps.init())
-        .pipe(tsProject())
-        .once('error', function (e: any) {
-            this.once('finish', () => process.exit(1));
-        });
-
-    return result.js
-        .pipe(plugins.template())
-        .pipe(sourcemaps.write())
-        .pipe(gulp.dest('src'))
-        .on('error', (e: any) => {
-            console.log(e);
-        });
-});
-
-gulp.task('build.prod', (done: any) =>
-    runSequence(
-        'build.assets.prod',
-        'build.html_css',
-        'build.js.prod',
-        'build.bundles',
-        'build.bundles.app',
-        done));
diff --git a/ng2-components/ng2-alfresco-webscript/karma-test-shim.js b/ng2-components/ng2-alfresco-webscript/karma-test-shim.js
index a8e0869510..431139924e 100644
--- a/ng2-components/ng2-alfresco-webscript/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-webscript/karma-test-shim.js
@@ -1,117 +1,27 @@
-// Tun on full stack traces in errors to help debugging
 Error.stackTraceLimit = Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+require('core-js/es6');
+require('core-js/es7/reflect');
 
-window.componentHandler = {
-    upgradeAllRegistered: function () {
-    },
-    upgradeElement: function () {
-    }
-};
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
 
-__karma__.loaded = function() {};
+var path = '../' + __karma__.config.component + '/src';
+console.log('path appContext '+ path);
 
-var builtPath = '/base/src/';
+var appContext;
+appContext = require.context('../ng2-alfresco-webscript/src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
 
-function isJsFile(path) {
-    return path.slice(-3) == '.js';
-}
 
-function isSpecFile(path) {
-    return /\.spec\.(.*\.)?js$/.test(path);
-}
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
-function isBuiltFile(path) {
-    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
-}
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
 
-var allSpecFiles = Object.keys(window.__karma__.files)
-    .filter(isSpecFile)
-    .filter(isBuiltFile);
 
-var paths = {
-    // paths serve as alias
-    'npm:': 'base/node_modules/'
-};
-
-var map = {
-    'app': 'base/src',
-    // angular bundles
-    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-
-    // testing
-    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
-    // other libraries
-    'rxjs': 'npm:rxjs',
-    'ng2-translate': 'npm:ng2-translate',
-    'hammerjs': 'npm:hammerjs',
-
-    'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-    'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable'
-};
-
-var packages = {
-    'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': {  defaultExtension: 'js' },
-    'ng2-translate': { defaultExtension: 'js' },
-    'hammerjs': {main: './hammerjs.js', defaultExtension: 'js'},
-
-    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'}
-};
-
-var config = {
-    paths: paths,
-    map: map,
-    packages: packages
-};
-
-System.config(config);
-
-System.import('@angular/core/testing')
-    .then(initTestBed)
-    .then(initTesting);
-
-function initTestBed(){
-    return Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-    ])
-    .then(function (providers) {
-        var coreTesting    = providers[0];
-        var browserTesting = providers[1];
-
-        coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
-    })
-}
-
-// Import all spec files and start karma
-function initTesting () {
-    return Promise.all(
-        allSpecFiles.map(function (moduleName) {
-            return System.import(moduleName);
-        })
-    )
-    .then(__karma__.start, __karma__.error);
-}
diff --git a/ng2-components/ng2-alfresco-webscript/karma.conf.js b/ng2-components/ng2-alfresco-webscript/karma.conf.js
deleted file mode 100644
index 8bc8b276b6..0000000000
--- a/ng2-components/ng2-alfresco-webscript/karma.conf.js
+++ /dev/null
@@ -1,132 +0,0 @@
-'use strict';
-
-module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-
-    frameworks: ['jasmine-ajax', 'jasmine'],
-
-    files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
-      'node_modules/core-js/client/shim.js',
-      'node_modules/reflect-metadata/Reflect.js',
-
-      // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/long-stack-trace-zone.js',
-      'node_modules/zone.js/dist/proxy.js',
-      'node_modules/zone.js/dist/sync-test.js',
-      'node_modules/zone.js/dist/jasmine-patch.js',
-      'node_modules/zone.js/dist/async-test.js',
-      'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/hammerjs/hammer.js',
-
-      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-
-      // Paths loaded via module imports:
-      // Angular itself
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
-
-      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
-
-      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
-
-      'karma-test-shim.js',
-
-      // paths loaded via module imports
-      {pattern: 'src/**/*.js', included: false, watched: true, nocache: true},
-      {pattern: 'src/**/*.html', included: false, watched: true, nocache: true},
-      {pattern: 'src/**/*.css', included: false, watched: true, nocache: true},
-
-      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-core/index.js', included: false, served: true, watched: false },
-
-      { pattern: 'node_modules/ng2-alfresco-datatable/src/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-datatable/src/**/*.html', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-datatable/src/**/*.css', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-datatable/index.js', included: false, served: true, watched: false },
-
-      // paths to support debugging with source maps in dev tools
-      {pattern: 'src/**/*.ts', included: false, watched: false, nocache: true },
-      {pattern: 'src/**/*.js.map', included: false, watched: false, nocache: true }
-    ],
-
-    exclude: [
-      'node_modules/**/*spec.js'
-    ],
-
-    // proxied base paths
-    proxies: {
-      // required for component assets fetched by Angular's compiler
-      '/src/': '/base/src/'
-    },
-
-    port: 9876,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    colors: true,
-
-    autoWatch: true,
-
-    captureTimeout: 180000,
-    browserDisconnectTimeout: 180000,
-    browserDisconnectTolerance: 3,
-    browserNoActivityTimeout: 300000,
-
-    browsers: ['Chrome'],
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    // Karma plugins loaded
-    plugins: [
-      'karma-jasmine',
-      'karma-coverage',
-      'karma-jasmine-ajax',
-      'karma-chrome-launcher',
-      'karma-mocha-reporter',
-      'karma-jasmine-html-reporter'
-    ],
-
-    // Coverage reporter generates the coverage
-    reporters: ['mocha', 'coverage', 'kjhtml'],
-
-    // Source files that you wanna generate coverage for.
-    // Do not include tests or libraries (these files will be instrumented by Istanbul)
-    preprocessors: {
-      'src/**/!(*spec|index|*mock|*model|*event).js': 'coverage'
-    },
-
-    coverageReporter: {
-      includeAllSources: true,
-      dir: 'coverage/',
-      subdir: 'report',
-      reporters: [
-        {type: 'text'},
-        {type: 'json', file: 'coverage-final.json'},
-        {type: 'html'},
-        {type: 'lcov'}
-      ]
-    }
-  };
-
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
-  config.set(configuration)
-};
diff --git a/ng2-components/ng2-alfresco-webscript/package.json b/ng2-components/ng2-alfresco-webscript/package.json
index 638ad7d755..151de41440 100644
--- a/ng2-components/ng2-alfresco-webscript/package.json
+++ b/ng2-components/ng2-alfresco-webscript/package.json
@@ -4,27 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
-    "clean-build": "rimraf index.js index.js.map index.d.ts 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
-    "build": "npm run clean-build && npm run tslint && tsc && license-check && npm run build.umd",
-    "build:w": "npm run clean-build && npm run tslint && npm run tsc:w && license-check && npm run build.umd",
-    "tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts' -e './gulpfile.ts'",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "pretest": "npm run build",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
-    "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
-    "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
-    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable",
-    "gulp": "gulp",
-    "build.umd": "gulp build.prod --color --env-config prod --build-type prod",
-    "reinstall": "npm cache clean && npm install"
+    "clean": "rimraf dist node_modules typings bundles coverage",
+    "build": "license-check && ../node_modules/webpack/bin/webpack.js --config webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "../node_modules/tslint/bin/tslint -c ../config/assets/tslint.json 'src/{,**/}**.ts' 'index.ts'  -e '{,**/}**.d.ts'",
+    "tsc": "../node_modules/typescript/bin/tsc",
+    "test": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-alfresco-webscript",
+    "test-browser": "../node_modules/karma/bin/karma start ../config/karma.conf.js --reporters kjhtml --component ng2-alfresco-webscript",
+    "coverage": "npm run test && ../node_modules/wsrv/bin/wsrv -o -p 9875 ./coverage/report",
+    "publish:prod": "npm run test && npm publish"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "bundles/ng2-alfresco-webscript.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -33,69 +23,41 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@angular/common": "2.2.2",
-    "@angular/compiler": "2.2.2",
-    "@angular/core": "2.2.2",
-    "@angular/forms": "2.2.2",
-    "@angular/http": "2.2.2",
+    "@angular/common": "2.4.7",
+    "@angular/compiler": "2.4.7",
+    "@angular/core": "2.4.7",
+    "@angular/forms": "2.4.7",
+    "@angular/http": "2.4.7",
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.2.2",
-    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.2.2",
+    "@angular/platform-browser": "2.4.7",
+    "@angular/platform-browser-dynamic": "2.4.7",
+    "@angular/router": "3.4.7",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0",
-    "ng2-translate": "2.5.0",
+    "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
     "cpx": "^1.3.1",
-    "cssnano": "^3.8.1",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^2.3.0",
-    "gulp-filter": "^4.0.0",
-    "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-load-plugins": "^1.4.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^6.2.0",
-    "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-template": "^4.0.0",
-    "gulp-typescript": "^3.1.3",
-    "gulp-uglify": "^2.0.0",
-    "gulp-util": "^3.0.7",
-    "jasmine-ajax": "^3.2.0",
-    "jasmine-core": "2.4.1",
-    "karma": "~0.13.22",
-    "karma-chrome-launcher": "~1.0.1",
-    "karma-coverage": "^1.0.0",
-    "karma-jasmine": "~1.0.2",
-    "karma-jasmine-ajax": "^0.1.13",
-    "karma-jasmine-html-reporter": "^0.2.0",
-    "karma-mocha-reporter": "^2.0.3",
     "license-check": "^1.0.4",
-    "material-design-lite": "^1.1.3",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "^0.6.3",
+    "remap-istanbul": "0.6.3",
     "rimraf": "2.5.2",
     "run-sequence": "^1.2.2",
     "systemjs-builder": "^0.15.34",
-    "traceur": "^0.0.91",
+    "traceur": "0.0.91",
     "ts-node": "^1.7.0",
-    "tslint": "^3.8.1",
+    "tslint": "3.15.1",
     "typescript": "^2.0.3",
     "wsrv": "^0.1.5"
   },
@@ -105,10 +67,10 @@
   ],
   "license-check-config": {
     "src": [
-      "./src/**/*.js"
+      "./src/**/*.ts"
     ],
     "path": "assets/license_header.txt",
-    "blocking": false,
+    "blocking": true,
     "logInfo": false,
     "logError": true
   },
diff --git a/ng2-components/ng2-alfresco-webscript/tsconfig.json b/ng2-components/ng2-alfresco-webscript/tsconfig.json
index 28919f9cc5..156810e6af 100644
--- a/ng2-components/ng2-alfresco-webscript/tsconfig.json
+++ b/ng2-components/ng2-alfresco-webscript/tsconfig.json
@@ -16,22 +16,20 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "node_modules/@types"
+            "../node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
         "demo",
         "node_modules",
-        "dist",
-        "tools",
-        "gulpfile.ts",
-        "gulpfile.d.ts"
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-webscript/tslint.json b/ng2-components/ng2-alfresco-webscript/tslint.json
deleted file mode 100644
index acc666937e..0000000000
--- a/ng2-components/ng2-alfresco-webscript/tslint.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-    "rules": {
-        "align": [
-            true,
-            "parameters",
-            "statements"
-        ],
-        "ban": false,
-        "class-name": true,
-        "comment-format": [
-            true,
-            "check-space"
-        ],
-        "curly": true,
-        "eofline": true,
-        "forin": true,
-        "indent": [
-            true,
-            "spaces"
-        ],
-        "interface-name": false,
-        "jsdoc-format": true,
-        "label-position": true,
-        "label-undefined": true,
-        "max-line-length": [
-            true,
-            180
-        ],
-        "member-ordering": [
-            true,
-            "static-before-instance",
-            "variables-before-functions"
-        ],
-        "no-any": false,
-        "no-arg": true,
-        "no-bitwise": false,
-        "no-conditional-assignment": true,
-        "no-consecutive-blank-lines": true,
-        "no-console": [
-            true,
-            "debug",
-            "info",
-            "time",
-            "timeEnd",
-            "trace"
-        ],
-        "no-construct": true,
-        "no-constructor-vars": false,
-        "no-debugger": true,
-        "no-duplicate-key": true,
-        "no-duplicate-variable": true,
-        "no-empty": false,
-        "no-eval": true,
-        "no-inferrable-types": false,
-        "no-internal-module": true,
-        "no-require-imports": false,
-        "no-shadowed-variable": true,
-        "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": true,
-        "no-unreachable": true,
-        "no-unused-expression": true,
-        "no-unused-variable": true,
-        "no-use-before-declare": true,
-        "no-var-keyword": true,
-        "no-var-requires": true,
-        "object-literal-sort-keys": false,
-        "one-line": [
-            true,
-            "check-open-brace",
-            "check-catch",
-            "check-else",
-            "check-whitespace"
-        ],
-        "quotemark": [
-            true,
-            "single",
-            "avoid-escape"
-        ],
-        "radix": true,
-        "semicolon": true,
-        "switch-default": true,
-        "trailing-comma": [
-            true,
-            {
-                "multiline": "never",
-                "singleline": "never"
-            }
-        ],
-        "triple-equals": [
-            true,
-            "allow-null-check"
-        ],
-        "typedef": false,
-        "typedef-whitespace": [
-            true,
-            {
-                "call-signature": "nospace",
-                "index-signature": "nospace",
-                "parameter": "nospace",
-                "property-declaration": "nospace",
-                "variable-declaration": "nospace"
-            }
-        ],
-        "use-strict": false,
-        "variable-name": [
-            true,
-            "check-format",
-            "allow-leading-underscore",
-            "ban-keywords"
-        ],
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-operator",
-            "check-separator",
-            "check-type",
-            "check-module",
-            "check-decl"
-        ]
-    }
-}
diff --git a/ng2-components/ng2-alfresco-webscript/webpack.build.js b/ng2-components/ng2-alfresco-webscript/webpack.build.js
new file mode 100644
index 0000000000..d84c8d7e7e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/webpack.build.js
@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('../config/webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-alfresco-webscript": "./index.ts"
+    }
+});
diff --git a/ng2-components/package-base.json b/ng2-components/package-base.json
new file mode 100644
index 0000000000..2a9beece54
--- /dev/null
+++ b/ng2-components/package-base.json
@@ -0,0 +1,83 @@
+{
+    "name": "ng2-alfresco-components",
+    "description": "Alfresco ng2 components",
+    "version": "1.3.0",
+    "author": "Alfresco Software, Ltd.",
+    "scripts": {
+        "clean": "rimraf node_modules",
+        "build": "webpack --config config/webpack.build.js --progress --profile --bail",
+        "pkg-build": "package-json-merge ng2-alfresco-core/package.json ng2-alfresco-datatable/package.json ng2-activiti-diagrams/package.json ng2-activiti-analytics/package.json ng2-activiti-form/package.json ng2-activiti-tasklist/package.json ng2-activiti-processlist/package.json ng2-alfresco-documentlist/package.json ng2-alfresco-login/package.json ng2-alfresco-search/package.json ng2-alfresco-tag/package.json ng2-alfresco-upload/package.json ng2-alfresco-viewer/package.json ng2-alfresco-webscript/package.json ng2-alfresco-webscript/package.json ng2-alfresco-userinfo/package.json ng2-alfresco-social/package.json package-base.json  > package.json",
+        "test": "karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-alfresco-webscript",
+        "tslint": "",
+        "tsc": "",
+        "pretest": "",
+        "test-browser": "",
+        "posttest": "",
+        "coverage": "",
+        "publish:prod": ""
+    },
+    "main": "./index.js",
+    "module": "./index.js",
+    "typings": "./index.d.ts",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
+    },
+    "bugs": {
+        "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
+    },
+    "dependencies": {
+    },
+    "devDependencies": {
+        "angular2-template-loader": "^0.6.2",
+        "css-loader": "^0.23.1",
+        "css-to-string-loader": "^0.1.2",
+        "html-loader": "^0.4.4",
+        "file-loader": "0.11.1",
+        "null-loader": "^0.1.1",
+        "package-json-merge": "0.0.1",
+        "raw-loader": "^0.5.1",
+        "rimraf": "^2.5.4",
+        "source-map-loader": "^0.1.6",
+        "style-loader": "^0.13.1",
+        "istanbul-instrumenter-loader": "0.2.0",
+        "loader-utils": "^1.1.0",
+        "ts-loader": "^2.0.0",
+        "to-string-loader": "^1.1.4",
+        "tslint": "^4.4.2",
+        "tslint-loader": "^3.3.0",
+        "typescript": "^2.1.6",
+        "license-check": "1.1.5",
+        "copy-webpack-plugin": "^4.0.1",
+        "extract-text-webpack-plugin": "^2.0.0-rc.3",
+        "html-webpack-plugin": "^2.28.0",
+        "karma": "^0.13.22",
+        "karma-chrome-launcher": "~1.0.1",
+        "karma-coverage": "^1.1.1",
+        "karma-jasmine": "~1.0.2",
+        "karma-jasmine-ajax": "^0.1.13",
+        "karma-jasmine-html-reporter": "0.2.0",
+        "karma-mocha-reporter": "^2.2.2",
+        "karma-remap-istanbul": "^0.6.0",
+        "karma-sourcemap-loader": "^0.3.7",
+        "karma-systemjs": "^0.16.0",
+        "karma-webpack": "^2.0.2",
+        "script-loader": "0.7.0",
+        "webpack": "^2.2.1",
+        "webpack-dev-server": "^2.3.0",
+        "webpack-merge": "2.6.1",
+        "jasmine-ajax": "^3.2.0",
+        "jasmine-core": "2.4.1"
+    },
+    "keywords": [
+        "alfresco-ng2-components",
+        "angular2",
+        "typescript",
+        "alfresco",
+        "activiti",
+        "ecm",
+        "bpm"
+    ],
+    "license": "Apache-2.0"
+}
+
diff --git a/ng2-components/package.json b/ng2-components/package.json
new file mode 100644
index 0000000000..3cc78df23e
--- /dev/null
+++ b/ng2-components/package.json
@@ -0,0 +1,178 @@
+{
+  "name": "ng2-alfresco-components",
+  "description": "Alfresco ng2 components",
+  "version": "1.3.0",
+  "author": "Alfresco Software, Ltd.",
+  "scripts": {
+    "clean": "rimraf node_modules",
+    "build": "webpack --config config/webpack.build.js --progress --profile --bail",
+    "license-check": "license-check",
+    "tslint": "",
+    "tsc": "",
+    "test": "karma start ../config/karma.conf.js --reporters mocha,coverage --single-run --component ng2-alfresco-webscript",
+    "test-browser": "",
+    "coverage": "",
+    "publish:prod": "",
+    "pkg-build": "package-json-merge ng2-alfresco-core/package.json ng2-alfresco-datatable/package.json ng2-activiti-diagrams/package.json ng2-activiti-analytics/package.json ng2-activiti-form/package.json ng2-activiti-tasklist/package.json ng2-activiti-processlist/package.json ng2-alfresco-documentlist/package.json ng2-alfresco-login/package.json ng2-alfresco-search/package.json ng2-alfresco-tag/package.json ng2-alfresco-upload/package.json ng2-alfresco-viewer/package.json ng2-alfresco-webscript/package.json ng2-alfresco-webscript/package.json ng2-alfresco-userinfo/package.json ng2-alfresco-social/package.json package-base.json  > package.json",
+    "pretest": "",
+    "posttest": ""
+  },
+  "main": "./index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
+  },
+  "license": "Apache-2.0",
+  "contributors": {
+    "0": {
+      "name": "Eugenio Romano",
+      "email": "eugenio.romano@alfresco.com"
+    },
+    "1": {
+      "name": "Eugenio Romano",
+      "email": "eugenio.romano@alfresco.com"
+    },
+    "2": {
+      "name": "Denys Vuika",
+      "email": "denys.vuika@gmail.com"
+    },
+    "3": {
+      "name": "Eugenio Romano",
+      "email": "eugenio.romano@alfresco.com"
+    }
+  },
+  "keywords": {
+    "0": "alfresco-ng2-components",
+    "1": "angular2",
+    "2": "typescript",
+    "3": "alfresco",
+    "4": "activiti",
+    "5": "ecm",
+    "6": "bpm"
+  },
+  "dependencies": {
+    "@angular/common": "2.2.2",
+    "@angular/compiler": "2.2.2",
+    "@angular/compiler-cli": "2.4.7",
+    "@angular/core": "2.2.2",
+    "@angular/forms": "2.2.2",
+    "@angular/http": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
+    "@angular/platform-browser": "2.2.2",
+    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/router": "3.2.2",
+    "@angular/upgrade": "2.4.7",
+    "alfresco-js-api": "~1.4.0",
+    "core-js": "2.4.1",
+    "dialog-polyfill": "0.4.7",
+    "element.scrollintoviewifneeded-polyfill": "1.0.1",
+    "hammerjs": "2.0.8",
+    "intl": "1.2.4",
+    "material-design-icons": "2.2.3",
+    "material-design-lite": "1.2.1",
+    "ng2-translate": "2.5.0",
+    "reflect-metadata": "0.1.10",
+    "rxjs": "5.0.0-beta.12",
+    "systemjs": "0.19.27",
+    "zone.js": "0.6.26",
+    "ng2-alfresco-core": "1.4.0",
+    "raphael": "2.2.7",
+    "chart.js": "2.5.0",
+    "md-date-time-picker": "2.2.0",
+    "moment": "2.15.1",
+    "ng2-activiti-diagrams": "1.4.0",
+    "ng2-charts": "1.5.0",
+    "ng2-activiti-form": "1.4.0",
+    "ng2-alfresco-datatable": "1.4.0",
+    "ng2-activiti-tasklist": "1.4.0",
+    "ng2-alfresco-documentlist": "1.4.0",
+    "pdfjs-dist": "1.5.404"
+  },
+  "devDependencies": {
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "autoprefixer": "^6.5.4",
+    "cpx": "^1.3.1",
+    "license-check": "1.1.5",
+    "merge-stream": "^1.0.1",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "systemjs-builder": "^0.15.34",
+    "traceur": "^0.0.91",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "typescript": "^2.1.6",
+    "wsrv": "^0.1.5",
+    "concurrently": "^2.2.0",
+    "remap-istanbul": "^0.6.3",
+    "cssnano": "^3.8.1",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^3.1.1",
+    "gulp-cached": "^1.1.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-concat-css": "^2.3.0",
+    "gulp-filter": "^4.0.0",
+    "gulp-inline-ng2-template": "^4.0.0",
+    "gulp-load-plugins": "^1.4.0",
+    "gulp-plumber": "^1.1.0",
+    "gulp-postcss": "^6.2.0",
+    "gulp-replace": "^0.5.4",
+    "gulp-sourcemaps": "^1.9.1",
+    "gulp-template": "^4.0.0",
+    "gulp-typescript": "^3.1.3",
+    "gulp-uglify": "^2.0.0",
+    "gulp-util": "^3.0.7",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "angular2-template-loader": "^0.6.2",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "html-loader": "^0.4.4",
+    "file-loader": "0.11.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "loader-utils": "^1.1.0",
+    "ts-loader": "^2.0.0",
+    "to-string-loader": "^1.1.4",
+    "tslint-loader": "^3.3.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "html-webpack-plugin": "^2.28.0",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "script-loader": "0.7.0",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1"
+  },
+  "license-check-config": {
+    "src": {
+      "0": "./src/**/*.ts",
+      "1": "!./src/services/rendering-queue.services.ts",
+      "2": "!./src/services/rendering-queue.services.d.ts"
+    },
+    "path": "assets/license_header.txt",
+    "blocking": true,
+    "logInfo": false,
+    "logError": true
+  },
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}
diff --git a/ng2-components/update.sh b/ng2-components/update.sh
deleted file mode 100755
index 0f7732c5ba..0000000000
--- a/ng2-components/update.sh
+++ /dev/null
@@ -1,39 +0,0 @@
-#!/usr/bin/env bash
-
-(cd ng2-alfresco-core; npm update;)
-
-(cd ng2-activiti-form; npm update;)
-(cd ng2-activiti-form/demo; npm update;)
-
-(cd ng2-activiti-processlist; npm update;)
-(cd ng2-activiti-processlist/demo; npm update;)
-
-(cd ng2-activiti-tasklist; npm update;)
-(cd ng2-activiti-tasklist/demo; npm update;)
-
-(cd ng2-alfresco-datatable; npm update;)
-(cd ng2-alfresco-datatable/demo; npm update;)
-
-(cd ng2-alfresco-documentlist; npm update;)
-(cd ng2-alfresco-documentlist/demo; npm update;)
-
-(cd ng2-alfresco-login; npm update;)
-(cd ng2-alfresco-login/demo; npm update;)
-
-(cd ng2-alfresco-search; npm update;)
-(cd ng2-alfresco-search/demo; npm update;)
-
-(cd ng2-alfresco-upload; npm update;)
-(cd ng2-alfresco-upload/demo; npm update;)
-
-(cd ng2-alfresco-viewer; npm update;)
-(cd ng2-alfresco-viewer/demo; npm update;)
-
-(cd ng2-alfresco-webscript; npm update;)
-(cd ng2-alfresco-webscript/demo; npm update;)
-
-(cd ng2-alfresco-tag; npm update;)
-(cd ng2-alfresco-tag/demo; npm update;)
-
-(cd ng2-alfresco-userinfo; npm update;)
-(cd ng2-alfresco-userinfo/demo; npm update;)
diff --git a/scripts/README.md b/scripts/README.md
index ec0283c9a7..a0ea1a315b 100644
--- a/scripts/README.md
+++ b/scripts/README.md
@@ -34,25 +34,12 @@ feel for what's available.
 ./start.sh -update or -u
 ```
 
-* If you want to use your local components use the following script with any of the previous option. It will npm link all the components
-in the demo shell:
-
-```sh
-./start.sh -link or -l
-```
-
 * If you want to build all your local component:
 
 ```sh
 ./npm-buid-all.sh
 ```
 
-* If you want to build all your local component and link it together and in the demo shell:
-
-```sh
-./npm-buid-all.sh -l or -link
-```
-
 * If you want to build all your local component and run the test:
 
 ```sh
diff --git a/scripts/npm-build-all.sh b/scripts/npm-build-all.sh
index 0b3369e834..09710aa168 100755
--- a/scripts/npm-build-all.sh
+++ b/scripts/npm-build-all.sh
@@ -2,7 +2,6 @@
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 eval RUN_TEST=false
-eval RUN_LINK=false
 
 eval projects=( "ng2-alfresco-core"
     "ng2-alfresco-datatable"
@@ -14,6 +13,7 @@ eval projects=( "ng2-alfresco-core"
     "ng2-alfresco-documentlist"
     "ng2-alfresco-login"
     "ng2-alfresco-search"
+    "ng2-alfresco-social"
     "ng2-alfresco-tag"
     "ng2-alfresco-social"
     "ng2-alfresco-upload"
@@ -25,64 +25,40 @@ show_help() {
     echo "Usage: npm-build-all.sh"
     echo ""
     echo "-t or -test build all your local component and run also the test on them"
-    echo "-l or -link link together the local component and link it also in the demo shell"
 }
 
 enable_test(){
     RUN_TEST=true
 }
 
-enable_link(){
-    RUN_LINK=true
-}
-
-build_project() {
-    cd $1
-    echo "====== build project: $2 ====="
-    npm install
-
-    if $RUN_TEST == true; then
-     npm run test
-    fi
-
-    if $RUN_LINK == true; then
-      npm run travis
-    fi
-
-    npm run tsc
-    npm run build.umd
-
-    if $RUN_LINK == true; then
-      npm link
-    fi
+test_project() {
+    echo "====== test project: $1 ====="
+    npm run test || exit 1
 }
 
 while [[ $1 == -* ]]; do
     case "$1" in
       -h|--help|-\?) show_help; exit 0;;
-      -l|--link)  enable_link; shift;;
       -t|--test)  enable_test; shift;;
       -*) echo "invalid option: $1" 1>&2; show_help; exit 1;;
     esac
 done
 
+cd "$DIR/../ng2-components/"
+npm install package-json-merge -g
+npm install rimraf -g
+npm install license-check -g
+npm run pkg-build
+npm install && npm run build || exit 1
+
 for PACKAGE in ${projects[@]}
 do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
-  build_project $DESTDIR $PACKAGE
+  cd $DESTDIR
+  npm run license-check || exit 1
+  if $RUN_TEST == true; then
+      test_project $PACKAGE
+  fi
 done
 
-#Install demo
 
-cd "$DIR/../demo-shell-ng2"
-npm install
-
-if $RUN_LINK == true; then
-    #LINK ALL THE COMPONENTS INSIDE THE DEMO-SHELL
-    for PACKAGE in ${projects[@]}
-    do
-      DESTDIR="$DIR/../ng2-components/${PACKAGE}"
-      echo "====== demo shell linking: ${PACKAGE} ====="
-      npm link ${PACKAGE}
-    done
-fi
diff --git a/scripts/npm-clean.sh b/scripts/npm-clean.sh
index b1b50bc6e3..540ab9e51c 100755
--- a/scripts/npm-clean.sh
+++ b/scripts/npm-clean.sh
@@ -12,6 +12,7 @@ eval projects=( "ng2-activiti-diagrams"
       "ng2-alfresco-documentlist"
       "ng2-alfresco-login"
       "ng2-alfresco-search"
+      "ng2-alfresco-social"
       "ng2-alfresco-tag"
       "ng2-alfresco-social"
       "ng2-alfresco-upload"
@@ -19,6 +20,8 @@ eval projects=( "ng2-activiti-diagrams"
       "ng2-alfresco-webscript"
       "ng2-alfresco-userinfo" )
 
+npm install rimraf -g
+
 for PACKAGE in ${projects[@]}
 do
   echo "====== clean component: ${PACKAGE} ====="
@@ -35,4 +38,7 @@ done
 cd "$DIR/../demo-shell-ng2"
 npm run clean
 
+cd "$DIR/../ng2-components"
+npm run clean
+
 cd ${DIR}
diff --git a/scripts/npm-link-all-components-demo.sh b/scripts/npm-link-all-components-demo.sh
deleted file mode 100755
index bd27ca4483..0000000000
--- a/scripts/npm-link-all-components-demo.sh
+++ /dev/null
@@ -1,33 +0,0 @@
-#!/usr/bin/env bash
-
-DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
-
-#LINK CORE
-echo "====== linking component: ng2-alfresco-core ====="
-cd "$DIR/../ng2-components/ng2-alfresco-core/demo"
-npm install
-
-#LINK ALL THE OTHERS COMPONENTS
-for PACKAGE in \
-  ng2-alfresco-datatable \
-  ng2-activiti-diagrams \
-  ng2-activiti-analytics \
-  ng2-activiti-form \
-  ng2-activiti-tasklist \
-  ng2-activiti-processlist \
-  ng2-alfresco-documentlist \
-  ng2-alfresco-login \
-  ng2-alfresco-search \
-  ng2-alfresco-tag \
-  ng2-alfresco-upload \
-  ng2-alfresco-viewer \
-  ng2-alfresco-social \
-  ng2-alfresco-webscript \
-  ng2-alfresco-userinfo
-do
-  DESTDIR="$DIR/../ng2-components/${PACKAGE}"
-  echo "====== linking component: ${PACKAGE} ====="
-  cd "$DESTDIR/demo"
-  npm link ${PACKAGE}
-  npm travis
-done
diff --git a/scripts/npm-link-demo-shell.sh b/scripts/npm-link-demo-shell.sh
deleted file mode 100755
index dcdedb110e..0000000000
--- a/scripts/npm-link-demo-shell.sh
+++ /dev/null
@@ -1,56 +0,0 @@
-#!/usr/bin/env bash
-
-DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
-
-#LINK ALL THE COMPONENTS
-for PACKAGE in \
-  ng2-alfresco-core \
-  ng2-alfresco-datatable \
-  ng2-activiti-diagrams \
-  ng2-activiti-analytics \
-  ng2-activiti-form \
-  ng2-activiti-tasklist \
-  ng2-activiti-processlist \
-  ng2-alfresco-documentlist \
-  ng2-alfresco-login \
-  ng2-alfresco-search \
-  ng2-alfresco-tag \
-  ng2-alfresco-social \
-  ng2-alfresco-upload \
-  ng2-alfresco-viewer \
-  ng2-alfresco-webscript \
-  ng2-alfresco-userinfo
-do
-  DESTDIR="$DIR/../ng2-components/${PACKAGE}"
-  echo "====== linking component: ${PACKAGE} ====="
-  cd "$DESTDIR"
-  npm run travis
-  npm link
-done
-
-#LINK ALL THE COMPONENTS INSIDE THE DEMO-SHELL
-cd "$DIR/../demo-shell-ng2"
-for PACKAGE in \
-  ng2-activiti-diagrams \
-  ng2-activiti-analytics \
-  ng2-activiti-form \
-  ng2-activiti-processlist \
-  ng2-activiti-tasklist \
-  ng2-alfresco-core \
-  ng2-alfresco-datatable \
-  ng2-alfresco-documentlist \
-  ng2-alfresco-login \
-  ng2-alfresco-search \
-  ng2-alfresco-tag \
-  ng2-alfresco-social \
-  ng2-alfresco-upload \
-  ng2-alfresco-viewer \
-  ng2-alfresco-webscript \
-  ng2-alfresco-userinfo
-do
-  DESTDIR="$DIR/../ng2-components/${PACKAGE}"
-  echo "====== demo shell linking: ${PACKAGE} ====="
-  npm link ${PACKAGE}
-done
-
-npm install
diff --git a/scripts/start.sh b/scripts/start.sh
index e8e7379933..eb118f5dcc 100755
--- a/scripts/start.sh
+++ b/scripts/start.sh
@@ -10,7 +10,6 @@ show_help() {
     echo "-i or -install start the demo shell and install the dependencies"
     echo "-u or -update start the demo shell and update the dependencies"
     echo "-c or -cleanInstall clean the demo shell install the dependencies and start the the demo shell"
-    echo "-l or -link all the ng2-components in the demo shell and start the the demo shell"
 }
 
 install() {
@@ -27,22 +26,6 @@ cleanInstall() {
     npm install
 }
 
-link() {
-    echo "link"
-    "$DIR/npm-link-demo-shell.sh"
-}
-
-eval args=("$@");
-
-while [[ $1 == -* ]]; do
-    case "$1" in
-      -l|--link) link; shift;;
-      -*) shift;;
-    esac
-done
-
-set -- "${args[@]}";
-
 while [[ $1  == -* ]]; do
     case "$1" in
       -h|--help|-\?) show_help; exit 0;;