From f33b841f9b6c2f0f7afafd5468feb57ee2383473 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Wed, 3 May 2017 08:46:02 +0100
Subject: [PATCH 01/72] [ADF-534] Login dialog enhancements (#1844)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* version 1.4.0 social component

* Login dialog enhancements

- ability to toggle ‘Remember me’ (switched off by default now)
- ability to toggle a footer with extra actions (switched off by
default now)
- readme updates

* fix unit tests
---
 ng2-components/ng2-alfresco-login/README.md   | 30 +++++++++----------
 .../components/alfresco-login.component.css   | 11 +++++++
 .../components/alfresco-login.component.html  | 29 +++++++-----------
 .../alfresco-login.component.spec.ts          |  8 +++--
 .../components/alfresco-login.component.ts    |  6 ++++
 5 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md
index b5ea564686..a4067003b2 100644
--- a/ng2-components/ng2-alfresco-login/README.md
+++ b/ng2-components/ng2-alfresco-login/README.md
@@ -106,8 +106,8 @@ This component allow to authenticate to Alfresco One and Alfresco Activiti.
 Usage example of this component :
 
 **main.ts**
-```ts
 
+```ts
 import { NgModule, Component } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -153,9 +153,22 @@ export class AppComponent {
 export class AppModule { }
 
 platformBrowserDynamic().bootstrapModule(AppModule);
-
 ```
 
+#### Properties
+
+| Name | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| `providers` | string | ECM | Possible valid value are ECM, BPM or ALL. The default behaviour of this component will logged in only in the ECM . If you want log in in both system the correct value to use is ALL |
+| `disableCsrf` | boolean | false | To prevent the CSRF Token from been submitted. Only for Activiti call |
+| `needHelpLink` | string | '' | It will change the url of the NEED HELP link in the footer  |
+| `registerLink` | string | '' | It will change the url of the REGISTER link in the footer |
+| `logoImageUrl` | string | Alfresco logo image | To change the logo image with a customised image |
+| `backgroundImageUrl` | string | Alfresco background image | To change the background image with a customised image |
+| `fieldsValidation` | { [key: string]: any; }, extra?: { [key: string]: any; } |  | Use it to customise the validation rules of the login form |
+| `showRememberMe` | boolean | false | Toggle `Remember me` checkbox visibility |
+| `showLoginActions` | boolean | false | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
+
 #### Events
 
 | Name | Description |
@@ -164,19 +177,6 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 | `onError` | The event is emitted when the login fails |
 | `executeSubmit` | The event is emitted when the form is submitted |
 
-#### Options
-
-| Name     | Options     | Default      | Description | Mandatory
-| ---           | ---         | ---          | ---         | ---
-| `providers`         | *string*    |   ECM     | Possible valid value are ECM, BPM or ALL. The default behaviour of this component will logged in only in the ECM . If you want log in in both system the correct value to use is ALL |
-| `disableCsrf`         | *boolean*    |   false     | To prevent the CSRF Token from been submitted. Only for Activiti call |
-| `needHelpLink`         | *string*    |   ''     | It will change the url of the NEED HELP link in the footer  |
-| `registerLink`         | *string*    |   ''     | It will change the url of the REGISTER link in the footer |
-| `logoImageUrl`         | *string*    |   Alfresco logo image   | To change the logo image with a customised image |
-| `backgroundImageUrl`         | *string*    | Alfresco background image    | To change the background image with a customised image |
-| `fieldsValidation`         | *map*  { [key: string]: any; }, extra?: { [key: string]: any; }   |   null     | Use it to customise the validation rules of the login form |
-
-
 ## Change footer content
 
 <img src="assets/custom-footer.png" width="400" />
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
index 643d1beb1f..3ba3b8801a 100644
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
+++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
@@ -230,3 +230,14 @@
 .adf-full-width {
     width: 100%;
 }
+
+.adf-login__remember-me {
+    padding-top: 15px;
+}
+
+.adf-login__field {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 24px;
+}
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
index ac38b7139d..7cf4430e4b 100644
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
+++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
@@ -1,6 +1,6 @@
 <div class="content-grid mdl-grid content-layout login-content"
      [style.background-image]="'url(' + backgroundImageUrl + ')'">
-    <div class="login-card-wide mdl-card mdl-shadow--4dp">
+    <div class="mdl-card login-card-wide">
         <form [formGroup]="form" (submit)="onSubmit(form.value, $event)">
             <div class="mdl-card__title alfresco-logo">
                 <!--HEADER TEMPLATE-->
@@ -20,13 +20,11 @@
                 </div>
 
                 <!--USERNAME FIELD-->
-                <div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}"
-                     class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-
+                <div class="adf-login__field" [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}">
                     <md-input-container class="adf-full-width">
                         <input md-input placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
                                type="text"
-                               class="mdl-textfield__input adf-full-width"
+                               class="adf-full-width"
                                [formControl]="form.controls['username']"
                                autocapitalize="none"
                                id="username"
@@ -41,14 +39,13 @@
                 </div>
 
                 <!--PASSWORD FIELD-->
-                <div class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label alfresco-login__password">
+                <div class="adf-login__field alfresco-login__password">
                     <md-icon *ngIf="!isPasswordShow" class="alfresco-login__password-icon" data-automation-id="show_password" (click)="toggleShowPassword()">visibility</md-icon>
                     <md-icon *ngIf="isPasswordShow" class="alfresco-login__password-icon" data-automation-id="hide_password" (click)="toggleShowPassword()">visibility_off</md-icon>
 
                     <md-input-container class="adf-full-width">
                         <input md-input placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
                                type="password"
-                               class="mdl-textfield__input"
                                [formControl]="form.controls['password']"
                                id="password"
                                data-automation-id="password"
@@ -66,15 +63,11 @@
                 <button type="submit" id="login-button" tabindex="3"
                         class="center mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
                         data-automation-id="login-button" [disabled]="!form.valid">{{'LOGIN.BUTTON.LOGIN' | translate }}</button>
-                <br>
-                <div class="center">
-                    <label class=" mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="remember">
-                        <input type="checkbox" id="remember" class="center mdl-checkbox__input">
-                        <span id="login-remember" class="mdl-checkbox__label">{{'LOGIN.LABEL.REMEMBER' | translate }}</span>
-                    </label>
+                <div *ngIf="showRememberMe" class="adf-login__remember-me">
+                    <md-checkbox>{{'LOGIN.LABEL.REMEMBER' | translate }}</md-checkbox>
                 </div>
             </div>
-            <div class="mdl-card__actions mdl-card--border mdl-card__link">
+            <div *ngIf="showLoginActions" class="mdl-card__actions mdl-card--border mdl-card__link">
 
                 <!--FOOTER TEMPLATE-->
                 <template *ngIf="footerTemplate"
@@ -82,11 +75,11 @@
                           [ngForTemplate]="footerTemplate">
                 </template>
                 <div class="login-action" *ngIf="!footerTemplate">
-                    <div id="login-action-help" class="login-action-left"> <a href="{{needHelpLink}}">{{'LOGIN.ACTION.HELP' | translate
-                        }}</a>
+                    <div id="login-action-help" class="login-action-left">
+                        <a href="{{needHelpLink}}">{{'LOGIN.ACTION.HELP' | translate }}</a>
                     </div>
-                    <div id="login-action-register" class="login-action-right"> <a href="{{registerLink}}">{{'LOGIN.ACTION.REGISTER' |
-                        translate }}</a>
+                    <div id="login-action-register" class="login-action-right">
+                        <a href="{{registerLink}}">{{'LOGIN.ACTION.REGISTER' | translate }}</a>
                     </div>
                 </div>
             </div>
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts
index df15d21e9c..db7499d9d9 100644
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts
+++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts
@@ -16,7 +16,7 @@
  */
 
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-import { DebugElement }    from '@angular/core';
+import { DebugElement } from '@angular/core';
 import { AlfrescoAuthenticationService, CoreModule } from 'ng2-alfresco-core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { AlfrescoLoginComponent } from './alfresco-login.component';
@@ -24,7 +24,7 @@ import { AuthenticationMock } from './../assets/authentication.service.mock';
 import { TranslationMock } from './../assets/translation.service.mock';
 
 describe('AlfrescoLogin', () => {
-    let component: any;
+    let component: AlfrescoLoginComponent;
     let fixture: ComponentFixture<AlfrescoLoginComponent>;
     let debug: DebugElement;
     let element: any;
@@ -50,6 +50,8 @@ describe('AlfrescoLogin', () => {
         debug = fixture.debugElement;
         element = fixture.nativeElement;
         component = fixture.componentInstance;
+        component.showRememberMe = true;
+        component.showLoginActions = true;
 
         usernameInput = element.querySelector('#username');
         passwordInput = element.querySelector('#password');
@@ -67,8 +69,10 @@ describe('AlfrescoLogin', () => {
         expect(element.querySelector('#login-button')).toBeDefined();
         expect(element.querySelector('#login-button').innerText).toEqual('LOGIN.BUTTON.LOGIN');
 
+        /*
         expect(element.querySelector('#login-remember')).toBeDefined();
         expect(element.querySelector('#login-remember').innerText).toEqual('LOGIN.LABEL.REMEMBER');
+        */
 
         expect(element.querySelector('#login-action-help')).toBeDefined();
         expect(element.querySelector('#login-action-help').innerText).toEqual('LOGIN.ACTION.HELP');
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 4fedc3018d..32db6e7938 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
@@ -35,6 +35,12 @@ export class AlfrescoLoginComponent implements OnInit {
 
     isPasswordShow: boolean = false;
 
+    @Input()
+    showRememberMe: boolean = false;
+
+    @Input()
+    showLoginActions: boolean = false;
+
     @Input()
     needHelpLink: string = '';
 

From 25cffb1f1993998a4c9ea8a820463de109156caf Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Wed, 3 May 2017 08:47:46 +0100
Subject: [PATCH 02/72] add missing module exports (#1853)

- FileModel
- PermissionModel
---
 ng2-components/ng2-alfresco-upload/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ng2-components/ng2-alfresco-upload/index.ts b/ng2-components/ng2-alfresco-upload/index.ts
index 39df4f969b..f31f38e7da 100644
--- a/ng2-components/ng2-alfresco-upload/index.ts
+++ b/ng2-components/ng2-alfresco-upload/index.ts
@@ -47,6 +47,8 @@ export * from './src/components/upload-drag-area.component';
 export * from './src/services/upload.service';
 export * from './src/directives/file-draggable.directive';
 export * from './src/components/file-uploading-list.component';
+export * from './src/models/file.model';
+export * from './src/models/permissions.model';
 
 export const UPLOAD_DIRECTIVES: any[] = [
     FileDraggableDirective,

From f89a0eafd9d22eb6fc97fc6d63b27c7a3410d57b Mon Sep 17 00:00:00 2001
From: Infad Kachancheri <infad.k@muraai.com>
Date: Wed, 3 May 2017 13:30:51 +0530
Subject: [PATCH 03/72] [DW-44] - Task Service - Add a new method to get the
 application details by Id (#1843)

ADF-555 New service that returns application details for a given appId
---
 .../services/activiti-tasklist.service.spec.ts | 18 ++++++++++++++++++
 .../src/services/activiti-tasklist.service.ts  | 14 +++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.spec.ts b/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.spec.ts
index e6961ae81f..fd7696551c 100644
--- a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.spec.ts
@@ -506,6 +506,24 @@ describe('Activiti TaskList Service', () => {
             });
         });
 
+        it('should get the deployed app details by id ', (done) => {
+            service.getApplicationDetailsById(1).subscribe(
+                (app: any) => {
+                    expect(app).toBeDefined();
+                    expect(app.name).toEqual('Sales-Fakes-App');
+                    expect(app.description).toEqual('desc-fake1');
+                    expect(app.deploymentId).toEqual('111');
+                    done();
+                }
+            );
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                'status': 200,
+                contentType: 'application/json',
+                responseText: JSON.stringify(fakeApps)
+            });
+        });
+
         it('should create a new standalone task ', (done) => {
             let taskFake = new TaskDetailsModel({
                 name: 'FakeNameTask',
diff --git a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts b/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts
index d64b4ff926..abf5f24890 100644
--- a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts
@@ -42,13 +42,25 @@ export class ActivitiTaskListService {
         return Observable.fromPromise(this.apiService.getInstance().activiti.appsApi.getAppDefinitions())
             .map((response: any) => {
                 if (name) {
-                    return response.data.find(p => p.name === name);
+                    return response.data.find(app => app.name === name);
                 }
                 return response.data;
             })
             .catch(err => this.handleError(err));
     }
 
+    /**
+     * Retrieve Deployed App details by appId
+     * @returns {Observable<any>}
+     */
+    getApplicationDetailsById(appId: number): Observable<any> {
+        return Observable.fromPromise(this.apiService.getInstance().activiti.appsApi.getAppDefinitions())
+            .map((response: any) => {
+                return response.data.find(app => app.id === appId);
+            })
+            .catch(err => this.handleError(err));
+    }
+
     /**
      * Retrieve all the Tasks filters
      * @returns {Observable<any>}

From 0fa56dff2397e0002cf8566b44fa822b6c6de666 Mon Sep 17 00:00:00 2001
From: Infad Kachancheri <infad.k@muraai.com>
Date: Wed, 3 May 2017 13:32:32 +0530
Subject: [PATCH 04/72] [DW-43] Task Service - Fix the input type from string
 to number (#1842)

ADF-554 Process Service - Fix the input type from string to number
---
 .../src/assets/tasklist-service.mock.ts        |  4 ++--
 .../services/activiti-tasklist.service.spec.ts | 18 +++++++++---------
 .../src/services/activiti-tasklist.service.ts  |  7 ++++---
 3 files changed, 15 insertions(+), 14 deletions(-)

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 810bfd5e47..ed6ec3e523 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
@@ -25,12 +25,12 @@ export var fakeFilters = {
     data: [
         new AppDefinitionRepresentationModel(
             {
-                id: '1', name: 'FakeInvolvedTasks', recent: false, icon: 'glyphicon-align-left',
+                id: 1, name: 'FakeInvolvedTasks', recent: false, icon: 'glyphicon-align-left',
                 filter: { sort: 'created-desc', name: '', state: 'open', assignment: 'fake-involved' }
             }
         ),
         {
-            id: '2', name: 'FakeMyTasks', recent: false, icon: 'glyphicon-align-left',
+            id: 2, name: 'FakeMyTasks', recent: false, icon: 'glyphicon-align-left',
             filter: { sort: 'created-desc', name: '', state: 'open', assignment: 'fake-assignee' }
         }
     ]
diff --git a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.spec.ts b/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.spec.ts
index fd7696551c..9fd3401d8b 100644
--- a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.spec.ts
@@ -102,14 +102,14 @@ describe('Activiti TaskList Service', () => {
         });
 
         it('should return the task filter by id', (done) => {
-            service.getTaskFilterById('2').subscribe(
-                (res: FilterRepresentationModel) => {
-                    expect(res).toBeDefined();
-                    expect(res.id).toEqual('2');
-                    expect(res.name).toEqual('FakeMyTasks');
-                    expect(res.filter.sort).toEqual('created-desc');
-                    expect(res.filter.state).toEqual('open');
-                    expect(res.filter.assignment).toEqual('fake-assignee');
+            service.getTaskFilterById(2).subscribe(
+                (taskFilter: FilterRepresentationModel) => {
+                    expect(taskFilter).toBeDefined();
+                    expect(taskFilter.id).toEqual(2);
+                    expect(taskFilter.name).toEqual('FakeMyTasks');
+                    expect(taskFilter.filter.sort).toEqual('created-desc');
+                    expect(taskFilter.filter.state).toEqual('open');
+                    expect(taskFilter.filter.assignment).toEqual('fake-assignee');
                     done();
                 }
             );
@@ -125,7 +125,7 @@ describe('Activiti TaskList Service', () => {
             service.getTaskFilterByName('FakeMyTasks').subscribe(
                 (res: FilterRepresentationModel) => {
                     expect(res).toBeDefined();
-                    expect(res.id).toEqual('2');
+                    expect(res.id).toEqual(2);
                     expect(res.name).toEqual('FakeMyTasks');
                     expect(res.filter.sort).toEqual('created-desc');
                     expect(res.filter.state).toEqual('open');
diff --git a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts b/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts
index abf5f24890..7a1931d2dd 100644
--- a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts
@@ -79,13 +79,14 @@ export class ActivitiTaskListService {
 
     /**
      * Retrieve the Tasks filter by id
-     * @param taskId - string - The id of the filter
+     * @param filterId - number - The id of the filter
+     * @param appId - string - optional - The id of app
      * @returns {Observable<FilterRepresentationModel>}
      */
-    getTaskFilterById(taskId: string, appId?: string): Observable<FilterRepresentationModel> {
+    getTaskFilterById(filterId: number, appId?: string): Observable<FilterRepresentationModel> {
         return Observable.fromPromise(this.callApiTaskFilters(appId))
             .map((response: any) => {
-                return response.data.find(filter => filter.id === taskId);
+                return response.data.find(filter => filter.id === filterId);
             }).catch(err => this.handleError(err));
     }
 

From 89594769413340254da92b9efa0fdfc58628b8d6 Mon Sep 17 00:00:00 2001
From: Infad Kachancheri <infad.k@muraai.com>
Date: Wed, 3 May 2017 14:53:40 +0530
Subject: [PATCH 05/72] [DW-45] Process Service - Fix the input type from
 string to number (#1845)

 Process Service - Fix the input type from string to number
---
 .../src/assets/activiti-process.service.mock.ts  |  2 +-
 .../services/activiti-process.service.spec.ts    | 16 ++++++++--------
 .../src/services/activiti-process.service.ts     |  9 +++++----
 3 files changed, 14 insertions(+), 13 deletions(-)

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 5c16a53f14..a218c3c10e 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
@@ -28,7 +28,7 @@ export var fakeFilters = {
     data: [new FilterProcessRepresentationModel({
         'name': 'Running',
         'appId': '22',
-        'id': '333',
+        'id': 333,
         'recent': true,
         'icon': 'glyphicon-random',
         'filter': {'sort': 'created-desc', 'name': '', 'state': 'running'}
diff --git a/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.spec.ts b/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.spec.ts
index ed4b0123a1..61fffefa1e 100644
--- a/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.spec.ts
@@ -596,13 +596,13 @@ describe('ActivitiProcessService', () => {
             });
 
             it('should return the task filter by id', (done) => {
-                service.getProcessFilterById('333').subscribe(
-                    (res: FilterProcessRepresentationModel) => {
-                        expect(res).toBeDefined();
-                        expect(res.id).toEqual('333');
-                        expect(res.name).toEqual('Running');
-                        expect(res.filter.sort).toEqual('created-desc');
-                        expect(res.filter.state).toEqual('running');
+                service.getProcessFilterById(333).subscribe(
+                    (processFilter: FilterProcessRepresentationModel) => {
+                        expect(processFilter).toBeDefined();
+                        expect(processFilter.id).toEqual(333);
+                        expect(processFilter.name).toEqual('Running');
+                        expect(processFilter.filter.sort).toEqual('created-desc');
+                        expect(processFilter.filter.state).toEqual('running');
                         done();
                     }
                 );
@@ -612,7 +612,7 @@ describe('ActivitiProcessService', () => {
                 service.getProcessFilterByName('Running').subscribe(
                     (res: FilterProcessRepresentationModel) => {
                         expect(res).toBeDefined();
-                        expect(res.id).toEqual('333');
+                        expect(res.id).toEqual(333);
                         expect(res.name).toEqual('Running');
                         expect(res.filter.sort).toEqual('created-desc');
                         expect(res.filter.state).toEqual('running');
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 0da95cd609..abdb80ed37 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
@@ -72,13 +72,14 @@ export class ActivitiProcessService {
 
     /**
      * Retrieve the process filter by id
-     * @param processId - string - The id of the filter
+     * @param filterId - number - The id of the filter
+     * @param appId - string - optional - The id of app
      * @returns {Observable<FilterProcessRepresentationModel>}
      */
-    getProcessFilterById(processId: string, appId?: string): Observable<FilterProcessRepresentationModel> {
-        return Observable.fromPromise(this.callApiGetUserProcessInstanceFilters(appId))
+    getProcessFilterById(filterId: number, appId?: string): Observable<FilterProcessRepresentationModel> {
+        return Observable.fromPromise(this.callApiProcessFilters(appId))
             .map((response: any) => {
-                return response.data.find(filter => filter.id === processId);
+                return response.data.find(filter => filter.id === filterId);
             }).catch(err => this.handleError(err));
     }
 

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 06/72] 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;;

From b47a5e49c00fddafa01091cd5cd74001f54884f0 Mon Sep 17 00:00:00 2001
From: eromano <eugenioromano16@gmail.com>
Date: Wed, 3 May 2017 14:38:37 +0200
Subject: [PATCH 07/72] fix pacakge json social and add force option publish
 script

---
 .../ng2-alfresco-social/package.json          |  4 +--
 scripts/npm-publish.sh                        | 26 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/ng2-components/ng2-alfresco-social/package.json b/ng2-components/ng2-alfresco-social/package.json
index 1d3180c9b1..4e1107e646 100644
--- a/ng2-components/ng2-alfresco-social/package.json
+++ b/ng2-components/ng2-alfresco-social/package.json
@@ -14,9 +14,7 @@
     "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-social.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
diff --git a/scripts/npm-publish.sh b/scripts/npm-publish.sh
index a8ea1ee0ad..945e2f097a 100755
--- a/scripts/npm-publish.sh
+++ b/scripts/npm-publish.sh
@@ -3,6 +3,25 @@
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
 "$DIR/npm-clean.sh"
+eval FORCE_PUBLISH=false
+
+show_help() {
+    echo "Usage: npm-publish.sh"
+    echo ""
+    echo "-f or -force publish the package with force"
+}
+
+enable_force(){
+    FORCE_PUBLISH=true
+}
+
+while [[ $1 == -* ]]; do
+    case "$1" in
+      -h|--help|-\?) show_help; exit 0;;
+      -f|--force)  enable_force; shift;;
+      -*) echo "invalid option: $1" 1>&2; show_help; exit 1;;
+    esac
+done
 
 for PACKAGE in \
   ng2-alfresco-core \
@@ -27,6 +46,11 @@ do
   cd ${DESTDIR}
   npm run clean
   npm install
-  npm run publish:prod
+  if FORCE_PUBLISH == false; then
+     npm run publish:prod
+  fi
+  if FORCE_PUBLISH == true; then
+     npm run test && npm run publish --force || exit 1
+  fi
   cd ${DIR}
 done

From 934509c7ba057921c704c5e5ee1997f58a6a4e7a Mon Sep 17 00:00:00 2001
From: Infad Kachancheri <infad.k@muraai.com>
Date: Wed, 3 May 2017 21:00:36 +0530
Subject: [PATCH 08/72] [DW-46] - Process Service - Add a new method to get the
 application details by Id (#1846)

ADF-555 - Process Service - Add a new method to get the application details by Id
---
 .../services/activiti-process.service.spec.ts   |  8 ++++++++
 .../src/services/activiti-process.service.ts    | 17 +++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.spec.ts b/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.spec.ts
index 61fffefa1e..e701144dcc 100644
--- a/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.spec.ts
@@ -566,6 +566,14 @@ describe('ActivitiProcessService', () => {
             );
         }));
 
+        it('should return the correct app by id', async(() => {
+            service.getApplicationDetailsById(fakeApp1.id).subscribe((app) => {
+                expect(app.id).toBe(fakeApp1.id);
+                expect(app.name).toBe(fakeApp1.name);
+                expect(app.deploymentId).toBe(fakeApp1.deploymentId);
+            });
+        }));
+
     });
 
     describe('filters', () => {
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 6e0659bc7e..fedb836f1c 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
@@ -39,7 +39,20 @@ export class ActivitiProcessService {
      */
     getDeployedApplications(name: string): Observable<AppDefinitionRepresentationModel> {
         return Observable.fromPromise(this.apiService.getInstance().activiti.appsApi.getAppDefinitions())
-            .map((response: any) => response.data.find((p: AppDefinitionRepresentationModel) => p.name === name))
+            .map((response: any) => response.data.find((app: AppDefinitionRepresentationModel) => app.name === name))
+            .catch(err => this.handleError(err));
+    }
+
+    /**
+     * Retrieve deployed apps details by id
+     * @param appId - number - optional - The id of app
+     * @returns {Observable<any>}
+     */
+    getApplicationDetailsById(appId: number): Observable<any> {
+        return Observable.fromPromise(this.apiService.getInstance().activiti.appsApi.getAppDefinitions())
+            .map((response: any) => {
+                return response.data.find(app => app.id === appId);
+            })
             .catch(err => this.handleError(err));
     }
 
@@ -47,7 +60,7 @@ export class ActivitiProcessService {
         return Observable.fromPromise(this.apiService.getInstance().activiti.processApi.getProcessInstances(requestNode))
             .map((res: any) => {
                 if (requestNode.processDefinitionKey) {
-                    return res.data.filter(p => p.processDefinitionKey === requestNode.processDefinitionKey);
+                    return res.data.filter(process => process.processDefinitionKey === requestNode.processDefinitionKey);
                 } else {
                     return res.data;
                 }

From 4188a5aee9eb131172377cc3078bff2da714634e Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Wed, 3 May 2017 17:33:10 +0200
Subject: [PATCH 09/72] clean rating component (#1854)

---
 .../src/components/like.component.spec.ts                  | 2 +-
 .../ng2-alfresco-social/src/components/like.component.ts   | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/ng2-components/ng2-alfresco-social/src/components/like.component.spec.ts b/ng2-components/ng2-alfresco-social/src/components/like.component.spec.ts
index 4b2e201768..9e431367d1 100644
--- a/ng2-components/ng2-alfresco-social/src/components/like.component.spec.ts
+++ b/ng2-components/ng2-alfresco-social/src/components/like.component.spec.ts
@@ -65,7 +65,7 @@ describe('Like component', () => {
             jasmine.Ajax.uninstall();
         });
 
-        it('should like component should be present', (done) => {
+        it('should like component be present', (done) => {
             fixture.detectChanges();
 
             component.ngOnChanges().subscribe(() => {
diff --git a/ng2-components/ng2-alfresco-social/src/components/like.component.ts b/ng2-components/ng2-alfresco-social/src/components/like.component.ts
index 514488c703..2715fdef33 100644
--- a/ng2-components/ng2-alfresco-social/src/components/like.component.ts
+++ b/ng2-components/ng2-alfresco-social/src/components/like.component.ts
@@ -42,6 +42,8 @@ export class LikeComponent {
     }
 
     ngOnChanges() {
+        this.clean();
+
         let ratingObserver = this.ratingService.getRating(this.nodeId, this.ratingType);
 
         ratingObserver.subscribe(
@@ -77,4 +79,9 @@ export class LikeComponent {
 
         this.changeVote.emit(this.likesCounter);
     }
+
+    clean() {
+     this.isLike = false;
+     this.likesCounter = 0;
+    }
 }

From 31bd24839e6432936abfe00bc879ced45d5c920b Mon Sep 17 00:00:00 2001
From: Infad Kachancheri <infad.k@muraai.com>
Date: Thu, 4 May 2017 19:46:14 +0530
Subject: [PATCH 10/72] [DW-49]: Add new input to process activiti-filters
 component to show/hide icons (#1849)

[ADF-557]: Add new input to process activiti-filters component to show/hide icons
---
 .../src/components/activiti-filters.component.html             | 2 +-
 .../src/components/activiti-filters.component.ts               | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.html
index 84ac999ab6..b65f96aa40 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.html
@@ -3,7 +3,7 @@
         <li class="mdl-list__item activiti-filters__entry" (click)="selectFilter(filter)" *ngFor="let filter of filters"
             [class.active]="currentFilter === filter">
             <span class="mdl-list__item-primary-content">
-            <i class="material-icons mdl-list__item-icon activiti-filters__entry-icon" [attr.data-automation-id]="filter.name + '_filter'" >assignment</i>
+            <i *ngIf="showIcon" class="material-icons mdl-list__item-icon activiti-filters__entry-icon" [attr.data-automation-id]="filter.name + '_filter'" >assignment</i>
             {{filter.name}}
             </span>
         </li>
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 95d61cf168..e9d183b91a 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
@@ -45,6 +45,9 @@ export class ActivitiProcessFilters implements OnInit, OnChanges {
     @Input()
     appName: string;
 
+    @Input()
+    showIcon: boolean = true;
+
     private filterObserver: Observer<FilterProcessRepresentationModel>;
     filter$: Observable<FilterProcessRepresentationModel>;
 

From fc728676c04731a5c05789c1a46b13cd1eaac7f3 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Thu, 4 May 2017 15:40:16 +0100
Subject: [PATCH 11/72] webpack configuration fix

---
 demo-shell-ng2/config/webpack.common.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/demo-shell-ng2/config/webpack.common.js b/demo-shell-ng2/config/webpack.common.js
index a683c6bf73..27f34660ec 100644
--- a/demo-shell-ng2/config/webpack.common.js
+++ b/demo-shell-ng2/config/webpack.common.js
@@ -140,5 +140,9 @@ module.exports = {
         new webpack.optimize.CommonsChunkPlugin({
             name: ['app', 'vendor', 'polyfills']
         })
-    ]
+    ],
+
+    node: {
+        fs: 'empty'
+    }
 };

From b5ebe5bc47558e93b23abcef21b50a8866d4be83 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Fri, 5 May 2017 09:28:07 +0200
Subject: [PATCH 12/72] invert show default properties (#1858)

* invert show default properties

* fix test
---
 ng2-components/ng2-alfresco-login/README.md   |  4 +--
 .../ng2-alfresco-login/package.json           |  2 +-
 .../components/alfresco-login.component.html  |  6 ++---
 .../alfresco-login.component.spec.ts          | 25 +++++++++++++++----
 .../components/alfresco-login.component.ts    |  4 +--
 5 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md
index d06660d9e5..98921b5be6 100644
--- a/ng2-components/ng2-alfresco-login/README.md
+++ b/ng2-components/ng2-alfresco-login/README.md
@@ -166,8 +166,8 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 | `logoImageUrl` | string | Alfresco logo image | To change the logo image with a customised image |
 | `backgroundImageUrl` | string | Alfresco background image | To change the background image with a customised image |
 | `fieldsValidation` | { [key: string]: any; }, extra?: { [key: string]: any; } |  | Use it to customise the validation rules of the login form |
-| `showRememberMe` | boolean | false | Toggle `Remember me` checkbox visibility |
-| `showLoginActions` | boolean | false | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
+| `showRememberMe` | boolean | true | Toggle `Remember me` checkbox visibility |
+| `showLoginActions` | boolean | true | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
 
 #### Events
 
diff --git a/ng2-components/ng2-alfresco-login/package.json b/ng2-components/ng2-alfresco-login/package.json
index 2febe1aaf6..315c91b373 100644
--- a/ng2-components/ng2-alfresco-login/package.json
+++ b/ng2-components/ng2-alfresco-login/package.json
@@ -10,7 +10,7 @@
     "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\"",
+    "test-browser": "../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"
   },
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
index 7cf4430e4b..a9fa74f8c5 100644
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
+++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
@@ -63,18 +63,18 @@
                 <button type="submit" id="login-button" tabindex="3"
                         class="center mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
                         data-automation-id="login-button" [disabled]="!form.valid">{{'LOGIN.BUTTON.LOGIN' | translate }}</button>
-                <div *ngIf="showRememberMe" class="adf-login__remember-me">
+                <div *ngIf="showRememberMe" class="adf-login__remember-me" id ="login-remember">
                     <md-checkbox>{{'LOGIN.LABEL.REMEMBER' | translate }}</md-checkbox>
                 </div>
             </div>
-            <div *ngIf="showLoginActions" class="mdl-card__actions mdl-card--border mdl-card__link">
+            <div class="mdl-card__actions mdl-card--border mdl-card__link">
 
                 <!--FOOTER TEMPLATE-->
                 <template *ngIf="footerTemplate"
                           ngFor [ngForOf]="[data]"
                           [ngForTemplate]="footerTemplate">
                 </template>
-                <div class="login-action" *ngIf="!footerTemplate">
+                <div class="login-action" *ngIf="!footerTemplate && showLoginActions">
                     <div id="login-action-help" class="login-action-left">
                         <a href="{{needHelpLink}}">{{'LOGIN.ACTION.HELP' | translate }}</a>
                     </div>
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts
index db7499d9d9..bb482568b8 100644
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts
+++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts
@@ -63,17 +63,15 @@ describe('AlfrescoLogin', () => {
         expect(element.querySelector('[for="username"]')).toBeDefined();
         expect(element.querySelector('[for="username"]').innerText).toEqual('LOGIN.LABEL.USERNAME');
 
+        expect(element.querySelector('#login-remember')).toBeDefined();
+        expect(element.querySelector('#login-remember').innerText).toContain('LOGIN.LABEL.REMEMBER');
+
         expect(element.querySelector('[for="password"]')).toBeDefined();
         expect(element.querySelector('[for="password"]').innerText).toEqual('LOGIN.LABEL.PASSWORD');
 
         expect(element.querySelector('#login-button')).toBeDefined();
         expect(element.querySelector('#login-button').innerText).toEqual('LOGIN.BUTTON.LOGIN');
 
-        /*
-        expect(element.querySelector('#login-remember')).toBeDefined();
-        expect(element.querySelector('#login-remember').innerText).toEqual('LOGIN.LABEL.REMEMBER');
-        */
-
         expect(element.querySelector('#login-action-help')).toBeDefined();
         expect(element.querySelector('#login-action-help').innerText).toEqual('LOGIN.ACTION.HELP');
 
@@ -89,6 +87,23 @@ describe('AlfrescoLogin', () => {
         expect(element.querySelector('input[type="text"]').value).toEqual('');
     });
 
+    it('should hide remember me if showRememberMe is false', () => {
+        component.showRememberMe = false;
+
+        fixture.detectChanges();
+
+        expect(element.querySelector('#login-remember')).toBe(null);
+    });
+
+    it('should hide login actions if showLoginActions is false', () => {
+        component.showLoginActions = false;
+
+        fixture.detectChanges();
+
+        expect(element.querySelector('#login-action-help')).toBe(null);
+        expect(element.querySelector('#login-action-register')).toBe(null);
+    });
+
     it('should render validation min-length error when the username is just 1 character', () => {
         usernameInput.value = '1';
         usernameInput.dispatchEvent(new Event('input'));
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 40c3b6fccf..a9076422b5 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
@@ -33,10 +33,10 @@ export class AlfrescoLoginComponent implements OnInit {
     isPasswordShow: boolean = false;
 
     @Input()
-    showRememberMe: boolean = false;
+    showRememberMe: boolean = true;
 
     @Input()
-    showLoginActions: boolean = false;
+    showLoginActions: boolean = true;
 
     @Input()
     needHelpLink: string = '';

From 0f04bcdceeb4e066e8187b64d4f4ba767414e221 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Fri, 5 May 2017 09:16:06 +0100
Subject: [PATCH 13/72] update shared vs code settings

---
 .vscode/settings.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 277ffe4f6d..1f73ef2cd7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,5 +10,6 @@
         "**/*.d.ts": { "when": "$(basename).ts"},
         "**/coverage": true
     },
-    "editor.renderIndentGuides": true
+    "editor.renderIndentGuides": true,
+    "tslint.configFile": "ng2-components/config/assets/tslint.json"
 }

From 80d67212b780a517816ca9f17723099e4904d6d8 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Fri, 5 May 2017 18:11:36 +0200
Subject: [PATCH 14/72] [ADF-579] - move license check in webpack (#1859)

* move license check in webpack

* fix exclusion check header

* different headers
---
 .../config/loaders/license-check.js           | 67 +++++++++++++++++++
 demo-shell-ng2/config/webpack.common.js       | 18 +++++
 demo-shell-ng2/package.json                   | 16 +----
 .../config/assets/license_header.txt          | 30 +++++----
 .../config/assets/license_header_add.txt      | 14 ++++
 .../config/custom-loaders/license-check.js    | 67 +++++++++++++++++++
 ng2-components/config/webpack.common.js       | 14 +++-
 scripts/npm-build-all.sh                      |  2 -
 8 files changed, 196 insertions(+), 32 deletions(-)
 create mode 100644 demo-shell-ng2/config/loaders/license-check.js
 create mode 100644 ng2-components/config/assets/license_header_add.txt
 create mode 100644 ng2-components/config/custom-loaders/license-check.js

diff --git a/demo-shell-ng2/config/loaders/license-check.js b/demo-shell-ng2/config/loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/demo-shell-ng2/config/loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/demo-shell-ng2/config/webpack.common.js b/demo-shell-ng2/config/webpack.common.js
index 27f34660ec..03cfd6fd61 100644
--- a/demo-shell-ng2/config/webpack.common.js
+++ b/demo-shell-ng2/config/webpack.common.js
@@ -29,6 +29,13 @@ module.exports = {
         'vendor': './app/vendor.ts',
         'app': './app/main.ts'
     },
+
+    resolveLoader: {
+        alias: {
+            "license-check": path.resolve(__dirname, "./loaders/license-check")
+        }
+    },
+
     module: {
         rules: [
             {
@@ -84,6 +91,17 @@ module.exports = {
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                 loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                include: helpers.root('app'),
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, '../assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/],
             }
         ]
     },
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index fbcdf0ce3f..c1f7effc54 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -4,14 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "build": "rimraf dist && npm run licensecheck && webpack --config config/webpack.prod.js --progress --profile --bail",
+    "build": "rimraf dist && 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'",
     "server-versions": "rimraf versions.json && npm list --depth=0 --json=true --prod=true > versions.json  || exit 0",
-    "aws": "node app.js",
-    "licensecheck": "license-check"
+    "aws": "node app.js"
   },
   "repository": {
     "type": "git",
@@ -118,7 +117,6 @@
     "karma-remap-istanbul": "^0.6.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.2",
-    "license-check": "1.1.5",
     "null-loader": "^0.1.1",
     "to-string-loader": "^1.1.4",
     "raw-loader": "^0.5.1",
@@ -134,15 +132,5 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "^2.6.1"
-  },
-  "license-check-config": {
-    "src": [
-      "./app/**/*.js",
-      "!./app/js/*.js"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
   }
 }
diff --git a/ng2-components/config/assets/license_header.txt b/ng2-components/config/assets/license_header.txt
index b38baa9716..58ad8b656b 100644
--- a/ng2-components/config/assets/license_header.txt
+++ b/ng2-components/config/assets/license_header.txt
@@ -1,14 +1,16 @@
-@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.
+/*!
+ * @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/config/assets/license_header_add.txt b/ng2-components/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/config/assets/license_header_add.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/config/custom-loaders/license-check.js b/ng2-components/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/config/webpack.common.js b/ng2-components/config/webpack.common.js
index 8c2a2805bf..80773b1f73 100644
--- a/ng2-components/config/webpack.common.js
+++ b/ng2-components/config/webpack.common.js
@@ -7,7 +7,8 @@ module.exports = {
 
     resolveLoader: {
         alias: {
-            "file-multi-loader": path.resolve(__dirname, "./custom-loaders/file-loader-multi")
+            "file-multi-loader": path.resolve(__dirname, "./custom-loaders/file-loader-multi"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
         }
     },
 
@@ -65,6 +66,15 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
             },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
@@ -95,7 +105,7 @@ module.exports = {
     plugins: [
         new webpack.NoEmitOnErrorsPlugin(),
 
-        new webpack.BannerPlugin(fs.readFileSync(path.resolve(__dirname, './assets/license_header.txt'), 'utf8')),
+        new webpack.BannerPlugin(fs.readFileSync(path.resolve(__dirname, './assets/license_header_add.txt'), 'utf8')),
 
         // Workaround for angular/angular#11580
         new webpack.ContextReplacementPlugin(
diff --git a/scripts/npm-build-all.sh b/scripts/npm-build-all.sh
index 09710aa168..fa837b6c87 100755
--- a/scripts/npm-build-all.sh
+++ b/scripts/npm-build-all.sh
@@ -47,7 +47,6 @@ 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
 
@@ -55,7 +54,6 @@ for PACKAGE in ${projects[@]}
 do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
   cd $DESTDIR
-  npm run license-check || exit 1
   if $RUN_TEST == true; then
       test_project $PACKAGE
   fi

From a57520436ce02ba89e8637e22b5fbda80d9d3300 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Mon, 8 May 2017 12:57:51 +0200
Subject: [PATCH 15/72] Update readme components list

---
 ng2-components/README.md | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/ng2-components/README.md b/ng2-components/README.md
index 4d8702dd16..b2a84c07cd 100644
--- a/ng2-components/README.md
+++ b/ng2-components/README.md
@@ -39,14 +39,19 @@
 
 - [DataTable](ng2-alfresco-datatable/README.md)
 - [DocumentList](ng2-alfresco-documentlist/README.md)
-- [Viewer](ng2-alfresco-viewer/README.md)
 - [Login](ng2-alfresco-login/README.md)
-- [Upload](ng2-alfresco-upload/README.md)
-- [Webscript Viewer](ng2-alfresco-webscript/README.md)
+- [Search](ng2-alfresco-search/README.md)
+- [Social](ng2-alfresco-social/README.md)
 - [Tag list and controls](ng2-alfresco-tag/README.md)
+- [User Info](ng2-alfresco-userinfo/README.md)
+- [Upload](ng2-alfresco-upload/README.md)
+- [Viewer](ng2-alfresco-viewer/README.md)
+- [Webscript Viewer](ng2-alfresco-webscript/README.md)
 
 ## BPM components
 
+- [Analytics](ng2-activiti-analytics/README.md)
+- [Diagrams](ng2-activiti-diagrams/README.md)
 - [TaskList](ng2-activiti-tasklist/README.md)
 - [ProcessList](ng2-activiti-processlist/README.md)
 - [Form](ng2-activiti-form/README.md)

From 9689097199684601783681343c83c950579b1961 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Mon, 8 May 2017 13:06:45 +0200
Subject: [PATCH 16/72] Fix table properties readme

---
 ng2-components/ng2-activiti-tasklist/README.md | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md
index a0b588a6b2..aae994f3f8 100644
--- a/ng2-components/ng2-activiti-tasklist/README.md
+++ b/ng2-components/ng2-activiti-tasklist/README.md
@@ -210,16 +210,17 @@ Here's the list of available properties you can define for a Data Column definit
 
 ### Properties
 
-| Name | Description |
+
+| Name | Type | Default | Description |
 | --- | --- | --- | --- |
-|`appId`| { string } The id of the app. |
-|`processDefinitionKey`| { string } The processDefinitionKey of the process. |
-|`assignment`| { string } The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> |
-|`state`| { string } Define state of the processes. Possible values are: completed, active  |
+|`appId`| { string } || The id of the app. |
+|`processDefinitionKey`| { string } || The processDefinitionKey of the process. |
+|`assignment`| { string } || The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> |
+|`state`| { string } || Define state of the processes. Possible values are: completed, active  |
 |`hasIcon` | boolean | true | Show/Hide the icon on the left . |
-|`landingTaskId`| { string } Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
-|`sort`| { string } Define the sort of the processes. Possible values are : created-desc, created-asc, due-desc, due-asc |
-| `data` | { DataTableAdapter } (optional) JSON object that represent the number and the type of the columns that you want show |
+|`landingTaskId`| { string } | | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
+|`sort`| { string } ||Define the sort of the processes. Possible values are : created-desc, created-asc, due-desc, due-asc |
+| `data` | { DataTableAdapter }| (optional)|JSON object that represent the number and the type of the columns that you want show 
 
 Example:
 

From f6eeb8e76a2d9ffeec3f7a34846030e528555952 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Mon, 8 May 2017 14:58:24 +0200
Subject: [PATCH 17/72] fix sourcemap (#1864)

---
 ng2-components/config/webpack.test.js | 28 +++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/ng2-components/config/webpack.test.js b/ng2-components/config/webpack.test.js
index 2863b12dae..3893598d18 100644
--- a/ng2-components/config/webpack.test.js
+++ b/ng2-components/config/webpack.test.js
@@ -5,11 +5,26 @@ const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 
 module.exports = {
 
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
     module: {
         rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
             {
                 test: /\.ts$/,
-                loaders: ['ts-loader', 'angular2-template-loader']
+                loaders: ['ts-loader', 'angular2-template-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
             {
                 test: /\.html$/,
@@ -27,7 +42,6 @@ module.exports = {
                 query: {
                     name: '[path][name].[ext]',
                     outputPath: (url)=> {
-                        console.log
                         return url.replace('src', 'dist');
                     }
                 }
@@ -45,14 +59,6 @@ module.exports = {
         ]
     },
 
-    resolve: {
-        extensions: ['.ts', '.js'],
-        symlinks: false,
-        modules: [
-            '../ng2-components', 'node_modules'
-        ]
-    },
-
     plugins: [
         new webpack.NoEmitOnErrorsPlugin(),
 
@@ -76,8 +82,6 @@ module.exports = {
 
     ],
 
-    devtool: 'inline-source-map',
-
     node: {
         fs: 'empty',
         module: false

From c07d12261fe79977f8935b47adbd78c4270dbb1d Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Mon, 8 May 2017 14:31:58 +0100
Subject: [PATCH 18/72] vs code config fixes

---
 .vscode/settings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1f73ef2cd7..bc3c11c1fb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,7 +6,7 @@
         "**/.hg": true,
         "**/.DS_Store": true,
         "**/*.js": { "when": "$(basename).ts"},
-        "**/*.js.map": { "when": "$(basename)"},
+        "**/*.js.map": { "when": "$(basename).ts"},
         "**/*.d.ts": { "when": "$(basename).ts"},
         "**/coverage": true
     },

From 5ba1202292de664b75b1953bcdfb3105c8f19881 Mon Sep 17 00:00:00 2001
From: Maurizio Vitale <maurizio.vitale@alfresco.com>
Date: Tue, 9 May 2017 10:38:37 +0200
Subject: [PATCH 19/72] Do not reload the tasks when the taskId and currentTask
 are the same (#1856)

---
 .../activiti-tasklist.component.spec.ts       | 48 +++++++++++++++++++
 .../components/activiti-tasklist.component.ts | 11 ++++-
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
index bd23fd4db9..f708eeb65c 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
@@ -272,6 +272,54 @@ describe('ActivitiTaskList', () => {
             );
         });
 
+        it('should NOT reload the tasks if the loadingTaskId is the same of the current task', () => {
+            spyOn(component, 'reload').and.stub();
+            component.currentInstanceId = '999';
+
+            component.data = new ObjectDataTableAdapter(
+                [
+                    {id: '999', name: 'Fake-name'}
+                ],
+                [
+                    {type: 'text', key: 'id', title: 'Id'},
+                    {type: 'text', key: 'name', title: 'Name'}
+                ]
+            );
+
+            const landingTaskId = '999';
+            let change = new SimpleChange(null, landingTaskId);
+
+            component.ngOnChanges({'landingTaskId': change});
+            expect(component.reload).not.toHaveBeenCalled();
+            expect(component.data.getRows().length).toEqual(1);
+        });
+
+        it('should reload the tasks if the loadingTaskId is different from the current task', (done) => {
+            component.currentInstanceId = '999';
+
+            component.data = new ObjectDataTableAdapter(
+                [
+                    {id: '999', name: 'Fake-name'}
+                ],
+                [
+                    {type: 'text', key: 'id', title: 'Id'},
+                    {type: 'text', key: 'name', title: 'Name'}
+                ]
+            );
+
+            const landingTaskId = '888';
+            let change = new SimpleChange(null, landingTaskId);
+
+            component.onSuccess.subscribe((res) => {
+                expect(res).toBeDefined();
+                expect(component.data).toBeDefined();
+                expect(component.data.getRows().length).toEqual(2);
+                done();
+            });
+
+            component.ngOnChanges({'landingTaskId': change});
+        });
+
         it('should NOT reload the process list when no parameters changed', () => {
             expect(component.isListEmpty()).toBeTruthy();
             component.ngOnChanges({});
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 888a66e577..c97565afd2 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
@@ -166,7 +166,7 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
             changed = true;
         } else if (assignment && assignment.currentValue) {
             changed = true;
-        } else if (landingTaskId && landingTaskId.currentValue) {
+        } else if (landingTaskId && landingTaskId.currentValue && !this.isEqualToCurrentId(landingTaskId.currentValue)) {
             changed = true;
         }
         return changed;
@@ -247,6 +247,15 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
         return this.currentInstanceId;
     }
 
+    /**
+     * Check if the taskId is the same of the selected task
+     * @param taskId
+     * @returns {boolean}
+     */
+    isEqualToCurrentId(taskId: string) {
+        return this.currentInstanceId === taskId ? true : false;
+    }
+
     /**
      * Check if the list is empty
      * @returns {ObjectDataTableAdapter|boolean}

From e29741d18ddd26810a6013f15ebb21d227c04ccc Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Tue, 9 May 2017 09:45:11 +0100
Subject: [PATCH 20/72] [ADF-587] upgrade components to angular 4 (#1866)

[ADF-587]  upgrade components to angular 4
---
 demo-shell-ng2/config/webpack.common.js       |  2 +-
 demo-shell-ng2/package.json                   | 22 ++++++++-------
 .../ng2-activiti-analytics/package.json       | 19 +++++++------
 ...lytics-report-parameters.component.spec.ts | 24 ++++++++--------
 .../ng2-activiti-diagrams/package.json        | 19 +++++++------
 ng2-components/ng2-activiti-form/package.json | 19 +++++++------
 .../activiti-content.component.spec.ts        |  6 ++--
 .../activiti-form.component.spec.ts           |  8 +++---
 .../activiti-start-form.component.spec.ts     | 10 +++----
 .../ng2-activiti-processlist/package.json     | 17 +++++------
 .../activiti-filters.component.spec.ts        | 14 +++++-----
 ...ctiviti-process-comments.component.spec.ts | 10 +++----
 ...process-instance-details.component.spec.ts |  8 +++---
 ...i-process-instance-tasks.component.spec.ts |  4 +--
 ...ocess-instance-variables.component.spec.ts |  4 +--
 .../activiti-processlist.component.spec.ts    | 12 ++++----
 .../activiti-start-process.component.spec.ts  | 22 +++++++--------
 .../ng2-activiti-tasklist/package.json        | 17 +++++------
 .../activiti-checklist.component.spec.ts      |  4 +--
 .../activiti-comments.component.spec.ts       | 10 +++----
 .../activiti-filters.component.spec.ts        | 16 +++++------
 .../activiti-task-details.component.spec.ts   |  4 +--
 .../activiti-tasklist.component.spec.ts       | 28 +++++++++----------
 ng2-components/ng2-alfresco-core/index.ts     |  3 ++
 ng2-components/ng2-alfresco-core/package.json | 21 +++++++-------
 .../alfresco-translate-loader.spec.ts         |  2 +-
 .../alfresco-translation.service.spec.ts      |  2 +-
 .../src/services/notification.service.spec.ts |  6 +++-
 .../ng2-alfresco-datatable/package.json       | 17 +++++------
 .../datatable/datatable.component.spec.ts     |  2 +-
 .../pagination/pagination.component.spec.ts   |  2 +-
 .../ng2-alfresco-documentlist/package.json    | 17 +++++------
 .../document-list.component.spec.ts           |  4 +--
 .../document-menu-action.component.spec.ts    | 10 +++----
 .../ng2-alfresco-login/package.json           | 17 +++++------
 .../ng2-alfresco-search/package.json          | 17 +++++------
 .../alfresco-search.component.spec.ts         |  2 +-
 .../ng2-alfresco-social/package.json          | 17 +++++------
 ng2-components/ng2-alfresco-tag/package.json  | 17 +++++------
 .../ng2-alfresco-upload/package.json          | 17 +++++------
 .../upload-button.component.spec.ts           | 12 ++++----
 .../ng2-alfresco-userinfo/package.json        | 17 +++++------
 .../ng2-alfresco-viewer/package.json          | 17 +++++------
 .../components/imgViewer.component.spec.ts    |  4 +--
 .../components/mediaPlayer.component.spec.ts  |  4 +--
 .../extension-viewer.directive.spec.ts        |  4 ++-
 .../ng2-alfresco-webscript/package.json       | 17 +++++------
 ng2-components/package.json                   | 20 ++++++-------
 48 files changed, 297 insertions(+), 270 deletions(-)

diff --git a/demo-shell-ng2/config/webpack.common.js b/demo-shell-ng2/config/webpack.common.js
index 03cfd6fd61..823be9bd44 100644
--- a/demo-shell-ng2/config/webpack.common.js
+++ b/demo-shell-ng2/config/webpack.common.js
@@ -113,7 +113,7 @@ module.exports = {
         // Workaround for angular/angular#11580
         new webpack.ContextReplacementPlugin(
             // The (\\|\/) piece accounts for path separators in *nix and Windows
-            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+            /angular(\\|\/)core(\\|\/)@angular/,
             helpers.root('./app'), // location of your src
             {} // a map of your routes
         ),
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index c1f7effc54..9ed42bc018 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -49,20 +49,22 @@
     "alfresco"
   ],
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+    "@angular/compiler-cli": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.4.7",
-    "@angular/platform-browser-dynamic": "2.4.7",
-    "@angular/router": "3.4.7",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.9",
     "rxjs": "5.1.0",
-    "zone.js": "0.7.6",
+    "zone.js": "0.8.4",
 
     "dialog-polyfill": "^0.4.7",
     "material-design-icons": "2.2.3",
diff --git a/ng2-components/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json
index 5280d011ab..1602b740e2 100644
--- a/ng2-components/ng2-activiti-analytics/package.json
+++ b/ng2-components/ng2-activiti-analytics/package.json
@@ -33,15 +33,16 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
@@ -56,7 +57,7 @@
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.7.6"
+    "zone.js": "0.8.4"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
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 64405ad4e8..3b6deed822 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
@@ -108,7 +108,7 @@ describe('AnalyticsReportParametersComponent', () => {
             });
 
             let reportId = 1;
-            let change = new SimpleChange(null, reportId);
+            let change = new SimpleChange(null, reportId, true);
             component.ngOnChanges({ 'reportId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -128,7 +128,7 @@ describe('AnalyticsReportParametersComponent', () => {
             });
 
             let reportId = 1;
-            let change = new SimpleChange(null, reportId);
+            let change = new SimpleChange(null, reportId, true);
             component.ngOnChanges({ 'reportId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -155,7 +155,7 @@ describe('AnalyticsReportParametersComponent', () => {
             });
 
             let reportId = 1;
-            let change = new SimpleChange(null, reportId);
+            let change = new SimpleChange(null, reportId, true);
             component.ngOnChanges({ 'reportId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -216,7 +216,7 @@ describe('AnalyticsReportParametersComponent', () => {
             });
 
             let reportId = 1;
-            let change = new SimpleChange(null, reportId);
+            let change = new SimpleChange(null, reportId, true);
             component.ngOnChanges({ 'reportId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -241,7 +241,7 @@ describe('AnalyticsReportParametersComponent', () => {
             });
 
             let reportId = 1;
-            let change = new SimpleChange(null, reportId);
+            let change = new SimpleChange(null, reportId, true);
             component.ngOnChanges({ 'reportId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -266,7 +266,7 @@ describe('AnalyticsReportParametersComponent', () => {
             });
 
             let reportId = 1;
-            let change = new SimpleChange(null, reportId);
+            let change = new SimpleChange(null, reportId, true);
             component.ngOnChanges({ 'reportId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -304,7 +304,7 @@ describe('AnalyticsReportParametersComponent', () => {
             });
 
             let reportId = 1;
-            let change = new SimpleChange(null, reportId);
+            let change = new SimpleChange(null, reportId, true);
             component.ngOnChanges({ 'reportId': change });
 
         });
@@ -338,7 +338,7 @@ describe('AnalyticsReportParametersComponent', () => {
 
             component.appId = appId;
             component.reportId = '1';
-            let change = new SimpleChange(null, appId);
+            let change = new SimpleChange(null, appId, true);
             component.ngOnChanges({ 'appId': change });
 
         });
@@ -351,7 +351,7 @@ describe('AnalyticsReportParametersComponent', () => {
             });
 
             let reportId = 1;
-            let change = new SimpleChange(null, reportId);
+            let change = new SimpleChange(null, reportId, true);
             component.ngOnChanges({ 'reportId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -401,7 +401,7 @@ describe('AnalyticsReportParametersComponent', () => {
             });
 
             let reportId = 1;
-            let change = new SimpleChange(null, reportId);
+            let change = new SimpleChange(null, reportId, true);
             component.ngOnChanges({ 'reportId': change });
 
         });
@@ -413,7 +413,7 @@ describe('AnalyticsReportParametersComponent', () => {
             });
 
             let reportId = 1;
-            let change = new SimpleChange(null, reportId);
+            let change = new SimpleChange(null, reportId, true);
             component.ngOnChanges({ 'reportId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -459,7 +459,7 @@ describe('AnalyticsReportParametersComponent', () => {
 
             beforeEach(async(() => {
                 let reportId = 1;
-                let change = new SimpleChange(null, reportId);
+                let change = new SimpleChange(null, reportId, true);
                 component.ngOnChanges({ 'reportId': change });
                 fixture.detectChanges();
                 jasmine.Ajax.requests.mostRecent().respondWith({
diff --git a/ng2-components/ng2-activiti-diagrams/package.json b/ng2-components/ng2-activiti-diagrams/package.json
index ca1ff45c3b..2e3fa1eaf7 100644
--- a/ng2-components/ng2-activiti-diagrams/package.json
+++ b/ng2-components/ng2-activiti-diagrams/package.json
@@ -29,15 +29,16 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
@@ -47,7 +48,7 @@
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.7.6"
+    "zone.js": "0.8.4"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
diff --git a/ng2-components/ng2-activiti-form/package.json b/ng2-components/ng2-activiti-form/package.json
index f2391890cc..6238621ad6 100644
--- a/ng2-components/ng2-activiti-form/package.json
+++ b/ng2-components/ng2-activiti-form/package.json
@@ -36,15 +36,16 @@
     "activiti"
   ],
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
@@ -55,7 +56,7 @@
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.7.6"
+    "zone.js": "0.8.4"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-content.component.spec.ts b/ng2-components/ng2-activiti-form/src/components/activiti-content.component.spec.ts
index eacf17f8ef..d21a744747 100644
--- a/ng2-components/ng2-activiti-form/src/components/activiti-content.component.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/activiti-content.component.spec.ts
@@ -137,7 +137,7 @@ describe('ActivitiContent', () => {
             });
 
             let contentId = 1;
-            let change = new SimpleChange(null, contentId);
+            let change = new SimpleChange(null, contentId, true);
             component.ngOnChanges({ 'id': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -180,7 +180,7 @@ describe('ActivitiContent', () => {
             });
 
             let contentId = 1;
-            let change = new SimpleChange(null, contentId);
+            let change = new SimpleChange(null, contentId, true);
             component.ngOnChanges({'id': change});
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -208,7 +208,7 @@ describe('ActivitiContent', () => {
         it('should show unsupported preview with unsupported file', (done) => {
 
             let contentId = 1;
-            let change = new SimpleChange(null, contentId);
+            let change = new SimpleChange(null, contentId, true);
             component.ngOnChanges({'id': change});
 
             component.contentLoaded.subscribe((res) => {
diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.spec.ts b/ng2-components/ng2-activiti-form/src/components/activiti-form.component.spec.ts
index 7108d15d30..31f008e29f 100644
--- a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/activiti-form.component.spec.ts
@@ -258,7 +258,7 @@ describe('ActivitiForm', () => {
         spyOn(formComponent, 'getFormByTaskId').and.stub();
         const taskId = '<task id>';
 
-        let change = new SimpleChange(null, taskId);
+        let change = new SimpleChange(null, taskId, true);
         formComponent.ngOnChanges({'taskId': change});
 
         expect(formComponent.getFormByTaskId).toHaveBeenCalledWith(taskId);
@@ -268,7 +268,7 @@ describe('ActivitiForm', () => {
         spyOn(formComponent, 'getFormDefinitionByFormId').and.stub();
         const formId = '123';
 
-        let change = new SimpleChange(null, formId);
+        let change = new SimpleChange(null, formId, true);
         formComponent.ngOnChanges({'formId': change});
 
         expect(formComponent.getFormDefinitionByFormId).toHaveBeenCalledWith(formId);
@@ -278,7 +278,7 @@ describe('ActivitiForm', () => {
         spyOn(formComponent, 'getFormDefinitionByFormName').and.stub();
         const formName = '<form>';
 
-        let change = new SimpleChange(null, formName);
+        let change = new SimpleChange(null, formName, true);
         formComponent.ngOnChanges({'formName': change});
 
         expect(formComponent.getFormDefinitionByFormName).toHaveBeenCalledWith(formName);
@@ -304,7 +304,7 @@ describe('ActivitiForm', () => {
         spyOn(formComponent, 'getFormDefinitionByFormId').and.stub();
         spyOn(formComponent, 'getFormDefinitionByFormName').and.stub();
 
-        formComponent.ngOnChanges({'tag': new SimpleChange(null, 'hello world')});
+        formComponent.ngOnChanges({'tag': new SimpleChange(null, 'hello world', true)});
 
         expect(formComponent.getFormByTaskId).not.toHaveBeenCalled();
         expect(formComponent.getFormDefinitionByFormId).not.toHaveBeenCalled();
diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.spec.ts b/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.spec.ts
index 0b1f6ad44b..7036dcd298 100644
--- a/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.spec.ts
@@ -77,19 +77,19 @@ describe('ActivitiStartForm', () => {
 
     it('should load start form on change if processDefinitionId defined', () => {
         component.processDefinitionId = exampleId1;
-        component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2) });
+        component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
         expect(formService.getStartFormDefinition).toHaveBeenCalled();
     });
 
     it('should load start form when processDefinitionId changed', () => {
         component.processDefinitionId = exampleId1;
-        component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2) });
+        component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
         expect(formService.getStartFormDefinition).toHaveBeenCalled();
     });
 
     it('should not load start form when changes notified but no change to processDefinitionId', () => {
         component.processDefinitionId = exampleId1;
-        component.ngOnChanges({ otherProp: new SimpleChange(exampleId1, exampleId2) });
+        component.ngOnChanges({ otherProp: new SimpleChange(exampleId1, exampleId2, true) });
         expect(formService.getStartFormDefinition).not.toHaveBeenCalled();
     });
 
@@ -110,7 +110,7 @@ describe('ActivitiStartForm', () => {
         }));
         component.processDefinitionId = exampleId1;
         component.ngOnInit();
-        component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2) });
+        component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
         fixture.detectChanges();
         expect(component.outcomesContainer).toBeTruthy();
     });
@@ -126,7 +126,7 @@ describe('ActivitiStartForm', () => {
         }));
         component.processDefinitionId = exampleId1;
         component.showOutcomeButtons = true;
-        component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2) });
+        component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
         fixture.detectChanges();
         expect(component.outcomesContainer).toBeTruthy();
     });
diff --git a/ng2-components/ng2-activiti-processlist/package.json b/ng2-components/ng2-activiti-processlist/package.json
index 0c2ebcb793..ffe4c2cc59 100644
--- a/ng2-components/ng2-activiti-processlist/package.json
+++ b/ng2-components/ng2-activiti-processlist/package.json
@@ -35,15 +35,16 @@
     "alfresco"
   ],
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.spec.ts
index 6b58843749..8a63ebb574 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.spec.ts
@@ -53,7 +53,7 @@ describe('ActivitiFilters', () => {
     it('should return the filter task list', (done) => {
         spyOn(activitiService, 'getProcessFilters').and.returnValue(Observable.fromPromise(fakeGlobalFilterPromise));
         const appId = '1';
-        let change = new SimpleChange(null, appId);
+        let change = new SimpleChange(null, appId, true);
         filterList.ngOnChanges({ 'appId': change });
 
         filterList.onSuccess.subscribe((res) => {
@@ -77,7 +77,7 @@ describe('ActivitiFilters', () => {
         spyOn(activitiService, 'getDeployedApplications').and.returnValue(Observable.fromPromise(fakeDeployedApplicationsPromise));
         spyOn(activitiService, 'getProcessFilters').and.returnValue(Observable.fromPromise(fakeGlobalFilterPromise));
 
-        let change = new SimpleChange(null, 'test');
+        let change = new SimpleChange(null, 'test', true);
         filterList.ngOnChanges({ 'appName': change });
 
         filterList.onSuccess.subscribe((res) => {
@@ -94,7 +94,7 @@ describe('ActivitiFilters', () => {
         spyOn(activitiService, 'getProcessFilters').and.returnValue(Observable.fromPromise(fakeErrorFilterPromise));
 
         const appId = '1';
-        let change = new SimpleChange(null, appId);
+        let change = new SimpleChange(null, appId, true);
         filterList.ngOnChanges({ 'appId': change });
 
         filterList.onError.subscribe((err) => {
@@ -109,7 +109,7 @@ describe('ActivitiFilters', () => {
         spyOn(activitiService, 'getDeployedApplications').and.returnValue(Observable.fromPromise(fakeErrorFilterPromise));
 
         const appId = 'fake-app';
-        let change = new SimpleChange(null, appId);
+        let change = new SimpleChange(null, appId, true);
         filterList.ngOnChanges({ 'appName': change });
 
         filterList.onError.subscribe((err) => {
@@ -137,7 +137,7 @@ describe('ActivitiFilters', () => {
         spyOn(filterList, 'getFiltersByAppId').and.stub();
         const appId = '1';
 
-        let change = new SimpleChange(null, appId);
+        let change = new SimpleChange(null, appId, true);
         filterList.ngOnChanges({ 'appId': change });
 
         expect(filterList.getFiltersByAppId).toHaveBeenCalledWith(appId);
@@ -147,7 +147,7 @@ describe('ActivitiFilters', () => {
         spyOn(filterList, 'getFiltersByAppId').and.stub();
         const appId = null;
 
-        let change = new SimpleChange(null, appId);
+        let change = new SimpleChange(null, appId, true);
         filterList.ngOnChanges({ 'appId': change });
 
         expect(filterList.getFiltersByAppId).toHaveBeenCalledWith(appId);
@@ -157,7 +157,7 @@ describe('ActivitiFilters', () => {
         spyOn(filterList, 'getFiltersByAppName').and.stub();
         const appName = 'fake-app-name';
 
-        let change = new SimpleChange(null, appName);
+        let change = new SimpleChange(null, appName, true);
         filterList.ngOnChanges({ 'appName': change });
 
         expect(filterList.getFiltersByAppName).toHaveBeenCalledWith(appName);
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.spec.ts
index c1bd2a1b35..e046f149ae 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.spec.ts
@@ -75,7 +75,7 @@ describe('ActivitiProcessInstanceComments', () => {
     });
 
     it('should load comments when processInstanceId specified', () => {
-        let change = new SimpleChange(null, '123');
+        let change = new SimpleChange(null, '123', true);
         component.ngOnChanges({ 'processInstanceId': change });
         expect(getCommentsSpy).toHaveBeenCalled();
     });
@@ -83,7 +83,7 @@ describe('ActivitiProcessInstanceComments', () => {
     it('should emit an error when an error occurs loading comments', () => {
         let emitSpy = spyOn(component.error, 'emit');
         getCommentsSpy.and.returnValue(Observable.throw({}));
-        let change = new SimpleChange(null, '123');
+        let change = new SimpleChange(null, '123', true);
         component.ngOnChanges({ 'processInstanceId': change });
         expect(emitSpy).toHaveBeenCalled();
     });
@@ -94,7 +94,7 @@ describe('ActivitiProcessInstanceComments', () => {
     });
 
     it('should display comments when the process has comments', async(() => {
-        let change = new SimpleChange(null, '123');
+        let change = new SimpleChange(null, '123', true);
         component.ngOnChanges({ 'processInstanceId': change });
 
         fixture.whenStable().then(() => {
@@ -115,8 +115,8 @@ describe('ActivitiProcessInstanceComments', () => {
 
     describe('change detection', () => {
 
-        let change = new SimpleChange('123', '456');
-        let nullChange = new SimpleChange('123', null);
+        let change = new SimpleChange('123', '456', true);
+        let nullChange = new SimpleChange('123', null, true);
 
         beforeEach(async(() => {
             component.processInstanceId = '123';
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.spec.ts
index f7e3016d46..095a029ac8 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.spec.ts
@@ -85,7 +85,7 @@ describe('ActivitiProcessInstanceDetails', () => {
 
     it('should display a header when the processInstanceId is provided', async(() => {
         fixture.detectChanges();
-        component.ngOnChanges({ 'processInstanceId': new SimpleChange(null, '123') });
+        component.ngOnChanges({ 'processInstanceId': new SimpleChange(null, '123', true) });
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             let headerEl: DebugElement = fixture.debugElement.query(By.css('h2'));
@@ -97,7 +97,7 @@ describe('ActivitiProcessInstanceDetails', () => {
     it('should display default details when the process instance has no name', async(() => {
         getProcessSpy = getProcessSpy.and.returnValue(Observable.of(exampleProcessNoName));
         fixture.detectChanges();
-        component.ngOnChanges({ 'processInstanceId': new SimpleChange(null, '123') });
+        component.ngOnChanges({ 'processInstanceId': new SimpleChange(null, '123', true) });
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             let headerEl: DebugElement = fixture.debugElement.query(By.css('h2'));
@@ -108,8 +108,8 @@ describe('ActivitiProcessInstanceDetails', () => {
 
     describe('change detection', () => {
 
-        let change = new SimpleChange('123', '456');
-        let nullChange = new SimpleChange('123', null);
+        let change = new SimpleChange('123', '456', true);
+        let nullChange = new SimpleChange('123', null, true);
 
         beforeEach(async(() => {
             component.processInstanceId = '123';
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-tasks.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-tasks.component.spec.ts
index 8b1109340d..6616612d67 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-tasks.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-tasks.component.spec.ts
@@ -104,7 +104,7 @@ describe('ActivitiProcessInstanceTasks', () => {
     });
 
     it('should display active tasks', () => {
-        let change = new SimpleChange(null, exampleProcessInstance);
+        let change = new SimpleChange(null, exampleProcessInstance, true);
         fixture.detectChanges();
         component.ngOnChanges({ 'processInstanceDetails': change });
         fixture.whenStable().then(() => {
@@ -117,7 +117,7 @@ describe('ActivitiProcessInstanceTasks', () => {
     });
 
     it('should display completed tasks', () => {
-        let change = new SimpleChange(null, exampleProcessInstance);
+        let change = new SimpleChange(null, exampleProcessInstance, true);
         fixture.detectChanges();
         component.ngOnChanges({ 'processInstanceDetails': change });
         fixture.whenStable().then(() => {
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.spec.ts
index f41d16a74d..9f1d6a6471 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.spec.ts
@@ -145,8 +145,8 @@ describe('ActivitiProcessInstanceVariables', () => {
 
     describe('change detection', () => {
 
-        let change = new SimpleChange('123', '456');
-        let nullChange = new SimpleChange('123', null);
+        let change = new SimpleChange('123', '456', true);
+        let nullChange = new SimpleChange('123', null, true);
 
         beforeEach(async(() => {
             component.processInstanceId = '123';
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts
index 5510b66320..5876a6c41b 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts
@@ -295,7 +295,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
 
         it('should reload the list when the appId parameter changes', (done) => {
             const appId = '1';
-            let change = new SimpleChange(null, appId);
+            let change = new SimpleChange(null, appId, true);
 
             component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();
@@ -311,7 +311,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
 
         it('should reload the list when the processDefinitionKey parameter changes', (done) => {
             const processDefinitionKey = 'fakeprocess';
-            let change = new SimpleChange(null, processDefinitionKey);
+            let change = new SimpleChange(null, processDefinitionKey, true);
 
             component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();
@@ -327,7 +327,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
 
         it('should reload the list when the state parameter changes', (done) => {
             const state = 'open';
-            let change = new SimpleChange(null, state);
+            let change = new SimpleChange(null, state, true);
 
             component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();
@@ -343,7 +343,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
 
         it('should reload the list when the sort parameter changes', (done) => {
             const sort = 'created-desc';
-            let change = new SimpleChange(null, sort);
+            let change = new SimpleChange(null, sort, true);
 
             component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();
@@ -359,7 +359,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
 
         it('should sort the list when the sort parameter changes', (done) => {
             const sort = 'created-asc';
-            let change = new SimpleChange(null, sort);
+            let change = new SimpleChange(null, sort, true);
             let sortSpy = spyOn(component.data, 'setSorting');
 
             component.onSuccess.subscribe((res) => {
@@ -374,7 +374,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
 
         it('should reload the process list when the name parameter changes', (done) => {
             const name = 'FakeTaskName';
-            let change = new SimpleChange(null, name);
+            let change = new SimpleChange(null, name, true);
 
             component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.spec.ts
index c9a8558bc5..a91546cca7 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.spec.ts
@@ -78,7 +78,7 @@ describe('ActivitiStartProcessInstance', () => {
     describe('process definitions list', () => {
 
         it('should call service to fetch process definitions', () => {
-            let change = new SimpleChange(null, '123');
+            let change = new SimpleChange(null, '123', true);
             component.ngOnChanges({ 'appId': change });
             fixture.detectChanges();
 
@@ -86,7 +86,7 @@ describe('ActivitiStartProcessInstance', () => {
         });
 
         it('should call service to fetch process definitions with appId when provided', () => {
-            let change = new SimpleChange(null, '123');
+            let change = new SimpleChange(null, '123', true);
             component.ngOnChanges({ 'appId': change });
             fixture.detectChanges();
 
@@ -94,7 +94,7 @@ describe('ActivitiStartProcessInstance', () => {
         });
 
         it('should display the correct number of processes in the select list', () => {
-            let change = new SimpleChange(null, '123');
+            let change = new SimpleChange(null, '123', true);
             component.ngOnChanges({ 'appId': change });
             fixture.detectChanges();
 
@@ -103,7 +103,7 @@ describe('ActivitiStartProcessInstance', () => {
         });
 
         it('should display the correct process def details', async(() => {
-            let change = new SimpleChange(null, '123');
+            let change = new SimpleChange(null, '123', true);
             component.ngOnChanges({ 'appId': change });
             fixture.detectChanges();
 
@@ -116,7 +116,7 @@ describe('ActivitiStartProcessInstance', () => {
 
         it('should indicate an error to the user if process defs cannot be loaded', async(() => {
             getDefinitionsSpy = getDefinitionsSpy.and.returnValue(Observable.throw({}));
-            let change = new SimpleChange(null, '123');
+            let change = new SimpleChange(null, '123', true);
             component.ngOnChanges({ 'appId': change });
             fixture.detectChanges();
 
@@ -129,7 +129,7 @@ describe('ActivitiStartProcessInstance', () => {
 
         it('should show no process available message when no process definition is loaded', async(() => {
             getDefinitionsSpy = getDefinitionsSpy.and.returnValue(Observable.of([]));
-            let change = new SimpleChange(null, '123');
+            let change = new SimpleChange(null, '123', true);
             component.ngOnChanges({ 'appId': change });
             fixture.detectChanges();
 
@@ -144,8 +144,8 @@ describe('ActivitiStartProcessInstance', () => {
 
     describe('input changes', () => {
 
-        let change = new SimpleChange('123', '456');
-        let nullChange = new SimpleChange('123', null);
+        let change = new SimpleChange('123', '456', true);
+        let nullChange = new SimpleChange('123', null, true);
 
         beforeEach(async(() => {
             component.appId = '123';
@@ -177,7 +177,7 @@ describe('ActivitiStartProcessInstance', () => {
 
         beforeEach(() => {
             component.name = 'My new process';
-            let change = new SimpleChange(null, '123');
+            let change = new SimpleChange(null, '123', true);
             component.ngOnChanges({ 'appId': change });
         });
 
@@ -247,7 +247,7 @@ describe('ActivitiStartProcessInstance', () => {
 
             beforeEach(async(() => {
                 component.name = 'My new process';
-                let change = new SimpleChange(null, '123');
+                let change = new SimpleChange(null, '123', true);
                 component.ngOnChanges({ 'appId': change });
                 fixture.detectChanges();
                 component.onProcessDefChange('my:process1');
@@ -279,7 +279,7 @@ describe('ActivitiStartProcessInstance', () => {
 
             beforeEach(() => {
                 getDefinitionsSpy.and.returnValue(Observable.of(fakeProcessDefWithForm));
-                let change = new SimpleChange(null, '123');
+                let change = new SimpleChange(null, '123', true);
                 component.ngOnChanges({ 'appId': change });
                 component.onProcessDefChange('my:process1');
                 fixture.detectChanges();
diff --git a/ng2-components/ng2-activiti-tasklist/package.json b/ng2-components/ng2-activiti-tasklist/package.json
index e84b13e3ab..f723e8f4db 100644
--- a/ng2-components/ng2-activiti-tasklist/package.json
+++ b/ng2-components/ng2-activiti-tasklist/package.json
@@ -40,15 +40,16 @@
     "alfresco"
   ],
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-checklist.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-checklist.component.spec.ts
index a1b4d5f9d6..619b22b092 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-checklist.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-checklist.component.spec.ts
@@ -180,7 +180,7 @@ describe('ActivitiChecklist', () => {
             checklistComponent.taskId = 'new-fake-task-id';
             checklistComponent.checklist.push(fakeTaskDetail);
             fixture.detectChanges();
-            let change = new SimpleChange(null, 'new-fake-task-id');
+            let change = new SimpleChange(null, 'new-fake-task-id', true);
             checklistComponent.ngOnChanges({
                 taskId: change
             });
@@ -201,7 +201,7 @@ describe('ActivitiChecklist', () => {
             checklistComponent.checklist.push(fakeTaskDetail);
             fixture.detectChanges();
             checklistComponent.taskId = null;
-            let change = new SimpleChange(null, 'new-fake-task-id');
+            let change = new SimpleChange(null, 'new-fake-task-id', true);
             checklistComponent.ngOnChanges({
                 taskId: change
             });
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.spec.ts
index 18fe3371a2..bbbc8cd908 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.spec.ts
@@ -74,7 +74,7 @@ describe('ActivitiComments', () => {
     });
 
     it('should load comments when taskId specified', () => {
-        let change = new SimpleChange(null, '123');
+        let change = new SimpleChange(null, '123', true);
         component.ngOnChanges({ 'taskId': change });
 
         expect(getCommentsSpy).toHaveBeenCalled();
@@ -84,7 +84,7 @@ describe('ActivitiComments', () => {
         let emitSpy = spyOn(component.error, 'emit');
         getCommentsSpy.and.returnValue(Observable.throw({}));
 
-        let change = new SimpleChange(null, '123');
+        let change = new SimpleChange(null, '123', true);
         component.ngOnChanges({ 'taskId': change });
 
         expect(emitSpy).toHaveBeenCalled();
@@ -96,7 +96,7 @@ describe('ActivitiComments', () => {
     });
 
     it('should display comments when the task has comments', async(() => {
-        let change = new SimpleChange(null, '123');
+        let change = new SimpleChange(null, '123', true);
         component.ngOnChanges({ 'taskId': change });
 
         fixture.whenStable().then(() => {
@@ -117,8 +117,8 @@ describe('ActivitiComments', () => {
 
     describe('change detection', () => {
 
-        let change = new SimpleChange('123', '456');
-        let nullChange = new SimpleChange('123', null);
+        let change = new SimpleChange('123', '456', true);
+        let nullChange = new SimpleChange('123', null, true);
 
         beforeEach(async(() => {
             component.taskId = '123';
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.spec.ts
index b7cc0f7c4a..34090ae886 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.spec.ts
@@ -64,7 +64,7 @@ describe('ActivitiFilters', () => {
     it('should return the filter task list', (done) => {
         spyOn(activitiService, 'getTaskListFilters').and.returnValue(Observable.fromPromise(fakeGlobalFilterPromise));
         const appId = '1';
-        let change = new SimpleChange(null, appId);
+        let change = new SimpleChange(null, appId, true);
         filterList.ngOnChanges({ 'appId': change });
 
         filterList.onSuccess.subscribe((res) => {
@@ -88,7 +88,7 @@ describe('ActivitiFilters', () => {
         spyOn(activitiService, 'getDeployedApplications').and.returnValue(Observable.fromPromise(fakeDeployedApplicationsPromise));
         spyOn(activitiService, 'getTaskListFilters').and.returnValue(Observable.fromPromise(fakeGlobalFilterPromise));
 
-        let change = new SimpleChange(null, 'test');
+        let change = new SimpleChange(null, 'test', true);
         filterList.ngOnChanges({ 'appName': change });
 
         filterList.onSuccess.subscribe((res) => {
@@ -105,7 +105,7 @@ describe('ActivitiFilters', () => {
         spyOn(activitiService, 'getTaskListFilters').and.returnValue(Observable.fromPromise(fakeErrorFilterPromise));
 
         const appId = '1';
-        let change = new SimpleChange(null, appId);
+        let change = new SimpleChange(null, appId, true);
         filterList.ngOnChanges({ 'appId': change });
 
         filterList.onError.subscribe((err) => {
@@ -120,7 +120,7 @@ describe('ActivitiFilters', () => {
         spyOn(activitiService, 'getDeployedApplications').and.returnValue(Observable.fromPromise(fakeErrorFilterPromise));
 
         const appId = 'fake-app';
-        let change = new SimpleChange(null, appId);
+        let change = new SimpleChange(null, appId, true);
         filterList.ngOnChanges({ 'appName': change });
 
         filterList.onError.subscribe((err) => {
@@ -148,7 +148,7 @@ describe('ActivitiFilters', () => {
         spyOn(filterList, 'getFiltersByAppId').and.stub();
         const appId = '1';
 
-        let change = new SimpleChange(null, appId);
+        let change = new SimpleChange(null, appId, true);
         filterList.ngOnChanges({ 'appId': change });
 
         expect(filterList.getFiltersByAppId).toHaveBeenCalledWith(appId);
@@ -158,7 +158,7 @@ describe('ActivitiFilters', () => {
         spyOn(filterList, 'getFiltersByAppId').and.stub();
         const appId = null;
 
-        let change = new SimpleChange(null, appId);
+        let change = new SimpleChange(null, appId, true);
         filterList.ngOnChanges({ 'appId': change });
 
         expect(filterList.getFiltersByAppId).toHaveBeenCalledWith(appId);
@@ -168,7 +168,7 @@ describe('ActivitiFilters', () => {
         spyOn(filterList, 'getFiltersByAppName').and.stub();
         const appName = 'fake-app-name';
 
-        let change = new SimpleChange(null, appName);
+        let change = new SimpleChange(null, appName, true);
         filterList.ngOnChanges({ 'appName': change });
 
         expect(filterList.getFiltersByAppName).toHaveBeenCalledWith(appName);
@@ -187,7 +187,7 @@ describe('ActivitiFilters', () => {
     it('should load Default list when no appid or taskid are provided', () => {
         spyOn(filterList, 'getFiltersByAppId').and.stub();
 
-        let change = new SimpleChange(null, null);
+        let change = new SimpleChange(null, null, true);
         filterList.ngOnChanges({ 'appName': change });
 
         expect(filterList.getFiltersByAppId).toHaveBeenCalled();
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.spec.ts
index 3b039cd52a..0f1f85d8b0 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.spec.ts
@@ -120,8 +120,8 @@ describe('ActivitiTaskDetails', () => {
 
     describe('change detection', () => {
 
-        let change = new SimpleChange('123', '456');
-        let nullChange = new SimpleChange('123', null);
+        let change = new SimpleChange('123', '456', true);
+        let nullChange = new SimpleChange('123', null, true);
 
         beforeEach(async(() => {
             component.taskId = '123';
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
index f708eeb65c..f8e9227407 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
@@ -145,9 +145,9 @@ describe('ActivitiTaskList', () => {
         spyOn(taskListService, 'getTotalTasks').and.returnValue(Observable.of(fakeGlobalTotalTasks));
         spyOn(taskListService, 'getTasks').and.returnValue(Observable.of(fakeGlobalTask));
 
-        let state = new SimpleChange(null, 'open');
-        let processDefinitionKey = new SimpleChange(null, null);
-        let assignment = new SimpleChange(null, 'fake-assignee');
+        let state = new SimpleChange(null, 'open', true);
+        let processDefinitionKey = new SimpleChange(null, null, true);
+        let assignment = new SimpleChange(null, 'fake-assignee', true);
 
         component.onSuccess.subscribe((res) => {
             expect(res).toBeDefined();
@@ -186,9 +186,9 @@ describe('ActivitiTaskList', () => {
         spyOn(taskListService, 'getTotalTasks').and.returnValue(Observable.of(fakeGlobalTotalTasks));
         spyOn(taskListService, 'getTasks').and.returnValue(Observable.of(fakeGlobalTask));
 
-        let state = new SimpleChange(null, 'open');
-        let processDefinitionKey = new SimpleChange(null, 'fakeprocess');
-        let assignment = new SimpleChange(null, 'fake-assignee');
+        let state = new SimpleChange(null, 'open', true);
+        let processDefinitionKey = new SimpleChange(null, 'fakeprocess', true);
+        let assignment = new SimpleChange(null, 'fake-assignee', true);
 
         component.onSuccess.subscribe((res) => {
             expect(res).toBeDefined();
@@ -212,8 +212,8 @@ describe('ActivitiTaskList', () => {
     it('should throw an exception when the response is wrong', (done) => {
         spyOn(taskListService, 'getTotalTasks').and.returnValue(Observable.throw(fakeErrorTaskList));
 
-        let state = new SimpleChange(null, 'open');
-        let assignment = new SimpleChange(null, 'fake-assignee');
+        let state = new SimpleChange(null, 'open', true);
+        let assignment = new SimpleChange(null, 'fake-assignee', true);
 
         component.onError.subscribe((err) => {
             expect(err).toBeDefined();
@@ -328,7 +328,7 @@ describe('ActivitiTaskList', () => {
 
         it('should reload the list when the appId parameter changes', (done) => {
             const appId = '1';
-            let change = new SimpleChange(null, appId);
+            let change = new SimpleChange(null, appId, true);
 
             component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();
@@ -344,7 +344,7 @@ describe('ActivitiTaskList', () => {
 
         it('should reload the list when the processDefinitionKey parameter changes', (done) => {
             const processDefinitionKey = 'fakeprocess';
-            let change = new SimpleChange(null, processDefinitionKey);
+            let change = new SimpleChange(null, processDefinitionKey, true);
 
             component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();
@@ -360,7 +360,7 @@ describe('ActivitiTaskList', () => {
 
         it('should reload the list when the state parameter changes', (done) => {
             const state = 'open';
-            let change = new SimpleChange(null, state);
+            let change = new SimpleChange(null, state, true);
 
             component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();
@@ -376,7 +376,7 @@ describe('ActivitiTaskList', () => {
 
         it('should reload the list when the sort parameter changes', (done) => {
             const sort = 'desc';
-            let change = new SimpleChange(null, sort);
+            let change = new SimpleChange(null, sort, true);
 
             component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();
@@ -392,7 +392,7 @@ describe('ActivitiTaskList', () => {
 
         it('should reload the process list when the name parameter changes', (done) => {
             const name = 'FakeTaskName';
-            let change = new SimpleChange(null, name);
+            let change = new SimpleChange(null, name, true);
 
             component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();
@@ -408,7 +408,7 @@ describe('ActivitiTaskList', () => {
 
         it('should reload the list when the assignment parameter changes', (done) => {
             const assignment = 'assignee';
-            let change = new SimpleChange(null, assignment);
+            let change = new SimpleChange(null, assignment, true);
 
             component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();
diff --git a/ng2-components/ng2-alfresco-core/index.ts b/ng2-components/ng2-alfresco-core/index.ts
index c0d423dedd..7390836d3b 100644
--- a/ng2-components/ng2-alfresco-core/index.ts
+++ b/ng2-components/ng2-alfresco-core/index.ts
@@ -16,6 +16,7 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpModule, Http } from '@angular/http';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -86,6 +87,7 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         FormsModule,
         ReactiveFormsModule,
         HttpModule,
+        BrowserAnimationsModule,
         MaterialModule.forRoot(),
         TranslateModule.forRoot({
             provide: TranslateLoader,
@@ -105,6 +107,7 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         ...ALFRESCO_CORE_PROVIDERS
     ],
     exports: [
+        BrowserAnimationsModule,
         CommonModule,
         FormsModule,
         MaterialModule,
diff --git a/ng2-components/ng2-alfresco-core/package.json b/ng2-components/ng2-alfresco-core/package.json
index 660ed4d635..390c092c63 100644
--- a/ng2-components/ng2-alfresco-core/package.json
+++ b/ng2-components/ng2-alfresco-core/package.json
@@ -44,17 +44,18 @@
     "alfresco"
   ],
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+    "@angular/compiler-cli": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
diff --git a/ng2-components/ng2-alfresco-core/src/services/alfresco-translate-loader.spec.ts b/ng2-components/ng2-alfresco-core/src/services/alfresco-translate-loader.spec.ts
index 893970a224..9c5908bccf 100644
--- a/ng2-components/ng2-alfresco-core/src/services/alfresco-translate-loader.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/alfresco-translate-loader.spec.ts
@@ -33,7 +33,7 @@ const mockBackendResponse = (connection: MockConnection, response: string) => {
 
 describe('TranslateLoader', () => {
     let injector: Injector;
-    let backend: MockBackend;
+    let backend: any;
     let alfrescoTranslationService: AlfrescoTranslationService;
     let connection: MockConnection; // this will be set when a new connection is emitted from the backend.
     let customLoader;
diff --git a/ng2-components/ng2-alfresco-core/src/services/alfresco-translation.service.spec.ts b/ng2-components/ng2-alfresco-core/src/services/alfresco-translation.service.spec.ts
index 3217849255..859ee2e950 100644
--- a/ng2-components/ng2-alfresco-core/src/services/alfresco-translation.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/alfresco-translation.service.spec.ts
@@ -31,7 +31,7 @@ const mockBackendResponse = (connection: MockConnection, response: string) => {
 
 describe('AlfrescoTranslationService', () => {
     let injector: Injector;
-    let backend: MockBackend;
+    let backend: any;
     let alfrescoTranslationService: AlfrescoTranslationService;
     let connection: MockConnection; // this will be set when a new connection is emitted from the backend.
 
diff --git a/ng2-components/ng2-alfresco-core/src/services/notification.service.spec.ts b/ng2-components/ng2-alfresco-core/src/services/notification.service.spec.ts
index cad3b093a9..98eb8178e6 100644
--- a/ng2-components/ng2-alfresco-core/src/services/notification.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/notification.service.spec.ts
@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Component } from '@angular/core';
 import { NotificationService } from './notification.service';
 import { MdSnackBarModule } from '@angular/material';
@@ -24,7 +25,10 @@ describe('NotificationService', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [MdSnackBarModule.forRoot()],
+            imports: [
+                BrowserAnimationsModule,
+                MdSnackBarModule.forRoot()
+            ],
             declarations: [ComponentThatProvidesNotificationService],
             providers: [
                 NotificationService
diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json
index e23f93d849..90f17f4484 100644
--- a/ng2-components/ng2-alfresco-datatable/package.json
+++ b/ng2-components/ng2-alfresco-datatable/package.json
@@ -36,15 +36,16 @@
     "alfresco"
   ],
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
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 ed5ef52bb7..39265bf5f7 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
@@ -103,7 +103,7 @@ describe('DataTable', () => {
         let data = new ObjectDataTableAdapter([], []);
 
         expect(table.data).toBeUndefined();
-        table.ngOnChanges({'data': new SimpleChange('123', data)});
+        table.ngOnChanges({'data': new SimpleChange('123', data, true)});
         expect(table.data).toEqual(data);
     });
 
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination.component.spec.ts b/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination.component.spec.ts
index e69a226dcd..b774c76b99 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination.component.spec.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination.component.spec.ts
@@ -101,7 +101,7 @@ describe('PaginationComponent', () => {
     it('should update the summary on input pagination parameter change', () => {
         spyOn(paginationComponent, 'updateSummary');
 
-        paginationComponent.ngOnChanges({pagination: new SimpleChange(null, new PaginationData(0, 0, 0, 20, true))});
+        paginationComponent.ngOnChanges({pagination: new SimpleChange(null, new PaginationData(0, 0, 0, 20, true), true)});
 
         expect(paginationComponent.updateSummary).toHaveBeenCalled();
     });
diff --git a/ng2-components/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json
index 67f040d9fb..e4152094da 100644
--- a/ng2-components/ng2-alfresco-documentlist/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/package.json
@@ -44,15 +44,16 @@
     "alfresco"
   ],
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
index aa8c89ddaa..1506e14dc5 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
@@ -460,7 +460,7 @@ describe('DocumentList', () => {
         });
 
         documentList.currentFolderId = 'wrong-id';
-        documentList.ngOnChanges({currentFolderId: new SimpleChange(null, documentList.currentFolderId)});
+        documentList.ngOnChanges({currentFolderId: new SimpleChange(null, documentList.currentFolderId, true)});
     });
 
     it('should require dataTable to check empty template', () => {
@@ -526,7 +526,7 @@ describe('DocumentList', () => {
     it('should load folder by ID on init', () => {
         documentList.currentFolderId = '1d26e465-dea3-42f3-b415-faa8364b9692';
         spyOn(documentList, 'loadFolderNodesByFolderNodeId').and.returnValue(Promise.resolve());
-        documentList.ngOnChanges({folderNode: new SimpleChange(null, documentList.currentFolderId)});
+        documentList.ngOnChanges({folderNode: new SimpleChange(null, documentList.currentFolderId, true)});
         expect(documentList.loadFolderNodesByFolderNodeId).toHaveBeenCalled();
     });
 });
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.spec.ts
index af4575649a..f2ced05574 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.spec.ts
@@ -176,7 +176,7 @@ describe('Document menu action', () => {
     describe('Check Permissions', () => {
 
         it('should get the folder permission when folderId is changed', async(() => {
-            let change = new SimpleChange('folder-id', 'new-folder-id');
+            let change = new SimpleChange('folder-id', 'new-folder-id', true);
             component.ngOnChanges({ 'folderId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -196,7 +196,7 @@ describe('Document menu action', () => {
         }));
 
         it('should disable the create button if folder does not have any allowable operations', async(() => {
-            let change = new SimpleChange('folder-id', 'new-folder-id');
+            let change = new SimpleChange('folder-id', 'new-folder-id', true);
             component.ngOnChanges({ 'folderId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -214,7 +214,7 @@ describe('Document menu action', () => {
         }));
 
         it('should disable the create button if folder does not have create permission', async(() => {
-            let change = new SimpleChange('folder-id', 'new-folder-id');
+            let change = new SimpleChange('folder-id', 'new-folder-id', true);
             component.ngOnChanges({ 'folderId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -233,7 +233,7 @@ describe('Document menu action', () => {
 
         it('should not disable the option when disableWithNoPermission is false', async(() => {
             component.disableWithNoPermission = false;
-            let change = new SimpleChange('folder-id', 'new-folder-id');
+            let change = new SimpleChange('folder-id', 'new-folder-id', true);
             component.ngOnChanges({ 'folderId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
@@ -251,7 +251,7 @@ describe('Document menu action', () => {
         }));
 
         it('should emit permission event error when user does not have create permission', async(() => {
-            let change = new SimpleChange('folder-id', 'new-folder-id');
+            let change = new SimpleChange('folder-id', 'new-folder-id', true);
             component.ngOnChanges({ 'folderId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
diff --git a/ng2-components/ng2-alfresco-login/package.json b/ng2-components/ng2-alfresco-login/package.json
index 315c91b373..bd57a3d986 100644
--- a/ng2-components/ng2-alfresco-login/package.json
+++ b/ng2-components/ng2-alfresco-login/package.json
@@ -48,15 +48,16 @@
     "alfresco"
   ],
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
diff --git a/ng2-components/ng2-alfresco-search/package.json b/ng2-components/ng2-alfresco-search/package.json
index f04b79b90f..65c7856605 100644
--- a/ng2-components/ng2-alfresco-search/package.json
+++ b/ng2-components/ng2-alfresco-search/package.json
@@ -44,15 +44,16 @@
     "alfresco"
   ],
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts
index f1cbc0845a..28674bccb5 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts
@@ -255,7 +255,7 @@ describe('AlfrescoSearchComponent', () => {
                 done();
             });
 
-            component.ngOnChanges({searchTerm: new SimpleChange('', 'searchTerm2')});
+            component.ngOnChanges({searchTerm: new SimpleChange('', 'searchTerm2', true)});
         });
     });
 
diff --git a/ng2-components/ng2-alfresco-social/package.json b/ng2-components/ng2-alfresco-social/package.json
index 4e1107e646..7a480c3150 100644
--- a/ng2-components/ng2-alfresco-social/package.json
+++ b/ng2-components/ng2-alfresco-social/package.json
@@ -23,15 +23,16 @@
     "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": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@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",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
diff --git a/ng2-components/ng2-alfresco-tag/package.json b/ng2-components/ng2-alfresco-tag/package.json
index 0627f12ab9..11767674e8 100644
--- a/ng2-components/ng2-alfresco-tag/package.json
+++ b/ng2-components/ng2-alfresco-tag/package.json
@@ -23,15 +23,16 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
diff --git a/ng2-components/ng2-alfresco-upload/package.json b/ng2-components/ng2-alfresco-upload/package.json
index 54e5acd17d..02172f7440 100644
--- a/ng2-components/ng2-alfresco-upload/package.json
+++ b/ng2-components/ng2-alfresco-upload/package.json
@@ -45,15 +45,16 @@
     "alfresco"
   ],
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts
index 717eab5a3a..4d8dd1fa00 100644
--- a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts
@@ -175,7 +175,7 @@ describe('UploadButtonComponent', () => {
 
         spyOn(uploadService, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
 
-        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId) });
+        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
         component.onFilesAdded(fakeEvent);
         let compiled = fixture.debugElement.nativeElement;
         fixture.detectChanges();
@@ -189,7 +189,7 @@ describe('UploadButtonComponent', () => {
 
         spyOn(uploadService, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
 
-        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId) });
+        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
         component.onFilesAdded(fakeEvent);
         let compiled = fixture.debugElement.nativeElement;
         fixture.detectChanges();
@@ -204,7 +204,7 @@ describe('UploadButtonComponent', () => {
 
         spyOn(uploadService, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
 
-        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId) });
+        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
         uploadService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue');
 
         fixture.detectChanges();
@@ -219,7 +219,7 @@ describe('UploadButtonComponent', () => {
         component.onSuccess = null;
 
         spyOn(uploadService, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
-        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId) });
+        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
 
         uploadService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue');
 
@@ -236,7 +236,7 @@ describe('UploadButtonComponent', () => {
         spyOn(uploadService, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
         spyOn(uploadService, 'callApiCreateFolder').and.returnValue(fakeResolvePromise);
 
-        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId) });
+        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
         fixture.detectChanges();
         component.onSuccess.subscribe(e => {
             expect(e.value).toEqual('File uploaded');
@@ -257,7 +257,7 @@ describe('UploadButtonComponent', () => {
         spyOn(uploadService, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
         spyOn(uploadService, 'callApiCreateFolder').and.returnValue(fakeRejectPromise);
 
-        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId) });
+        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
 
         component.onError.subscribe(e => {
             expect(e.value).toEqual('FILE_UPLOAD.MESSAGES.FOLDER_ALREADY_EXIST');
diff --git a/ng2-components/ng2-alfresco-userinfo/package.json b/ng2-components/ng2-alfresco-userinfo/package.json
index 1c60eac71b..b1e499cd0c 100644
--- a/ng2-components/ng2-alfresco-userinfo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/package.json
@@ -23,15 +23,16 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
diff --git a/ng2-components/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json
index 0be29b82a6..7c65f2ef8a 100644
--- a/ng2-components/ng2-alfresco-viewer/package.json
+++ b/ng2-components/ng2-alfresco-viewer/package.json
@@ -38,15 +38,16 @@
     "alfresco"
   ],
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.spec.ts
index 3458199c2f..a01c5e6c22 100644
--- a/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.spec.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.spec.ts
@@ -64,7 +64,7 @@ describe('Test ng2-alfresco-viewer Img viewer component ', () => {
     });
 
     it('If no url or blob are passed should thrown an error', () => {
-        let change = new SimpleChange(null, null);
+        let change = new SimpleChange(null, null, true);
         expect(() => {
             component.ngOnChanges({ 'blobFile': change });
         }).toThrow(new Error('Attribute urlFile or blobFile is required'));
@@ -87,7 +87,7 @@ describe('Test ng2-alfresco-viewer Img viewer component ', () => {
         let blob = createFakeBlob();
 
         spyOn(service, 'createTrustedUrl').and.returnValue('fake-blob-url');
-        let change = new SimpleChange(null, blob);
+        let change = new SimpleChange(null, blob, true);
         expect(() => {
             component.ngOnChanges({ 'blobFile': change });
         }).not.toThrow(new Error('Attribute urlFile or blobFile is required'));
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.spec.ts
index 097721afbb..a263a443d3 100644
--- a/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.spec.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.spec.ts
@@ -65,7 +65,7 @@ describe('Test ng2-alfresco-viewer Media player component ', () => {
     });
 
     it('If no url or no blob are passed should thrown an error', () => {
-        let change = new SimpleChange(null, null);
+        let change = new SimpleChange(null, null, true);
         expect(() => {
             component.ngOnChanges({ 'blobFile': change });
         }).toThrow(new Error('Attribute urlFile or blobFile is required'));
@@ -89,7 +89,7 @@ describe('Test ng2-alfresco-viewer Media player component ', () => {
         let blob = createFakeBlob();
 
         spyOn(service, 'createTrustedUrl').and.returnValue('fake-blob-url');
-        let change = new SimpleChange(null, blob);
+        let change = new SimpleChange(null, blob, true);
         expect(() => {
             component.ngOnChanges({ 'blobFile': change });
         }).not.toThrow(new Error('Attribute urlFile or blobFile is required'));
diff --git a/ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.spec.ts b/ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.spec.ts
index 16435e3e6d..1db1f375c7 100644
--- a/ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.spec.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.spec.ts
@@ -23,7 +23,9 @@ import { getTestBed, TestBed, async } from '@angular/core/testing';
 import { Injector } from '@angular/core';
 
 export class MockElementRef extends ElementRef {
-
+    constructor() {
+        super(null);
+    }
 }
 
 describe('ExtensionViewerComponent', () => {
diff --git a/ng2-components/ng2-alfresco-webscript/package.json b/ng2-components/ng2-alfresco-webscript/package.json
index 151de41440..a64b4dacac 100644
--- a/ng2-components/ng2-alfresco-webscript/package.json
+++ b/ng2-components/ng2-alfresco-webscript/package.json
@@ -23,15 +23,16 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@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/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@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",
diff --git a/ng2-components/package.json b/ng2-components/package.json
index 3cc78df23e..45359eaf9c 100644
--- a/ng2-components/package.json
+++ b/ng2-components/package.json
@@ -54,17 +54,17 @@
     "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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+    "@angular/compiler-cli": "~4.0.0",
     "@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",

From 664565a42ad38c6051062d30af9cd3732cf82091 Mon Sep 17 00:00:00 2001
From: Vito <vito.albano@alfresco.com>
Date: Tue, 9 May 2017 03:00:26 -0700
Subject: [PATCH 21/72] fixed test for pipeline to match new angular4 changes
 on simple change (#1868)

---
 .../src/components/activiti-tasklist.component.spec.ts        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
index f8e9227407..c3de3f5871 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
@@ -287,7 +287,7 @@ describe('ActivitiTaskList', () => {
             );
 
             const landingTaskId = '999';
-            let change = new SimpleChange(null, landingTaskId);
+            let change = new SimpleChange(null, landingTaskId, true);
 
             component.ngOnChanges({'landingTaskId': change});
             expect(component.reload).not.toHaveBeenCalled();
@@ -308,7 +308,7 @@ describe('ActivitiTaskList', () => {
             );
 
             const landingTaskId = '888';
-            let change = new SimpleChange(null, landingTaskId);
+            let change = new SimpleChange(null, landingTaskId, true);
 
             component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();

From 22bbffdb2162cb3ed670c5797dad7a54e0ac3d27 Mon Sep 17 00:00:00 2001
From: Infad Kachancheri <infad.k@muraai.com>
Date: Tue, 9 May 2017 18:10:17 +0530
Subject: [PATCH 22/72] [DW-50]: New features for accordion-group component
 (#1851)

[ADF-557] -  Add a new property called showIcon as input to hide/show filter icons.
---
 .../accordion-group.component.html            | 12 +++--
 .../accordion-group.component.spec.ts         | 51 ++++++++++++++++---
 .../collapsable/accordion-group.component.ts  | 16 +++++-
 3 files changed, 66 insertions(+), 13 deletions(-)

diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html
index 87a52e8b52..f73c292a5e 100644
--- a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html
@@ -1,15 +1,17 @@
 <div class="adf-panel adf-panel-default" [ngClass]="{'adf-panel-open': isOpen}">
     <div class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}">
-        <div *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
-            <i class="material-icons">{{headingIcon}}</i>
+        <div (click)="onHeadingClick()">
+            <div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
+                <i class="material-icons">{{headingIcon}}</i>
+            </div>
+            <div id="heading-text" class="adf-panel-heading-text">{{heading}}</div>
         </div>
-        <div class="adf-panel-heading-text">{{heading}}</div>
-        <div id="accordion-button" class="adf-panel-heading-toggle" (click)="toggleOpen($event)">
+        <div id="accordion-button" *ngIf="!isGroupContentEmpty()" class="adf-panel-heading-toggle" (click)="toggleOpen($event)">
             <i class="material-icons">{{getAccordionIcon()}}</i>
         </div>
     </div>
     <div class="adf-panel-collapse" [hidden]="!isOpen">
-        <div class="adf-panel-body">
+        <div class="adf-panel-body" #contentWrapper>
             <ng-content></ng-content>
         </div>
     </div>
diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts
index 125d87f737..baa8de6154 100644
--- a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts
@@ -45,14 +45,15 @@ describe('AccordionGroupComponent', () => {
     it('should be closed by default', () => {
         component.heading = 'Fake Header';
         component.headingIcon = 'fake-icon';
+        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            let headerToggle = fixture.nativeElement.querySelector('.adf-panel-heading-toggle .material-icons');
-            expect(headerToggle.innerText).toEqual('expand_more');
-            let headerText = fixture.nativeElement.querySelector('.adf-panel-heading-text');
+            let headerText = element.querySelector('#heading-text');
             expect(headerText.innerText).toEqual('Fake Header');
-            let headerIcon = fixture.nativeElement.querySelector('.adf-panel-heading-icon .material-icons');
+            let headerIcon = element.querySelector('#heading-icon .material-icons');
             expect(headerIcon.innerText).toEqual('fake-icon');
+            let headerToggle = element.querySelector('#accordion-button .material-icons');
+            expect(headerToggle.innerText).toEqual('expand_more');
         });
     });
 
@@ -60,17 +61,53 @@ describe('AccordionGroupComponent', () => {
         component.isSelected = true;
         component.heading = 'Fake Header';
         component.headingIcon = 'fake-icon';
+        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
         fixture.detectChanges();
         element.querySelector('#accordion-button').click();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            let headerText = fixture.nativeElement.querySelector('.adf-panel-heading-text');
+            let headerText = element.querySelector('#heading-text');
             expect(headerText.innerText).toEqual('Fake Header');
-            let headerIcon = fixture.nativeElement.querySelector('.adf-panel-heading-icon .material-icons');
+            let headerIcon = element.querySelector('#heading-icon .material-icons');
             expect(headerIcon.innerText).toEqual('fake-icon');
-            let headerToggle = fixture.nativeElement.querySelector('.adf-panel-heading-toggle .material-icons');
+            let headerToggle = element.querySelector('#accordion-button .material-icons');
             expect(headerToggle.innerText).toEqual('expand_less');
         });
     });
 
+    it('should hide expand icon by default', () => {
+        component.heading = 'Fake Header';
+        component.headingIcon = 'fake-icon';
+        component.contentWrapper.nativeElement.innerHTML = '';
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let headerIcon = element.querySelector('#accordion-button');
+            expect(headerIcon).toBeNull();
+        });
+    });
+
+    it('should show expand icon by default', () => {
+        component.heading = 'Fake Header';
+        component.headingIcon = 'fake-icon';
+        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let headerIcon = element.querySelector('#accordion-button');
+            expect(headerIcon).toBeDefined();
+        });
+    });
+
+    it('should emit an event when a heading clicked', (done) => {
+        component.heading = 'Fake Header';
+        fixture.detectChanges();
+        let heading: string = component.heading;
+        component.headingClick.subscribe((headName: string) => {
+            expect(headName).toBeDefined();
+            expect(headName).toEqual(heading);
+            done();
+        });
+
+        component.onHeadingClick();
+    });
+
 });
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 56995042ca..3bad20fda4 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
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, Output, EventEmitter, ViewChild } from '@angular/core';
 import { AccordionComponent } from './accordion.component';
 
 @Component({
@@ -28,12 +28,18 @@ export class AccordionGroupComponent implements OnDestroy {
     private _isOpen: boolean = false;
     private _isSelected: boolean = false;
 
+    @ViewChild('contentWrapper')
+    contentWrapper: any;
+
     @Input()
     heading: string;
 
     @Input()
     headingIcon: string;
 
+    @Output()
+    headingClick: EventEmitter<any> = new EventEmitter<any>();
+
     @Input()
     set isOpen(value: boolean) {
         this._isOpen = value;
@@ -75,4 +81,12 @@ export class AccordionGroupComponent implements OnDestroy {
     getAccordionIcon(): string {
         return this.isOpen ? 'expand_less' : 'expand_more';
     }
+
+    onHeadingClick() {
+        this.headingClick.emit(this.heading);
+    }
+
+    isGroupContentEmpty() {
+        return this.contentWrapper.nativeElement.innerHTML.trim().length === 0;
+    }
 }

From e09d317d1e5b81e0156ab04550aa63971138acda Mon Sep 17 00:00:00 2001
From: Maurizio Vitale <maurizio.vitale@alfresco.com>
Date: Tue, 9 May 2017 15:46:58 +0200
Subject: [PATCH 23/72] [ADF-242] Select the first in the list when the report
 is deleted (#1862)

* ADF-242 Select the first in the list when the report is deleted

* Update README.md
---
 .../components/activiti/activiti-demo.component.html  |  1 +
 .../components/activiti/activiti-demo.component.ts    |  9 ++-------
 ng2-components/ng2-activiti-analytics/README.md       |  8 +++++---
 .../src/components/analytics-report-list.component.ts | 11 +++++++++++
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
index 9599799d10..1280bc92eb 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
@@ -149,6 +149,7 @@
                         <hr>
                         <analytics-report-list
                             [appId]="appId"
+                            [selectFirst]="selectFirstReport"
                             (reportClick)="onReportClick($event)"
                             #analyticsreportlist>
                         </analytics-report-list>
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
index e74a6390d2..ff2b792bc2 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
@@ -79,6 +79,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
     appId: number = null;
 
     fileShowed: boolean = false;
+    selectFirstReport: boolean = false;
 
     content: Blob;
     contentName: string;
@@ -213,14 +214,8 @@ export class ActivitiDemoComponent implements AfterViewInit {
     }
 
     onReportDeleted() {
+        this.selectFirstReport = true;
         this.analyticsreportlist.reload();
-        this.selectFirstElementInReportList();
-    }
-
-    selectFirstElementInReportList() {
-        if (!this.analyticsreportlist.isReportsEmpty()) {
-            this.analyticsreportlist.selectReport(this.analyticsreportlist.reports[0]);
-        }
     }
 
     navigateStartProcess() {
diff --git a/ng2-components/ng2-activiti-analytics/README.md b/ng2-components/ng2-activiti-analytics/README.md
index b29f2e6ffc..9bd99044bc 100644
--- a/ng2-components/ng2-activiti-analytics/README.md
+++ b/ng2-components/ng2-activiti-analytics/README.md
@@ -178,9 +178,11 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 
 #### Options
 
-| Name | Type | Required | Description |
-| --- | --- | --- | --- |
-| `layoutType` | {string} | required | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value|
+| Name | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `appId` | {string} | optional | | The application id |
+| `layoutType` | {string} | required | | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value|
+| `selectFirst` | {boolean} | optional | false | Change the value to true if you want select the first item in the list as default|
 
 ## Basic usage example Activiti Analytics
 
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 b6d7b4014b..7b726035ec 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
@@ -37,6 +37,9 @@ export class AnalyticsReportListComponent implements  OnInit {
     @Input()
     appId: string;
 
+    @Input()
+    selectFirst: boolean = false;
+
     @Output()
     reportClick: EventEmitter<ReportParametersModel> = new EventEmitter<ReportParametersModel>();
 
@@ -90,6 +93,9 @@ export class AnalyticsReportListComponent implements  OnInit {
                     res.forEach((report) => {
                         this.reportObserver.next(report);
                     });
+                    if (this.selectFirst) {
+                        this.selectFirstReport();
+                    }
                     this.onSuccess.emit(res);
                 }
             },
@@ -143,6 +149,11 @@ export class AnalyticsReportListComponent implements  OnInit {
         this.reportClick.emit(report);
     }
 
+    selectFirstReport() {
+        this.selectReport(this.reports[0]);
+        this.selectFirst = false;
+    }
+
     isSelected(report: any) {
         return this.currentReport === report ? true : false;
     }

From bac2a45d18792ff5db07b38d1d6f1a2dc663f7b5 Mon Sep 17 00:00:00 2001
From: Infad Kachancheri <infad.k@muraai.com>
Date: Tue, 9 May 2017 23:00:53 +0530
Subject: [PATCH 24/72] [ADF- 556] Analytics Service - Add a new method to get
 the report details by name (#1869)

* added service to get report details by report name

* analytics service tslit fix#1

* added test cases for getReportList and getReportByName
---
 .../src/assets/analytics.service.mock.ts      | 28 ++++++
 .../src/services/analytics.service.spec.ts    | 91 +++++++++++++++++++
 .../src/services/analytics.service.ts         | 12 +++
 3 files changed, 131 insertions(+)
 create mode 100644 ng2-components/ng2-activiti-analytics/src/assets/analytics.service.mock.ts
 create mode 100644 ng2-components/ng2-activiti-analytics/src/services/analytics.service.spec.ts

diff --git a/ng2-components/ng2-activiti-analytics/src/assets/analytics.service.mock.ts b/ng2-components/ng2-activiti-analytics/src/assets/analytics.service.mock.ts
new file mode 100644
index 0000000000..574a81d38f
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/src/assets/analytics.service.mock.ts
@@ -0,0 +1,28 @@
+/*!
+ * @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.
+ */
+
+export let fakeReportList = [
+    {
+        id: '1',
+        name: 'Fake Report 1'
+    },
+    {
+        id: '2',
+        name: 'Fake Report 2'
+    }
+];
+
diff --git a/ng2-components/ng2-activiti-analytics/src/services/analytics.service.spec.ts b/ng2-components/ng2-activiti-analytics/src/services/analytics.service.spec.ts
new file mode 100644
index 0000000000..793d41c555
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/src/services/analytics.service.spec.ts
@@ -0,0 +1,91 @@
+/*!
+ * @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.
+ */
+
+import { ReflectiveInjector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { async } from '@angular/core/testing';
+import { CoreModule, AlfrescoApiService, LogService } from 'ng2-alfresco-core';
+import { ReportParametersModel, ParameterValueModel } from '../models/report.model';
+import { AnalyticsService } from './analytics.service';
+import { fakeReportList } from '../assets/analytics.service.mock';
+
+declare let jasmine: any;
+
+describe('Activiti Analytics Service', () => {
+
+    let service: AnalyticsService;
+    let apiService: AlfrescoApiService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot()
+            ],
+            providers: [
+                AnalyticsService
+            ]
+        });
+        service = TestBed.get(AnalyticsService);
+        apiService = TestBed.get(AlfrescoApiService);
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+    });
+
+    afterEach(() => {
+        jasmine.Ajax.uninstall();
+    });
+
+    describe('Content tests', () => {
+
+        it('should return the report list by appId', (done) => {
+            service.getReportList('1').subscribe(
+                (reportList) => {
+                    expect(reportList).toBeDefined();
+                    expect(reportList.length).toEqual(2);
+                    expect(reportList[0].name).toEqual('Fake Report 1');
+                    expect(reportList[1].name).toEqual('Fake Report 2');
+                    done();
+                }
+            );
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                'status': 200,
+                contentType: 'application/json',
+                responseText: JSON.stringify(fakeReportList)
+            });
+        });
+
+        it('should return the report by report name', (done) => {
+            service.getReportByName('Fake Report 2').subscribe(
+                (report) => {
+                    expect(report).toBeDefined();
+                    expect(report).not.toBeNull();
+                    expect(report.id).toEqual(2);
+                    done();
+                }
+            );
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                'status': 200,
+                contentType: 'application/json',
+                responseText: JSON.stringify(fakeReportList)
+            });
+        });
+    });
+});
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 e0be6e33da..c5dcc7fdb4 100644
--- a/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts
+++ b/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts
@@ -55,6 +55,18 @@ export class AnalyticsService {
             }).catch(err => this.handleError(err));
     }
 
+    /**
+     * Retrive Report by name
+     * @param reportName - string - The name of report
+     * @returns {Observable<any>}
+     */
+    getReportByName(reportName: string): Observable<any> {
+        return Observable.fromPromise(this.apiService.getInstance().activiti.reportApi.getReportList())
+            .map((response: any) => {
+                return response.find(report => report.name === reportName);
+            }).catch(err => this.handleError(err));
+    }
+
     private isReportValid(appId: string, report: ReportParametersModel) {
         let isValid: boolean = true;
         if (appId && appId !== '0' && report.name.includes('Process definition overview')) {

From 3482cc57be9f1ef0128f929461c1a07c2e48cc99 Mon Sep 17 00:00:00 2001
From: Deepak Paul <deepak.paul@muraai.com>
Date: Wed, 10 May 2017 04:03:12 +0530
Subject: [PATCH 25/72] [ADF-402] Process Diagram Widget - Show the current
 process state (#1867)

* Fixes for activiti process diagram

Fix to show the current process state. ADF issue no ADF-402

* #ADF-402 fix to show process state and unit tests changes

* fixed test for pipeline to match new angular4 changes on simple change (#1868)

* [DW-50]: New features for accordion-group component (#1851)

[ADF-557] -  Add a new property called showIcon as input to hide/show filter icons.

* [ADF-242] Select the first in the list when the report is deleted (#1862)

* ADF-242 Select the first in the list when the report is deleted

* Update README.md

* Fixes for activiti process diagram

Fix to show the current process state. ADF issue no ADF-402

* #ADF-402 fix to show process state and unit tests changes

* #ADF-402 Removed error logging and modified documentation
---
 .../ng2-activiti-diagrams/README.md           |   11 +-
 .../src/assets/diagramActivities.mock.ts      |  352 ++
 .../src/assets/diagramBoundary.mock.ts        |  104 +
 .../src/assets/diagramEvents.mock.ts          |  179 +
 .../src/assets/diagramGateways.mock.ts        |   96 +
 .../src/assets/diagramIntermediate.mock.ts    |  106 +
 .../src/assets/diagramStructural.mock.ts      |   48 +
 .../src/assets/diagramThrow.mock.ts           |  104 +
 .../src/components/diagram.component.spec.ts  | 3692 +++++++++++++++++
 .../src/components/diagram.component.ts       |   27 +-
 .../raphael-multiline-text.component.ts       |    4 +
 .../src/models/diagram.model.ts               |    8 +
 .../src/services/diagrams.service.ts          |   11 +
 13 files changed, 4738 insertions(+), 4 deletions(-)

diff --git a/ng2-components/ng2-activiti-diagrams/README.md b/ng2-components/ng2-activiti-diagrams/README.md
index 10fc28ac0d..9447af36c4 100644
--- a/ng2-components/ng2-activiti-diagrams/README.md
+++ b/ng2-components/ng2-activiti-diagrams/README.md
@@ -104,7 +104,12 @@ Follow the 3 steps below:
 This component shows the diagram of a process.
 
 ```html
-<activiti-diagrams [processDefinitionId]="processDefinitionId"></activiti-diagrams>
+<activiti-diagram [processDefinitionId]="processDefinitionId"></activiti-diagram>
+```
+Or below component shows the diagram of a running process instance with the activities highlighted according to their state (Active/Completed/Pending).
+
+```html
+<activiti-diagram [processInstanceId]="processInstanceId"></activiti-diagram>
 ```
 
 Usage example of this component :
@@ -165,7 +170,9 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 
 | Name | Description |
 | --- | --- |
-| `metricPercentage` | The array that contains the percentage of the time for each element |
+| `metricPercentages` | The array that contains the percentage of the time for each element |
+| `metricColor` | The array that contains the color for each element |
+| `metricType` | The string that specifies the metric type |
 
 ## Build from sources
 
diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramActivities.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramActivities.mock.ts
index ec7a3b31aa..132ca46aaa 100644
--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramActivities.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramActivities.mock.ts
@@ -26,6 +26,32 @@ export let userTask = {
     properties: [{}]
 };
 
+export let userTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake User task',
+    type: 'UserTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
+export let userTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake User task',
+    type: 'UserTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
 export let manualTask = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     name: 'Fake Manual task',
@@ -37,6 +63,32 @@ export let manualTask = {
     properties: [{}]
 };
 
+export let manualTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Manual task',
+    type: 'ManualTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
+export let manualTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Manual task',
+    type: 'ManualTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
 export let serviceTask = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     name: 'Fake Service task',
@@ -48,6 +100,32 @@ export let serviceTask = {
     properties: [{}]
 };
 
+export let serviceTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Service task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
+export let serviceTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Service task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
 export let receiveTask = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     name: 'Fake Receive task',
@@ -59,6 +137,32 @@ export let receiveTask = {
     properties: [{}]
 };
 
+export let receiveTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Receive task',
+    type: 'ReceiveTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
+export let receiveTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Receive task',
+    type: 'ReceiveTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
 export let scriptTask = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     name: 'Fake Script task',
@@ -70,6 +174,32 @@ export let scriptTask = {
     properties: [{}]
 };
 
+export let scriptTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Script task',
+    type: 'ScriptTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
+export let scriptTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Script task',
+    type: 'ScriptTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
 export let businessRuleTask = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     name: 'Fake BusinessRule task',
@@ -81,6 +211,32 @@ export let businessRuleTask = {
     properties: [{}]
 };
 
+export let businessRuleTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake BusinessRule task',
+    type: 'BusinessRuleTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
+export let businessRuleTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake BusinessRule task',
+    type: 'BusinessRuleTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
 export let mailTask = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     name: 'Fake Mail task',
@@ -93,6 +249,34 @@ export let mailTask = {
     taskType: 'mail'
 };
 
+export let mailTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Mail task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'mail'
+};
+
+export let mailTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Mail task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'mail'
+};
+
 export let camelTask = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     name: 'Fake Camel task',
@@ -105,6 +289,34 @@ export let camelTask = {
     taskType: 'camel'
 };
 
+export let camelTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Camel task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'camel'
+};
+
+export let camelTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Camel task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'camel'
+};
+
 export let restCallTask = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     name: 'Fake Rest Call task',
@@ -117,6 +329,34 @@ export let restCallTask = {
     taskType: 'rest_call'
 };
 
+export let restCallTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Rest Call task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'rest_call'
+};
+
+export let restCallTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Rest Call task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'rest_call'
+};
+
 export let muleTask = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     name: 'Fake Mule task',
@@ -129,6 +369,34 @@ export let muleTask = {
     taskType: 'mule'
 };
 
+export let muleTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Mule task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'mule'
+};
+
+export let muleTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Mule task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'mule'
+};
+
 export let alfrescoPublishTask = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     name: 'Fake Alfresco Publish task',
@@ -141,6 +409,34 @@ export let alfrescoPublishTask = {
     taskType: 'alfresco_publish'
 };
 
+export let alfrescoPublishTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Alfresco Publish task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'alfresco_publish'
+};
+
+export let alfrescoPublishTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Alfresco Publish task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'alfresco_publish'
+};
+
 export let googleDrivePublishTask = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     name: 'Fake Google Drive Publish task',
@@ -153,6 +449,34 @@ export let googleDrivePublishTask = {
     taskType: 'google_drive_publish'
 };
 
+export let googleDrivePublishTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Google Drive Publish task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'google_drive_publish'
+};
+
+export let googleDrivePublishTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Google Drive Publish task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'google_drive_publish'
+};
+
 export let boxPublishTask = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     name: 'Fake Box Publish task',
@@ -164,3 +488,31 @@ export let boxPublishTask = {
     properties: [{}],
     taskType: 'box_publish'
 };
+
+export let boxPublishTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Box Publish task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'box_publish'
+};
+
+export let boxPublishTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Box Publish task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'box_publish'
+};
diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramBoundary.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramBoundary.mock.ts
index daaf33a467..7adb084c71 100644
--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramBoundary.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramBoundary.mock.ts
@@ -26,6 +26,32 @@ export let boundaryTimeEvent = {
     eventDefinition: {type: 'timer'}
 };
 
+export let boundaryTimeEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'timer'}
+};
+
+export let boundaryTimeEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'timer'}
+};
+
 export let boundaryErrorEvent = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     type: 'BoundaryEvent',
@@ -37,6 +63,32 @@ export let boundaryErrorEvent = {
     eventDefinition: {type: 'error'}
 };
 
+export let boundaryErrorEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'error'}
+};
+
+export let boundaryErrorEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'error'}
+};
+
 export let boundarySignalEvent = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     type: 'BoundaryEvent',
@@ -48,6 +100,32 @@ export let boundarySignalEvent = {
     eventDefinition: {type: 'signal'}
 };
 
+export let boundarySignalEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'signal'}
+};
+
+export let boundarySignalEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'signal'}
+};
+
 export let boundaryMessageEvent = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     type: 'BoundaryEvent',
@@ -58,3 +136,29 @@ export let boundaryMessageEvent = {
     properties: [{}],
     eventDefinition: {type: 'message'}
 };
+
+export let boundaryMessageEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'message'}
+};
+
+export let boundaryMessageEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'message'}
+};
diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramEvents.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramEvents.mock.ts
index 404208d178..99b4ac2a54 100644
--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramEvents.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramEvents.mock.ts
@@ -25,6 +25,30 @@ export let startEvent = {
     properties: [{}]
 };
 
+export let startEventActive = {
+    completed: false,
+    current: true,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    properties: [{}]
+};
+
+export let startEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    properties: [{}]
+};
+
 export let startTimeEvent = {
     id: 'startEvent1',
     type: 'StartEvent',
@@ -36,6 +60,32 @@ export let startTimeEvent = {
     properties: [{}]
 };
 
+export let startTimeEventActive = {
+    completed: false,
+    current: true,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'timer'},
+    properties: [{}]
+};
+
+export let startTimeEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'timer'},
+    properties: [{}]
+};
+
 export let startSignalEvent = {
     id: 'startEvent1',
     type: 'StartEvent',
@@ -47,6 +97,32 @@ export let startSignalEvent = {
     properties: [{}]
 };
 
+export let startSignalEventActive = {
+    completed: false,
+    current: true,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'signal'},
+    properties: [{}]
+};
+
+export let startSignalEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'signal'},
+    properties: [{}]
+};
+
 export let startMessageEvent = {
     id: 'startEvent1',
     type: 'StartEvent',
@@ -58,6 +134,32 @@ export let startMessageEvent = {
     properties: [{}]
 };
 
+export let startMessageEventActive = {
+    completed: false,
+    current: true,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'message'},
+    properties: [{}]
+};
+
+export let startMessageEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'message'},
+    properties: [{}]
+};
+
 export let startErrorEvent = {
     id: 'startEvent1',
     type: 'StartEvent',
@@ -69,6 +171,32 @@ export let startErrorEvent = {
     properties: [{}]
 };
 
+export let startErrorEventActive = {
+    completed: false,
+    current: true,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'error'},
+    properties: [{}]
+};
+
+export let startErrorEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'error'},
+    properties: [{}]
+};
+
 export let endEvent = {
     id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E',
     type: 'EndEvent',
@@ -79,6 +207,30 @@ export let endEvent = {
     properties: [{}]
 };
 
+export let endEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E',
+    type: 'EndEvent',
+    width: 28,
+    height: 28,
+    x: 15,
+    y: 48.5,
+    properties: [{}]
+};
+
+export let endEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E',
+    type: 'EndEvent',
+    width: 28,
+    height: 28,
+    x: 15,
+    y: 48.5,
+    properties: [{}]
+};
+
 export let endErrorEvent = {
     id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E',
     type: 'EndEvent',
@@ -89,3 +241,30 @@ export let endErrorEvent = {
     eventDefinition: {type: 'error'},
     properties: [{}]
 };
+
+
+export let endErrorEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E',
+    type: 'EndEvent',
+    width: 28,
+    height: 28,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'error'},
+    properties: [{}]
+};
+
+export let endErrorEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E',
+    type: 'EndEvent',
+    width: 28,
+    height: 28,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'error'},
+    properties: [{}]
+};
diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramGateways.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramGateways.mock.ts
index 85163c3d4f..381c471834 100644
--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramGateways.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramGateways.mock.ts
@@ -25,6 +25,30 @@ export let exclusiveGatway = {
     properties: [{}]
 };
 
+export let exclusiveGatwayActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ExclusiveGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
+export let exclusiveGatwayCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ExclusiveGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
 export let inclusiveGatway = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     type: 'InclusiveGateway',
@@ -35,6 +59,30 @@ export let inclusiveGatway = {
     properties: [{}]
 };
 
+export let inclusiveGatwayActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'InclusiveGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
+export let inclusiveGatwayCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'InclusiveGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
 export let parallelGatway = {
     id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC',
     type: 'ParallelGateway',
@@ -45,6 +93,30 @@ export let parallelGatway = {
     properties: [{}]
 };
 
+export let parallelGatwayActive = {
+    completed: false,
+    current: true,
+    id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC',
+    type: 'ParallelGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
+export let parallelGatwayCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC',
+    type: 'ParallelGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
 export let eventGatway = {
     id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC',
     type: 'EventGateway',
@@ -54,3 +126,27 @@ export let eventGatway = {
     y: 30,
     properties: [{}]
 };
+
+export let eventGatwayActive = {
+    completed: false,
+    current: true,
+    id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC',
+    type: 'EventGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
+export let eventGatwayCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC',
+    type: 'EventGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramIntermediate.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramIntermediate.mock.ts
index 600156fd01..11d5fe4413 100644
--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramIntermediate.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramIntermediate.mock.ts
@@ -26,6 +26,33 @@ export let intermediateCatchingTimeEvent = {
     eventDefinition: {type: 'timer'}
 };
 
+export let intermediateCatchingTimeEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'timer'}
+};
+
+export let intermediateCatchingTimeEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'timer'}
+};
+
+
 export let intermediateCatchingErrorEvent = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     type: 'IntermediateCatchEvent',
@@ -37,6 +64,32 @@ export let intermediateCatchingErrorEvent = {
     eventDefinition: {type: 'error'}
 };
 
+export let intermediateCatchingErrorEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'error'}
+};
+
+export let intermediateCatchingErrorEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'error'}
+};
+
 export let intermediateCatchingSignalEvent = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     type: 'IntermediateCatchEvent',
@@ -48,6 +101,33 @@ export let intermediateCatchingSignalEvent = {
     eventDefinition: {type: 'signal'}
 };
 
+export let intermediateCatchingSignalEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'signal'}
+};
+
+export let intermediateCatchingSignalEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'signal'}
+};
+
+
 export let intermediateCatchingMessageEvent = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     type: 'IntermediateCatchEvent',
@@ -58,3 +138,29 @@ export let intermediateCatchingMessageEvent = {
     properties: [{}],
     eventDefinition: {type: 'message'}
 };
+
+export let intermediateCatchingMessageEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'message'}
+};
+
+export let intermediateCatchingMessageEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'message'}
+};
diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramStructural.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramStructural.mock.ts
index 4dace0d7e3..398f3eee83 100644
--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramStructural.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramStructural.mock.ts
@@ -25,6 +25,30 @@ export let subProcess = {
     properties: [{}]
 };
 
+export let subProcessActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'SubProcess',
+    width: 300,
+    height: 200,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
+export let subProcessCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'SubProcess',
+    width: 300,
+    height: 200,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
 export let eventSubProcess = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     type: 'EventSubProcess',
@@ -34,3 +58,27 @@ export let eventSubProcess = {
     y: 30,
     properties: [{}]
 };
+
+export let eventSubProcessActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'EventSubProcess',
+    width: 300,
+    height: 200,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
+export let eventSubProcessCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'EventSubProcess',
+    width: 300,
+    height: 200,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramThrow.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramThrow.mock.ts
index f854de07f1..831a2a7deb 100644
--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramThrow.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramThrow.mock.ts
@@ -26,6 +26,32 @@ export let throwTimeEvent = {
     eventDefinition: {type: 'timer'}
 };
 
+export let throwTimeEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'timer'}
+};
+
+export let throwTimeEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'timer'}
+};
+
 export let throwErrorEvent = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     type: 'ThrowEvent',
@@ -37,6 +63,32 @@ export let throwErrorEvent = {
     eventDefinition: {type: 'error'}
 };
 
+export let throwErrorEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'error'}
+};
+
+export let throwErrorEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'error'}
+};
+
 export let throwSignalEvent = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     type: 'ThrowEvent',
@@ -48,6 +100,32 @@ export let throwSignalEvent = {
     eventDefinition: {type: 'signal'}
 };
 
+export let throwSignalEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'signal'}
+};
+
+export let throwSignalEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'signal'}
+};
+
 export let throwMessageEvent = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     type: 'ThrowEvent',
@@ -58,3 +136,29 @@ export let throwMessageEvent = {
     properties: [{}],
     eventDefinition: {type: 'message'}
 };
+
+export let throwMessageEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'message'}
+};
+
+export let throwMessageEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'message'}
+};
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts
index c46b8765f9..4c104a5b9c 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts
@@ -1395,4 +1395,3696 @@ describe('Test ng2-activiti-diagrams ', () => {
             });
         }));
     });
+
+    describe('Diagrams component Events with process instance id: ', () => {
+
+        beforeEach(() => {
+            jasmine.Ajax.install();
+            component.processInstanceId = '38399';
+            component.metricPercentages = {startEvent: 0};
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        it('Should render the Start Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Start Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Start Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Start Timer Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-timer > raphael-icon-timer');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startTimeEvent]};
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Start Timer Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-timer > raphael-icon-timer');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startTimeEventActive]};
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Start Timer Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-timer > raphael-icon-timer');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startTimeEventCompleted]};
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Start Signal Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-signal > raphael-icon-signal');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startSignalEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Start Signal Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-signal > raphael-icon-signal');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startSignalEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Start Signal Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-signal > raphael-icon-signal');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startSignalEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+
+        it('Should render the Start Message Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-message > raphael-icon-message');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startMessageEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Start Message Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-message > raphael-icon-message');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startMessageEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Start Message Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-message > raphael-icon-message');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startMessageEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Start Error Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startErrorEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Start Error Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startErrorEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Start Error Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.startErrorEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the End Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.endEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active End Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.endEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed End Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.endEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the End Error Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-end-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.endErrorEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active End Error Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-end-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.endErrorEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed End Error Event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-end-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsEventsMock.endErrorEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+    });
+
+    describe('Diagrams component Activities with process instance id: ', () => {
+        beforeEach(() => {
+            jasmine.Ajax.install();
+            component.processInstanceId = '38399';
+            component.metricPercentages = {startEvent: 0};
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        it('Should render the User Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-user-task > diagram-task > raphael-rect');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-user-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake User task');
+
+                    let iconTask: any = element.querySelector('diagram-user-task > diagram-icon-user-task > raphael-icon-user');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.userTask]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active User Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-user-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-user-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake User task');
+
+                    let iconTask: any = element.querySelector('diagram-user-task > diagram-icon-user-task > raphael-icon-user');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.userTaskActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed User Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-user-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-user-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake User task');
+
+                    let iconTask: any = element.querySelector('diagram-user-task > diagram-icon-user-task > raphael-icon-user');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.userTaskCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Manual Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-manual-task > diagram-task > raphael-rect');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-manual-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Manual task');
+
+                    let iconTask: any = element.querySelector('diagram-manual-task > diagram-icon-manual-task > raphael-icon-manual');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.manualTask]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Manual Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-manual-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-manual-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Manual task');
+
+                    let iconTask: any = element.querySelector('diagram-manual-task > diagram-icon-manual-task > raphael-icon-manual');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.manualTaskActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Manual Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-manual-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-manual-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Manual task');
+
+                    let iconTask: any = element.querySelector('diagram-manual-task > diagram-icon-manual-task > raphael-icon-manual');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.manualTaskCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Service Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-service-task > diagram-task > raphael-rect');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-service-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Service task');
+
+                    let iconTask: any = element.querySelector('diagram-service-task > diagram-icon-service-task > raphael-icon-service');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.serviceTask]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Service Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-service-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-service-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Service task');
+
+                    let iconTask: any = element.querySelector('diagram-service-task > diagram-icon-service-task > raphael-icon-service');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.serviceTaskActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Service Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-service-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-service-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Service task');
+
+                    let iconTask: any = element.querySelector('diagram-service-task > diagram-icon-service-task > raphael-icon-service');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.serviceTaskCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Service Mail Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(true).toBe(true);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.mailTask]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Service Camel Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-camel-task > diagram-task > raphael-rect');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-camel-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Camel task');
+
+                    let iconTask: any = element.querySelector('diagram-camel-task > diagram-icon-camel-task > raphael-icon-camel');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.camelTask]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Service Camel Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-camel-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-camel-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Camel task');
+
+                    let iconTask: any = element.querySelector('diagram-camel-task > diagram-icon-camel-task > raphael-icon-camel');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.camelTaskActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Service Camel Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-camel-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-camel-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Camel task');
+
+                    let iconTask: any = element.querySelector('diagram-camel-task > diagram-icon-camel-task > raphael-icon-camel');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.camelTaskCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Service Mule Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-mule-task > diagram-task > raphael-rect');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-mule-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Mule task');
+
+                    let iconTask: any = element.querySelector('diagram-mule-task > diagram-icon-mule-task > raphael-icon-mule');
+                    expect(iconTask).not.toBeNull();
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.muleTask]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Service Mule Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-mule-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-mule-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Mule task');
+
+                    let iconTask: any = element.querySelector('diagram-mule-task > diagram-icon-mule-task > raphael-icon-mule');
+                    expect(iconTask).not.toBeNull();
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.muleTaskActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Service Mule Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-mule-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-mule-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Mule task');
+
+                    let iconTask: any = element.querySelector('diagram-mule-task > diagram-icon-mule-task > raphael-icon-mule');
+                    expect(iconTask).not.toBeNull();
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.muleTaskCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Service Alfresco Publish Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-rect');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Alfresco Publish task');
+
+                    let iconTask: any = element.querySelector('diagram-alfresco-publish-task > diagram-icon-alfresco-publish-task >' +
+                        ' raphael-icon-alfresco-publish');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.alfrescoPublishTask]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Service Alfresco Publish Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Alfresco Publish task');
+
+                    let iconTask: any = element.querySelector('diagram-alfresco-publish-task > diagram-icon-alfresco-publish-task >' +
+                        ' raphael-icon-alfresco-publish');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.alfrescoPublishTaskActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Service Alfresco Publish Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Alfresco Publish task');
+
+                    let iconTask: any = element.querySelector('diagram-alfresco-publish-task > diagram-icon-alfresco-publish-task >' +
+                        ' raphael-icon-alfresco-publish');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.alfrescoPublishTaskCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Service Google Drive Publish Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-rect');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Google Drive Publish task');
+
+                    let iconTask: any = element.querySelector('diagram-google-drive-publish-task >' +
+                        ' diagram-icon-google-drive-publish-task > raphael-icon-google-drive-publish');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.googleDrivePublishTask]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Service Google Drive Publish Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Google Drive Publish task');
+
+                    let iconTask: any = element.querySelector('diagram-google-drive-publish-task >' +
+                        ' diagram-icon-google-drive-publish-task > raphael-icon-google-drive-publish');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.googleDrivePublishTaskActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Service Google Drive Publish Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Google Drive Publish task');
+
+                    let iconTask: any = element.querySelector('diagram-google-drive-publish-task >' +
+                        ' diagram-icon-google-drive-publish-task > raphael-icon-google-drive-publish');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.googleDrivePublishTaskCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Rest Call Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-rect');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Rest Call task');
+
+                    let iconTask: any = element.querySelector('diagram-rest-call-task > diagram-icon-rest-call-task >' +
+                        ' raphael-icon-rest-call');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.restCallTask]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Rest Call Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Rest Call task');
+
+                    let iconTask: any = element.querySelector('diagram-rest-call-task > diagram-icon-rest-call-task >' +
+                        ' raphael-icon-rest-call');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.restCallTaskActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Rest Call Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Rest Call task');
+
+                    let iconTask: any = element.querySelector('diagram-rest-call-task > diagram-icon-rest-call-task >' +
+                        ' raphael-icon-rest-call');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.restCallTaskCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Service Box Publish Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-rect');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Box Publish task');
+
+                    let iconTask: any = element.querySelector('diagram-box-publish-task >' +
+                        ' diagram-icon-box-publish-task > raphael-icon-box-publish');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.boxPublishTask]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Service Box Publish Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Box Publish task');
+
+                    let iconTask: any = element.querySelector('diagram-box-publish-task >' +
+                        ' diagram-icon-box-publish-task > raphael-icon-box-publish');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.boxPublishTaskActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Service Box Publish Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Box Publish task');
+
+                    let iconTask: any = element.querySelector('diagram-box-publish-task >' +
+                        ' diagram-icon-box-publish-task > raphael-icon-box-publish');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.boxPublishTaskCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Receive Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-receive-task > diagram-task > raphael-rect');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-receive-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Receive task');
+
+                    let iconTask: any = element.querySelector('diagram-receive-task > diagram-icon-receive-task > raphael-icon-receive');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.receiveTask]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Receive Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-receive-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-receive-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Receive task');
+
+                    let iconTask: any = element.querySelector('diagram-receive-task > diagram-icon-receive-task > raphael-icon-receive');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.receiveTaskActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Receive Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-receive-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-receive-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Receive task');
+
+                    let iconTask: any = element.querySelector('diagram-receive-task > diagram-icon-receive-task > raphael-icon-receive');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.receiveTaskCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Script Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-script-task > diagram-task > raphael-rect');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-script-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Script task');
+
+                    let iconTask: any = element.querySelector('diagram-script-task > diagram-icon-script-task > raphael-icon-script');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.scriptTask]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Script Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-script-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-script-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Script task');
+
+                    let iconTask: any = element.querySelector('diagram-script-task > diagram-icon-script-task > raphael-icon-script');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.scriptTaskActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Script Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-script-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-script-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake Script task');
+
+                    let iconTask: any = element.querySelector('diagram-script-task > diagram-icon-script-task > raphael-icon-script');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.scriptTaskCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Business Rule Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-rect');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake BusinessRule task');
+
+                    let iconTask: any = element.querySelector('diagram-business-rule-task > diagram-icon-business-rule-task > raphael-icon-business-rule');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.businessRuleTask]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Business Rule Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake BusinessRule task');
+
+                    let iconTask: any = element.querySelector('diagram-business-rule-task > diagram-icon-business-rule-task > raphael-icon-business-rule');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.businessRuleTaskActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Business Rule Task', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let task: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(task).not.toBeNull();
+
+                    let taskText: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-multiline-text');
+                    expect(taskText).not.toBeNull();
+                    expect(taskText.attributes[1].value).toEqual('Fake BusinessRule task');
+
+                    let iconTask: any = element.querySelector('diagram-business-rule-task > diagram-icon-business-rule-task > raphael-icon-business-rule');
+                    expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsActivitiesMock.businessRuleTaskCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+    });
+
+    describe('Diagrams component Gateways with process instance id: ', () => {
+        beforeEach(() => {
+            jasmine.Ajax.install();
+            component.processInstanceId = '38399';
+            component.metricPercentages = {startEvent: 0};
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        it('Should render the Exclusive Gateway', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-exclusive-gateway > diagram-gateway > raphael-rhombus');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-exclusive-gateway > raphael-cross');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsGatewaysMock.exclusiveGatway]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Exclusive Gateway', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-exclusive-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#017501"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-exclusive-gateway > raphael-cross');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsGatewaysMock.exclusiveGatwayActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Exclusive Gateway', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-exclusive-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#2632aa"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-exclusive-gateway > raphael-cross');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsGatewaysMock.exclusiveGatwayCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Inclusive Gateway', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-inclusive-gateway > diagram-gateway > raphael-rhombus');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-inclusive-gateway > raphael-circle');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsGatewaysMock.inclusiveGatway]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Inclusive Gateway', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-inclusive-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#017501"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-inclusive-gateway > raphael-circle');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsGatewaysMock.inclusiveGatwayActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Inclusive Gateway', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-inclusive-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#2632aa"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-inclusive-gateway > raphael-circle');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsGatewaysMock.inclusiveGatwayCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Parallel Gateway', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-parallel-gateway > diagram-gateway > raphael-rhombus');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-parallel-gateway > raphael-plus');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsGatewaysMock.parallelGatway]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Parallel Gateway', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-parallel-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#017501"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-parallel-gateway > raphael-plus');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsGatewaysMock.parallelGatwayActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Parallel Gateway', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-parallel-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#2632aa"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-parallel-gateway > raphael-plus');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsGatewaysMock.parallelGatwayCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Event Gateway', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-gateway > diagram-gateway > raphael-rhombus');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-event-gateway');
+                    expect(shape1).not.toBeNull();
+                    expect(shape1.children.length).toBe(4);
+
+                    let outerCircle = shape1.children[1];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape1.children[2];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let shape2: any = element.querySelector('diagram-event-gateway > raphael-pentagon');
+                    expect(shape2).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsGatewaysMock.eventGatway]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Event Gateway', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#017501"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-event-gateway');
+                    expect(shape1).not.toBeNull();
+                    expect(shape1.children.length).toBe(4);
+
+                    let outerCircle = shape1.children[1];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape1.children[2];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let shape2: any = element.querySelector('diagram-event-gateway > raphael-pentagon');
+                    expect(shape2).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsGatewaysMock.eventGatwayActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Event Gateway', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#2632aa"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-event-gateway');
+                    expect(shape1).not.toBeNull();
+                    expect(shape1.children.length).toBe(4);
+
+                    let outerCircle = shape1.children[1];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape1.children[2];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let shape2: any = element.querySelector('diagram-event-gateway > raphael-pentagon');
+                    expect(shape2).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [diagramsGatewaysMock.eventGatwayCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+    });
+
+    describe('Diagrams component Intermediate Catching events with process instance id: ', () => {
+        beforeEach(() => {
+            jasmine.Ajax.install();
+            component.processInstanceId = '38399';
+            component.metricPercentages = {startEvent: 0};
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        it('Should render the Intermediate catching time event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [intermediateCatchingMock.intermediateCatchingTimeEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Intermediate catching time event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [intermediateCatchingMock.intermediateCatchingTimeEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Intermediate catching time event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [intermediateCatchingMock.intermediateCatchingTimeEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Intermediate catching error event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [intermediateCatchingMock.intermediateCatchingErrorEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Intermediate catching error event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [intermediateCatchingMock.intermediateCatchingErrorEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Intermediate catching error event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [intermediateCatchingMock.intermediateCatchingErrorEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Intermediate catching signal event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [intermediateCatchingMock.intermediateCatchingSignalEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Intermediate Active catching signal event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [intermediateCatchingMock.intermediateCatchingSignalEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Intermediate catching signal event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [intermediateCatchingMock.intermediateCatchingSignalEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Intermediate catching signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [intermediateCatchingMock.intermediateCatchingMessageEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Intermediate catching signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [intermediateCatchingMock.intermediateCatchingMessageEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Intermediate catching signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [intermediateCatchingMock.intermediateCatchingMessageEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+    });
+
+    describe('Diagrams component Boundary events with process instance id: ', () => {
+        beforeEach(() => {
+            jasmine.Ajax.install();
+            component.processInstanceId = '38399';
+            component.metricPercentages = {startEvent: 0};
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        it('Should render the Boundary time event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundaryTimeEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Boundary time event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundaryTimeEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Boundary time event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundaryTimeEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Boundary error event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundaryErrorEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Boundary error event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundaryErrorEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Boundary error event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundaryErrorEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Boundary signal event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundarySignalEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Boundary signal event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundarySignalEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Boundary signal event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundarySignalEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Boundary signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundaryMessageEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Boundary signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundaryMessageEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Boundary signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundaryMessageEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Boundary signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundaryMessageEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Boundary signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundaryMessageEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Boundary signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [boundaryEventMock.boundaryMessageEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+    });
+
+    describe('Diagrams component Throw events with process instance id: ', () => {
+        beforeEach(() => {
+            jasmine.Ajax.install();
+            component.processInstanceId = '38399';
+            component.metricPercentages = {startEvent: 0};
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        it('Should render the Throw time event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwTimeEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Throw time event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwTimeEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Throw time event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwTimeEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Throw error event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwErrorEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Throw error event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwErrorEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Throw error event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwErrorEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Throw signal event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwSignalEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Throw signal event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwSignalEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Throw signal event', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwSignalEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Throw signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwMessageEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Throw signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwMessageEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Throw signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwMessageEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Throw signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwMessageEvent]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Throw signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwMessageEventActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Throw signal message', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [throwEventMock.throwMessageEventCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+    });
+
+    describe('Diagrams component Structural with process instance id: ', () => {
+        beforeEach(() => {
+            jasmine.Ajax.install();
+            component.processInstanceId = '38399';
+            component.metricPercentages = {startEvent: 0};
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        it('Should render the Subprocess', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-subprocess > raphael-rect');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [structuralMock.subProcess]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Subprocess', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-subprocess > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [structuralMock.subProcessActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Subprocess', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-subprocess > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [structuralMock.subProcessCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Event Subprocess', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-subprocess > raphael-rect');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [structuralMock.eventSubProcess]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Active Event Subprocess', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-subprocess > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [structuralMock.eventSubProcessActive]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Completed Event Subprocess', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-subprocess > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {elements: [structuralMock.eventSubProcessCompleted]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+    });
+
+    describe('Diagrams component Swim lane with process instance id: ', () => {
+        beforeEach(() => {
+            jasmine.Ajax.install();
+            component.processInstanceId = '38399';
+            component.metricPercentages = {startEvent: 0};
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        it('Should render the Pool', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-pool > raphael-rect');
+                    expect(shape).not.toBeNull();
+
+                    let shapeText: any = element.querySelector('diagram-pool > raphael-text');
+                    expect(shapeText).not.toBeNull();
+                    expect(shapeText.attributes[2].value).toEqual('Activiti');
+                });
+            });
+            component.ngOnChanges();
+            let resp = {pools: [swimLanesMock.pool]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+
+        it('Should render the Pool with Lanes', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shapeLane: any = element.querySelector('diagram-lanes > div > div > diagram-lane');
+                    expect(shapeLane).not.toBeNull();
+
+                    let shapeRect: any = element.querySelector('diagram-lanes > div > div > diagram-lane > raphael-rect');
+                    expect(shapeRect).not.toBeNull();
+
+                    let shapeText: any = element.querySelector('diagram-lanes > div > div > diagram-lane > raphael-text');
+                    expect(shapeText).not.toBeNull();
+                    expect(shapeText.attributes[2].value).toEqual('Beckend');
+                });
+            });
+            component.ngOnChanges();
+            let resp = {pools: [swimLanesMock.poolLanes]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+    });
+
+    describe('Diagrams component Flows with process instance id: ', () => {
+        beforeEach(() => {
+            jasmine.Ajax.install();
+            component.processInstanceId = '38399';
+            component.metricPercentages = {startEvent: 0};
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        it('Should render the flow', async(() => {
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-sequence-flow > raphael-flow-arrow');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.flows[0].id);
+                    expect(tooltip.textContent).toContain(res.flows[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = {flows: [flowsMock.flow]};
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+    });
 });
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 ba8cddc88e..b22e99e270 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts
@@ -31,6 +31,9 @@ export class DiagramComponent {
     @Input()
     processDefinitionId: any;
 
+    @Input()
+    processInstanceId: any;
+
     @Input()
     metricPercentages: any;
 
@@ -71,14 +74,34 @@ export class DiagramComponent {
     ngOnChanges(changes: SimpleChanges) {
         this.reset();
         this.diagramColorService.setTotalColors(this.metricColor);
-        this.getProcessDefinitionModel(this.processDefinitionId);
+        if (this.processDefinitionId) {
+            this.getProcessDefinitionModel(this.processDefinitionId);
+        } else {
+            this.getRunningProcessDefinitionModel(this.processInstanceId);
+        }
+    }
+
+    getRunningProcessDefinitionModel(processInstanceId: string) {
+        this.diagramsService.getRunningProcessDefinitionModel(processInstanceId).subscribe(
+            (res: any) => {
+                this.diagram = new DiagramModel(res);
+                this.raphaelService.setting(this.diagram.diagramWidth + this.PADDING_WIDTH,
+                                            this.diagram.diagramHeight + this.PADDING_HEIGHT);
+                this.setMetricValueToDiagramElement(this.diagram, this.metricPercentages, this.metricType);
+                this.onSuccess.emit(res);
+            },
+            (err: any) => {
+                this.onError.emit(err);
+            }
+        );
     }
 
     getProcessDefinitionModel(processDefinitionId: string) {
         this.diagramsService.getProcessDefinitionModel(processDefinitionId).subscribe(
             (res: any) => {
                 this.diagram = new DiagramModel(res);
-                this.raphaelService.setting(this.diagram.diagramWidth + this.PADDING_WIDTH, this.diagram.diagramHeight + this.PADDING_HEIGHT);
+                this.raphaelService.setting(this.diagram.diagramWidth + this.PADDING_WIDTH,
+                                            this.diagram.diagramHeight + this.PADDING_HEIGHT);
                 this.setMetricValueToDiagramElement(this.diagram, this.metricPercentages, this.metricType);
                 this.onSuccess.emit(res);
             },
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts
index 60a1961804..ed2a22bc66 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts
@@ -74,6 +74,10 @@ export class RaphaelMultilineTextDirective extends RaphaelBase implements OnInit
     }
 
     private formatText(textPaper, text, elementWidth) {
+        let pText = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        textPaper.attr({
+            'text': pText
+        });
         let letterWidth = textPaper.getBBox().width / text.length;
         let removedLineBreaks = text.split('\n');
         let actualRowLength = 0, formattedText = [];
diff --git a/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts b/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts
index 32510ca0db..a50e1fc604 100644
--- a/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts
@@ -50,6 +50,8 @@ export class DiagramModel {
 }
 
 export class DiagramElementModel {
+    completed: boolean;
+    current: boolean;
     height: string;
     id: string;
     name: string;
@@ -65,6 +67,8 @@ export class DiagramElementModel {
 
     constructor(obj?: any) {
         if (obj) {
+            this.completed = obj.completed || false;
+            this.current = obj.current || false;
             this.height = obj.height || '';
             this.id = obj.id || '';
             this.name = obj.name || '';
@@ -102,6 +106,8 @@ export class DiagramElementPropertyModel {
 }
 
 export class DiagramFlowElementModel {
+    completed: boolean;
+    current: boolean;
     id: string;
     properties: any[] = [];
     sourceRef: string;
@@ -111,6 +117,8 @@ export class DiagramFlowElementModel {
 
     constructor(obj?: any) {
         if (obj) {
+            this.completed = obj.completed || false;
+            this.current = obj.current || false;
             this.id = obj.id;
             this.properties = obj.properties;
             this.sourceRef = obj.sourceRef;
diff --git a/ng2-components/ng2-activiti-diagrams/src/services/diagrams.service.ts b/ng2-components/ng2-activiti-diagrams/src/services/diagrams.service.ts
index de67d44b59..af3da58afe 100644
--- a/ng2-components/ng2-activiti-diagrams/src/services/diagrams.service.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/services/diagrams.service.ts
@@ -40,6 +40,17 @@ export class DiagramsService {
             }).catch(err => this.handleError(err));
     }
 
+    getRunningProcessDefinitionModel(processInstanceId: string): Observable<any> {
+        let url = `${this.settingsService.getBPMApiBaseUrl()}/app/rest/process-instances/${processInstanceId}/model-json`;
+        let options = this.getRequestOptions();
+        return this.http
+            .get(url, options)
+            .map((res: any) => {
+                let body = res.json();
+                return body;
+            }).catch(err => this.handleError(err));
+    }
+
     public getHeaders(): Headers {
         return new Headers({
             'Accept': 'application/json',

From 5c7d53230d36b58730728b52a8cdece1b3d96832 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Wed, 10 May 2017 11:11:04 +0100
Subject: [PATCH 26/72] fix upload directive for Safari (#1871)

---
 .../src/directives/upload.directive.spec.ts   |  2 ++
 .../src/directives/upload.directive.ts        | 19 ++++++++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/ng2-components/ng2-alfresco-core/src/directives/upload.directive.spec.ts b/ng2-components/ng2-alfresco-core/src/directives/upload.directive.spec.ts
index d45181bb5a..6374d806e0 100644
--- a/ng2-components/ng2-alfresco-core/src/directives/upload.directive.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/directives/upload.directive.spec.ts
@@ -113,6 +113,7 @@ describe('UploadDirective', () => {
         directive.enabled = true;
         let files = [<File> {}];
         let event = jasmine.createSpyObj('event', ['preventDefault', 'stopPropagation']);
+        spyOn(directive, 'getDataTransfer').and.returnValue({});
         spyOn(directive, 'getFilesDropped').and.returnValue(files);
         spyOn(nativeElement, 'dispatchEvent').and.stub();
         directive.onDrop(event);
@@ -123,6 +124,7 @@ describe('UploadDirective', () => {
         directive.enabled = true;
         let files = [<File> {}];
         let event = jasmine.createSpyObj('event', ['preventDefault', 'stopPropagation']);
+        spyOn(directive, 'getDataTransfer').and.returnValue({});
         spyOn(directive, 'getFilesDropped').and.returnValue(files);
 
         spyOn(nativeElement, 'dispatchEvent').and.callFake(e => {
diff --git a/ng2-components/ng2-alfresco-core/src/directives/upload.directive.ts b/ng2-components/ng2-alfresco-core/src/directives/upload.directive.ts
index e41e8ecae0..dd61a6f65f 100644
--- a/ng2-components/ng2-alfresco-core/src/directives/upload.directive.ts
+++ b/ng2-components/ng2-alfresco-core/src/directives/upload.directive.ts
@@ -105,15 +105,18 @@ export class UploadDirective implements OnInit {
     }
 
     @HostListener('drop', ['$event'])
-    onDrop(event: DragEvent) {
+    onDrop(event: Event) {
         if (this.isDropMode()) {
             event.preventDefault();
             event.stopPropagation();
 
             this.isDragging = false;
 
-            const files = this.getFilesDropped(event.dataTransfer);
-            this.onUploadFiles(files);
+            const dataTranfer = this.getDataTransfer(event);
+            if (dataTranfer) {
+                const files = this.getFilesDropped(dataTranfer);
+                this.onUploadFiles(files);
+            }
         }
     }
 
@@ -144,6 +147,16 @@ export class UploadDirective implements OnInit {
         return this.hasMode('click');
     }
 
+    protected getDataTransfer(event: Event | any): DataTransfer {
+        if (event && event.dataTranfer) {
+            return event.dataTranfer;
+        }
+        if (event && event.originalEvent && event.originalEvent.dataTranfer) {
+            return event.originalEvent.dataTranfer;
+        }
+        return null;
+    }
+
     /**
      * Extract files from the DataTransfer object used to hold the data that is being dragged during a drag and drop operation.
      * @param dataTransfer DataTransfer object

From 07d898b2aa78f1daad40ed7c30162d244d0bb773 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Wed, 10 May 2017 11:12:05 +0100
Subject: [PATCH 27/72] node-click and node-dblclick DOM events (#1863)

Extra DOM events with bubbling support for DocumentList:
- node-click
- node-dblclick
---
 .../ng2-alfresco-documentlist/README.md       | 36 +++++++++++++++++++
 .../breadcrumb/breadcrumb.component.spec.ts   |  2 +-
 .../content-action-list.component.spec.ts     |  2 +-
 .../content-action.component.spec.ts          |  2 +-
 .../content-column-list.component.spec.ts     |  2 +-
 .../content-column.component.spec.ts          |  2 +-
 .../document-list.component.spec.ts           | 26 ++++++++++++++
 .../src/components/document-list.component.ts | 27 +++++++++++---
 .../empty-folder-content.component.spec.ts    |  2 +-
 9 files changed, 91 insertions(+), 10 deletions(-)

diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md
index 08e8ad7034..654cbf5875 100644
--- a/ng2-components/ng2-alfresco-documentlist/README.md
+++ b/ng2-components/ng2-alfresco-documentlist/README.md
@@ -206,6 +206,42 @@ _For a complete example source code please refer to
 [DocumentList Demo](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-documentlist/demo) 
 repository._
 
+### DOM Events
+
+Below are the DOM events the DocumentList component emits. 
+All of them are `bubbling`, meaning you can handle them in any component up the parent hierarchy, even if DocumentList is wrapped by another component(s).
+
+| Name | Description |
+| --- | --- |
+| node-click | Raised when user clicks the node |
+| node-dblclick | Raised when user double-clicks the node |
+
+Every event is represented by a [CustomEvent](https://developer.mozilla.org/en/docs/Web/API/CustomEvent) instance, having at least the following properties as part of the `Event.detail` property value:
+
+```ts
+{
+    sender: DocumentListComponent,
+    node: MinimalNodeEntity
+}
+```
+
+#### Handling DOM events
+
+Here's a basic example on handling DOM events in the parent elements:
+
+```html
+<div (node-click)="onNodeClicked($event)" 
+     (node-dblclick)="onNodeDblClicked($event)">
+    <div>
+        <alfresco-upload-drag-area ...>
+             <alfresco-document-list ...>
+                ...
+             </alfresco-document-list>
+        </alfresco-upload-drag-area>
+    </div>
+</div>
+```
+
 ### Setting default folder
 
 You can set current folder path by assigning a value for `currentFolderId` property. 
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts
index 56744a769f..1365facf18 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts
@@ -50,7 +50,7 @@ describe('DocumentListBreadcrumb', () => {
     });
 
     it('should update document list on click', (done) => {
-        let documentList = new DocumentListComponent(null, null, null);
+        let documentList = new DocumentListComponent(null, null, null, null);
         spyOn(documentList, 'loadFolderByNodeId').and.stub();
 
         let node = <PathElementEntity> { id: '-id-', name: 'name' };
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts
index ffcaaa044e..493d10c542 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts
@@ -27,7 +27,7 @@ describe('ContentColumnList', () => {
 
     beforeEach(() => {
         let documentListService = new DocumentListServiceMock();
-        documentList = new DocumentListComponent(documentListService, null, null);
+        documentList = new DocumentListComponent(documentListService, null, null, null);
         actionList = new ContentActionListComponent(documentList);
     });
 
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts
index bd8b614b26..40f24becc2 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts
@@ -38,7 +38,7 @@ describe('ContentAction', () => {
         documentActions = new DocumentActionsService(null, null);
         folderActions = new FolderActionsService(null);
 
-        documentList = new DocumentListComponent(documentServiceMock, null, null);
+        documentList = new DocumentListComponent(documentServiceMock, null, null, null);
         actionList = new ContentActionListComponent(documentList);
     });
 
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts
index 8fd4daad64..3cccfcebc2 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts
@@ -28,7 +28,7 @@ describe('ContentColumnList', () => {
 
     beforeEach(() => {
         let service = new DocumentListServiceMock();
-        documentList = new DocumentListComponent(service, null, null);
+        documentList = new DocumentListComponent(service, null, null, null);
         columnList = new ContentColumnListComponent(documentList);
     });
 
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts
index eec2eb9202..e06c860619 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts
@@ -27,7 +27,7 @@ describe('ContentColumn', () => {
 
     beforeEach(() => {
         let service = new DocumentListServiceMock();
-        documentList = new DocumentListComponent(service, null, null);
+        documentList = new DocumentListComponent(service, null, null, null);
         columnList = new ContentColumnListComponent(documentList);
     });
 
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
index 1506e14dc5..ae18bd9bd5 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
@@ -513,6 +513,19 @@ describe('DocumentList', () => {
         expect(documentList.onNodeClick).toHaveBeenCalledWith(node);
     });
 
+    it('should emit node-click DOM event', (done) => {
+        let node = new NodeMinimalEntry();
+        let row = new ShareDataRow(node);
+        let event = new DataRowEvent(row, null);
+
+        const htmlElement = fixture.debugElement.nativeElement as HTMLElement;
+        htmlElement.addEventListener('node-click', (e: CustomEvent) => {
+            done();
+        });
+
+        documentList.onRowClick(event);
+    });
+
     it('should emit [nodeDblClick] event on row double-click', () => {
         let node = new NodeMinimalEntry();
         let row = new ShareDataRow(node);
@@ -523,6 +536,19 @@ describe('DocumentList', () => {
         expect(documentList.onNodeDblClick).toHaveBeenCalledWith(node);
     });
 
+    it('should emit node-dblclick DOM event', (done) => {
+        let node = new NodeMinimalEntry();
+        let row = new ShareDataRow(node);
+        let event = new DataRowEvent(row, null);
+
+        const htmlElement = fixture.debugElement.nativeElement as HTMLElement;
+        htmlElement.addEventListener('node-dblclick', (e: CustomEvent) => {
+            done();
+        });
+
+        documentList.onRowDblClick(event);
+    });
+
     it('should load folder by ID on init', () => {
         documentList.currentFolderId = '1d26e465-dea3-42f3-b415-faa8364b9692';
         spyOn(documentList, 'loadFolderNodesByFolderNodeId').and.returnValue(Promise.resolve());
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 f82be39c34..5c773fc4c3 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
@@ -16,7 +16,7 @@
  */
 
 import {
-    Component, OnInit, Input, OnChanges, Output, SimpleChanges, EventEmitter,
+    Component, OnInit, Input, OnChanges, Output, SimpleChanges, EventEmitter, ElementRef,
     AfterContentInit, TemplateRef, NgZone, ViewChild, HostListener, ContentChild
 } from '@angular/core';
 import { Subject } from 'rxjs/Rx';
@@ -150,7 +150,8 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
 
     constructor(private documentListService: DocumentListService,
                 private ngZone: NgZone,
-                private translateService: AlfrescoTranslationService) {
+                private translateService: AlfrescoTranslationService,
+                private el: ElementRef) {
 
         this.data = new ShareDataTableAdapter(this.documentListService);
 
@@ -396,7 +397,16 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
     }
 
     onNodeClick(node: MinimalNodeEntity) {
-        let event = new NodeEntityEvent(node);
+        const domEvent = new CustomEvent('node-click', {
+            detail: {
+                sender: this,
+                node: node
+            },
+            bubbles: true
+        });
+        this.el.nativeElement.dispatchEvent(domEvent);
+
+        const event = new NodeEntityEvent(node);
         this.nodeClick.emit(event);
 
         if (!event.defaultPrevented) {
@@ -420,7 +430,16 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
     }
 
     onNodeDblClick(node: MinimalNodeEntity) {
-        let event = new NodeEntityEvent(node);
+        const domEvent = new CustomEvent('node-dblclick', {
+            detail: {
+                sender: this,
+                node: node
+            },
+            bubbles: true
+        });
+        this.el.nativeElement.dispatchEvent(domEvent);
+
+        const event = new NodeEntityEvent(node);
         this.nodeDblClick.emit(event);
 
         if (!event.defaultPrevented) {
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts
index 546deb3fca..aae664a984 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts
@@ -28,7 +28,7 @@ describe('EmptyFolderContent', () => {
 
     beforeEach(() => {
         let documentListService = new DocumentListServiceMock();
-        documentList = new DocumentListComponent(documentListService, null, null);
+        documentList = new DocumentListComponent(documentListService, null, null, null);
         documentList.dataTable = new DataTableComponent(null);
         emptyFolderContent = new EmptyFolderContentComponent(documentList);
     });

From 416d8c2a1b89cc52390a09ee982cdfed97f5bc84 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Wed, 10 May 2017 14:35:19 +0100
Subject: [PATCH 28/72] reintroduce start:dist task

---
 demo-shell-ng2/package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 9ed42bc018..cadb3a3afd 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "build": "rimraf dist && 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",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
     "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'",
@@ -133,6 +134,7 @@
     "typescript": "^2.1.6",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
-    "webpack-merge": "^2.6.1"
+    "webpack-merge": "^2.6.1",
+    "wsrv": "^0.1.6"
   }
 }

From b0be88ec377d2adde797b75c273857d3a1fa808a Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Wed, 10 May 2017 15:43:38 +0100
Subject: [PATCH 29/72] [ADF-551] allow setting sorting in html (#1857)

* allow setting sorting in html

* readme update

* update readme

* restore permissions code

* - Remove the check permission from the datatable and move inside the documentlist

* Remove commented test
---
 .../app/components/files/files.component.html |   1 +
 .../datatable/datatable.component.spec.ts     |  82 ---------
 .../datatable/datatable.component.ts          |  28 +--
 .../ng2-alfresco-documentlist/README.md       |   1 +
 .../document-list.component.spec.ts           | 160 ++++++++++++++++++
 .../src/components/document-list.component.ts |  63 +++++--
 .../src/models/content-action.model.ts        |   1 +
 7 files changed, 216 insertions(+), 120 deletions(-)

diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html
index bf828122ff..e07602fd09 100644
--- a/demo-shell-ng2/app/components/files/files.component.html
+++ b/demo-shell-ng2/app/components/files/files.component.html
@@ -18,6 +18,7 @@
                 [contextMenuActions]="true"
                 [contentActions]="true"
                 [allowDropFiles]="true"
+                [sorting]="['name', 'desc']"
                 (error)="onNavigationError($event)"
                 (success)="resetError()"
                 (preview)="showFile($event)"
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 39265bf5f7..1211e0f2ce 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
@@ -415,86 +415,4 @@ describe('DataTable', () => {
         expect(event.target.src).toBe(originalSrc);
     });
 
-    it('should disable the action if there is no permission and disableWithNoPermission true', () => {
-
-        dataTable.data = new ObjectDataTableAdapter(
-            [{id: 1, name: 'xyz', allowableOperations: ['create', 'update']}],
-            []
-        );
-
-        let row = dataTable.data.getRows();
-        let actions = [
-            {
-                disableWithNoPermission: true,
-                permission: 'delete',
-                target: 'folder',
-                title: 'action2'
-            }
-        ];
-
-        let updateActions = dataTable.checkPermissions(row[0], actions);
-        expect(updateActions[0].disabled).toBe(true);
-    });
-
-    it('should not disable the action if there is no permission and disableWithNoPermission false', () => {
-
-        dataTable.data = new ObjectDataTableAdapter(
-            [{id: 1, name: 'xyz', allowableOperations: ['create', 'update']}],
-            []
-        );
-
-        let row = dataTable.data.getRows();
-        let actions = [
-            {
-                disableWithNoPermission: false,
-                permission: 'delete',
-                target: 'folder',
-                title: 'action2'
-            }
-        ];
-
-        let updateActions = dataTable.checkPermissions(row[0], actions);
-        expect(updateActions[0].disabled).toBeUndefined();
-    });
-
-    it('should not disable the action if there is the right permission', () => {
-
-        dataTable.data = new ObjectDataTableAdapter(
-            [{ id: 1, name: 'xyz', allowableOperations: ['create', 'update', 'delete'] }],
-            []
-        );
-
-        let row = dataTable.data.getRows();
-        let actions = [
-            {
-                permission: 'delete',
-                target: 'folder',
-                title: 'action2'
-            }
-        ];
-
-        let updateActions = dataTable.checkPermissions(row[0], actions);
-        expect(updateActions[0].disabled).toBeUndefined();
-    });
-
-    it('should not disable the action if there are no permissions', () => {
-
-        dataTable.data = new ObjectDataTableAdapter(
-            [{id: 1, name: 'xyz', allowableOperations: null}],
-            []
-        );
-
-        let row = dataTable.data.getRows();
-        let actions = [
-            {
-                permission: 'delete',
-                target: 'folder',
-                title: 'action2'
-            }
-        ];
-
-        let updateActions = dataTable.checkPermissions(row[0], actions);
-        expect(updateActions[0].disabled).toBeUndefined();
-    });
-
 });
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 f958e7ecad..e7c0cddbd9 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
@@ -235,33 +235,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
     getRowActions(row: DataRow, col: DataColumn): any[] {
         let event = new DataCellEvent(row, col, []);
         this.showRowActionsMenu.emit(event);
-
-        return this.checkPermissions(row, event.value.actions);
-    }
-
-    checkPermissions(row: DataRow, actions: any[]) {
-        let actionsPermission = [];
-        actions.forEach((action) => {
-            actionsPermission.push(this.checkPermission(row, action));
-        });
-        return actionsPermission;
-    }
-
-    checkPermission(row: DataRow, action) {
-        if (action.permission) {
-            if (this.hasPermissions(row)) {
-                let permissions = row.getValue('allowableOperations');
-                let findPermission = permissions.find(permission => permission === action.permission);
-                if (!findPermission && action.disableWithNoPermission === true) {
-                    action.disabled = true;
-                }
-            }
-        }
-        return action;
-    }
-
-    private hasPermissions(row: DataRow): boolean {
-        return row.getValue('allowableOperations') ? true : false;
+        return event.value.actions;
     }
 
     onExecuteRowAction(row: DataRow, action: any) {
diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md
index 654cbf5875..ed30263f79 100644
--- a/ng2-components/ng2-alfresco-documentlist/README.md
+++ b/ng2-components/ng2-alfresco-documentlist/README.md
@@ -192,6 +192,7 @@ The properties currentFolderId, folderNode and node are the entry initialization
 | `rowFilter` | `RowFilter` | | Custom row filter, [see more](#custom-row-filter). |
 | `imageResolver` | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver). |
 | `allowDropFiles` | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
+| `sorting` | string[] | | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override default sorting detected by the component based on columns. |
 
 ### Events
 
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
index ae18bd9bd5..0a89e5daed 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
@@ -164,6 +164,166 @@ describe('DocumentList', () => {
         expect(actions[0]).toBe(documentMenu);
     });
 
+    it('should disable the action if there is no permission for the file and disableWithNoPermission true', () => {
+        let documentMenu = new ContentActionModel({
+            disableWithNoPermission: true,
+            permission: 'delete',
+            target: 'document',
+            title: 'FileAction'
+        });
+
+        documentList.actions = [
+            documentMenu
+        ];
+
+        let nodeFile = {entry: {isFile: true, name: 'xyz', allowableOperations: ['create', 'update']}};
+
+        let actions = documentList.getNodeActions(nodeFile);
+        expect(actions.length).toBe(1);
+        expect(actions[0].title).toEqual('FileAction');
+        expect(actions[0].disabled).toBe(true);
+
+    });
+
+    it('should disable the action if there is no permission for the folder and disableWithNoPermission true', () => {
+        let documentMenu = new ContentActionModel({
+            disableWithNoPermission: true,
+            permission: 'delete',
+            target: 'folder',
+            title: 'FolderAction'
+        });
+
+        documentList.actions = [
+            documentMenu
+        ];
+
+        let nodeFile = {entry: {isFolder: true, name: 'xyz', allowableOperations: ['create', 'update']}};
+
+        let actions = documentList.getNodeActions(nodeFile);
+        expect(actions.length).toBe(1);
+        expect(actions[0].title).toEqual('FolderAction');
+        expect(actions[0].disabled).toBe(true);
+
+    });
+
+    it('should not disable the action if there is no permission for the file and disableWithNoPermission false', () => {
+        let documentMenu = new ContentActionModel({
+            disableWithNoPermission: false,
+            permission: 'delete',
+            target: 'document',
+            title: 'FileAction'
+        });
+
+        documentList.actions = [
+            documentMenu
+        ];
+
+        let nodeFile = {entry: {isFile: true, name: 'xyz', allowableOperations: ['create', 'update']}};
+
+        let actions = documentList.getNodeActions(nodeFile);
+        expect(actions.length).toBe(1);
+        expect(actions[0].title).toEqual('FileAction');
+        expect(actions[0].disabled).toBeUndefined(true);
+    });
+
+    it('should not disable the action if there is no permission for the folder and disableWithNoPermission false', () => {
+        let documentMenu = new ContentActionModel({
+            disableWithNoPermission: false,
+            permission: 'delete',
+            target: 'folder',
+            title: 'FolderAction'
+        });
+
+        documentList.actions = [
+            documentMenu
+        ];
+
+        let nodeFile = {entry: {isFolder: true, name: 'xyz', allowableOperations: ['create', 'update']}};
+
+        let actions = documentList.getNodeActions(nodeFile);
+        expect(actions.length).toBe(1);
+        expect(actions[0].title).toEqual('FolderAction');
+        expect(actions[0].disabled).toBeUndefined(true);
+    });
+
+    it('should not disable the action if there is the right permission for the file', () => {
+        let documentMenu = new ContentActionModel({
+            disableWithNoPermission: true,
+            permission: 'delete',
+            target: 'document',
+            title: 'FileAction'
+        });
+
+        documentList.actions = [
+            documentMenu
+        ];
+
+        let nodeFile = {entry: {isFile: true, name: 'xyz', allowableOperations: ['create', 'update', 'delete']}};
+
+        let actions = documentList.getNodeActions(nodeFile);
+        expect(actions.length).toBe(1);
+        expect(actions[0].title).toEqual('FileAction');
+        expect(actions[0].disabled).toBeUndefined();
+    });
+
+    it('should not disable the action if there is the right permission for the folder', () => {
+        let documentMenu = new ContentActionModel({
+            disableWithNoPermission: true,
+            permission: 'delete',
+            target: 'folder',
+            title: 'FolderAction'
+        });
+
+        documentList.actions = [
+            documentMenu
+        ];
+
+        let nodeFile = {entry: {isFolder: true, name: 'xyz', allowableOperations: ['create', 'update', 'delete']}};
+
+        let actions = documentList.getNodeActions(nodeFile);
+        expect(actions.length).toBe(1);
+        expect(actions[0].title).toEqual('FolderAction');
+        expect(actions[0].disabled).toBeUndefined();
+    });
+
+    it('should not disable the action if there are no permissions for the file', () => {
+        let documentMenu = new ContentActionModel({
+            permission: 'delete',
+            target: 'document',
+            title: 'FileAction'
+        });
+
+        documentList.actions = [
+            documentMenu
+        ];
+
+        let nodeFile = {entry: {isFile: true, name: 'xyz', allowableOperations: null}};
+
+        let actions = documentList.getNodeActions(nodeFile);
+        expect(actions.length).toBe(1);
+        expect(actions[0].title).toEqual('FileAction');
+        expect(actions[0].disabled).toBeUndefined();
+    });
+
+    it('should not disable the action if there are no permissions for the folder', () => {
+        let documentMenu = new ContentActionModel({
+            permission: 'delete',
+            target: 'folder',
+            title: 'FolderAction'
+        });
+
+        documentList.actions = [
+            documentMenu
+        ];
+
+        let nodeFile = {entry: {isFolder: true, name: 'xyz', allowableOperations: null}};
+
+        let actions = documentList.getNodeActions(nodeFile);
+        expect(actions.length).toBe(1);
+        expect(actions[0].title).toEqual('FolderAction');
+        expect(actions[0].disabled).toBeUndefined();
+    });
+
     it('should find no content actions', () => {
         let documentButton = new ContentActionModel();
         documentButton.target = 'document';
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 5c773fc4c3..1ed104f162 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
@@ -89,6 +89,9 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
     @Input()
     allowDropFiles: boolean = false;
 
+    @Input()
+    sorting: string[];
+
     skipCount: number = 0;
 
     pagination: Pagination;
@@ -189,12 +192,6 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
         this.enforceSingleClickNavigationForMobile();
     }
 
-    private enforceSingleClickNavigationForMobile(): void {
-        if (this.isMobile()) {
-            this.navigationMode = DocumentListComponent.SINGLE_CLICK_NAVIGATION;
-        }
-    }
-
     ngAfterContentInit() {
         let schema: DataColumn[] = [];
 
@@ -212,6 +209,15 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
         if (!columns || columns.length === 0) {
             this.setupDefaultColumns();
         }
+
+        if (this.sorting) {
+            const [ key, direction ] = this.sorting;
+
+            this.data.setSorting({
+                key,
+                direction: direction || 'asc'
+            });
+        }
     }
 
     ngOnChanges(changes: SimpleChanges) {
@@ -271,7 +277,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
         return this.enablePagination && !this.isEmpty();
     }
 
-    getNodeActions(node: MinimalNodeEntity): ContentActionModel[] {
+    getNodeActions(node: MinimalNodeEntity | any): ContentActionModel[] {
         let target = null;
 
         if (node && node.entry) {
@@ -284,18 +290,46 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
             }
 
             if (target) {
-
                 let ltarget = target.toLowerCase();
+                let actionWithPermission = this.checkPermissions(node);
 
-                return this.actions.filter(entry => {
+                let actionsByTarget = actionWithPermission.filter(entry => {
                     return entry.target.toLowerCase() === ltarget;
                 });
+
+                let cloneActions = Object.create(actionsByTarget);
+                return cloneActions;
             }
         }
 
         return [];
     }
 
+    checkPermissions(node: MinimalNodeEntity): ContentActionModel[] {
+        let actionsPermission: ContentActionModel[] = [];
+        this.actions.forEach((action) => {
+            actionsPermission.push(this.checkPermission(node, action));
+        });
+        return actionsPermission;
+    }
+
+    checkPermission(node: any, action: ContentActionModel): ContentActionModel {
+        if (action.permission) {
+            if (this.hasPermissions(node)) {
+                let permissions = node.entry.allowableOperations;
+                let findPermission = permissions.find(permission => permission === action.permission);
+                if (!findPermission && action.disableWithNoPermission === true) {
+                    action.disabled = true;
+                }
+            }
+        }
+        return action;
+    }
+
+    private hasPermissions(node: any): boolean {
+        return node.entry.allowableOperations ? true : false;
+    }
+
     @HostListener('contextmenu', ['$event'])
     onShowContextMenu(e?: Event) {
         if (e && this.contextMenuActions) {
@@ -341,7 +375,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
             this.skipCount = 0;
             this.loadFolderNodesByFolderNodeId(node.id, this.pageSize, this.skipCount).catch(err => this.error.emit(err));
         })
-            .catch(err => this.error.emit(err));
+        .catch(err => this.error.emit(err));
     }
 
     loadFolderNodesByFolderNodeId(id: string, maxItems: number, skipCount: number): Promise<any> {
@@ -353,7 +387,8 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
                         skipCount: skipCount,
                         rootFolderId: id
                     })
-                    .subscribe(val => {
+                    .subscribe(
+                        val => {
                             this.data.loadPage(<NodePaging>val);
                             this.pagination = val.list.pagination;
                             resolve(true);
@@ -518,4 +553,10 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
     onPermissionError(event) {
         this.permissionError.emit(event);
     }
+
+    private enforceSingleClickNavigationForMobile(): void {
+        if (this.isMobile()) {
+            this.navigationMode = DocumentListComponent.SINGLE_CLICK_NAVIGATION;
+        }
+    }
 }
diff --git a/ng2-components/ng2-alfresco-documentlist/src/models/content-action.model.ts b/ng2-components/ng2-alfresco-documentlist/src/models/content-action.model.ts
index 00e36b2561..e8523bf156 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/models/content-action.model.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/models/content-action.model.ts
@@ -22,6 +22,7 @@ export class ContentActionModel {
     target: string;
     permission: string;
     disableWithNoPermission: boolean;
+    disabled: boolean;
 
     constructor(obj?: any) {
         if (obj) {

From 6da0eaba373d771e5bb2c96d523a225eef1de33a Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Thu, 11 May 2017 18:08:35 +0100
Subject: [PATCH 30/72] Fix build problem (#1861)

* fix sourcemap
fix relative path and pre publish build
change travis wait
all test run build and remove unused cpx

* global test task
modify publish script to accept options

* appveyor run

* different approach single test run

* make it work the analytics test
modify start demo shell script to use a different registry

* sourcemap demo shell working

* update readme and add install after any clean
add registry option in start.sh script
add develop and normal mode in demo shell
add -d option in start.sh to point to the local components
add -c option in build script to point to the local components
---
 .gitignore                                    |   1 +
 .travis.yml                                   |   4 +-
 appveyor.yml                                  |   4 +-
 demo-shell-ng2/config/webpack.common.js       |   7 +-
 demo-shell-ng2/config/webpack.dev.js          |   5 +
 demo-shell-ng2/config/webpack.prod.js         |   5 +
 demo-shell-ng2/package.json                   |   4 +-
 ng2-components/config/karma.conf-all.js       | 108 +++++++
 ng2-components/config/karma.conf.js           | 114 -------
 ng2-components/config/webpack.common.js       |  30 +-
 ng2-components/config/webpack.test.js         |  20 +-
 ng2-components/karma.conf.js                  |   1 +
 .../ng2-activiti-analytics/karma-test-shim.js |   6 +-
 .../ng2-activiti-analytics/karma.conf.js      | 110 +++++++
 .../ng2-activiti-analytics/package.json       |  60 +++-
 .../analytics-generator.component.spec.ts     | 281 ++++++++++--------
 ...lytics-report-parameters.component.spec.ts |   4 +-
 .../ng2-activiti-analytics/webpack.test.js    |   8 +
 .../ng2-activiti-diagrams/karma-test-shim.js  |   6 +-
 .../ng2-activiti-diagrams/karma.conf.js       | 110 +++++++
 .../ng2-activiti-diagrams/package.json        |  60 +++-
 .../ng2-activiti-diagrams/webpack.test.js     |   8 +
 .../ng2-activiti-form/karma-test-shim.js      |   6 +-
 .../ng2-activiti-form/karma.conf.js           | 110 +++++++
 ng2-components/ng2-activiti-form/package.json |  60 +++-
 .../ng2-activiti-form/webpack.test.js         |   8 +
 .../karma-test-shim.js                        |   6 +-
 .../ng2-activiti-processlist/karma.conf.js    | 110 +++++++
 .../ng2-activiti-processlist/package.json     |  60 +++-
 .../ng2-activiti-processlist/webpack.test.js  |   8 +
 .../ng2-activiti-tasklist/karma-test-shim.js  |   6 +-
 .../ng2-activiti-tasklist/karma.conf.js       | 110 +++++++
 .../ng2-activiti-tasklist/package.json        |  60 +++-
 .../ng2-activiti-tasklist/webpack.test.js     |   8 +
 .../ng2-alfresco-core/karma-test-shim.js      |   6 +-
 .../ng2-alfresco-core/karma.conf.js           | 110 +++++++
 ng2-components/ng2-alfresco-core/package.json |  60 +++-
 .../ng2-alfresco-core/webpack.test.js         |   8 +
 .../ng2-alfresco-datatable/karma-test-shim.js |   6 +-
 .../ng2-alfresco-datatable/karma.conf.js      | 110 +++++++
 .../ng2-alfresco-datatable/package.json       |  60 +++-
 .../ng2-alfresco-datatable/webpack.test.js    |   8 +
 .../karma-test-shim.js                        |   6 +-
 .../ng2-alfresco-documentlist/karma.conf.js   | 110 +++++++
 .../ng2-alfresco-documentlist/package.json    |  60 +++-
 .../ng2-alfresco-documentlist/webpack.test.js |   8 +
 ng2-components/ng2-alfresco-login/README.md   |   4 +-
 .../ng2-alfresco-login/karma-test-shim.js     |   6 +-
 .../ng2-alfresco-login/karma.conf.js          | 110 +++++++
 .../ng2-alfresco-login/package.json           |  61 +++-
 .../ng2-alfresco-login/webpack.test.js        |   8 +
 .../ng2-alfresco-search/karma-test-shim.js    |   6 +-
 .../ng2-alfresco-search/karma.conf.js         | 110 +++++++
 .../ng2-alfresco-search/package.json          |  58 +++-
 .../ng2-alfresco-search/webpack.test.js       |   8 +
 .../ng2-alfresco-social/karma-test-shim.js    |   6 +-
 .../ng2-alfresco-social/karma.conf.js         | 110 +++++++
 .../ng2-alfresco-social/package.json          |  74 ++---
 .../ng2-alfresco-social/webpack.test.js       |   8 +
 .../ng2-alfresco-tag/karma-test-shim.js       |   6 +-
 ng2-components/ng2-alfresco-tag/karma.conf.js | 110 +++++++
 ng2-components/ng2-alfresco-tag/package.json  |  60 +++-
 .../ng2-alfresco-tag/webpack.test.js          |   8 +
 .../ng2-alfresco-upload/karma-test-shim.js    |   6 +-
 .../ng2-alfresco-upload/karma.conf.js         | 110 +++++++
 .../ng2-alfresco-upload/package.json          |  60 +++-
 .../ng2-alfresco-upload/webpack.test.js       |   8 +
 .../ng2-alfresco-userinfo/karma-test-shim.js  |   6 +-
 .../ng2-alfresco-userinfo/karma.conf.js       | 110 +++++++
 .../ng2-alfresco-userinfo/package.json        |  60 +++-
 .../components/user-info.component.spec.ts    | 126 ++++----
 .../ng2-alfresco-userinfo/webpack.test.js     |   8 +
 .../ng2-alfresco-viewer/karma-test-shim.js    |   6 +-
 .../ng2-alfresco-viewer/karma.conf.js         | 107 +++++++
 .../ng2-alfresco-viewer/package.json          |  74 +++--
 .../ng2-alfresco-viewer/webpack.build.js      |   2 +-
 .../ng2-alfresco-viewer/webpack.test.js       |   8 +
 .../ng2-alfresco-webscript/karma-test-shim.js |   6 +-
 .../ng2-alfresco-webscript/karma.conf.js      | 110 +++++++
 .../ng2-alfresco-webscript/package.json       |  63 +++-
 .../ng2-alfresco-webscript/webpack.test.js    |   8 +
 ng2-components/package-base.json              |   7 +-
 ng2-components/package.json                   |  98 +++---
 scripts/README.md                             |  20 +-
 scripts/npm-build-all.sh                      |  32 +-
 scripts/npm-clean.sh                          |   2 +-
 scripts/npm-publish.sh                        |  48 ++-
 scripts/start.sh                              |  79 ++++-
 88 files changed, 3203 insertions(+), 774 deletions(-)
 create mode 100644 ng2-components/config/karma.conf-all.js
 delete mode 100644 ng2-components/config/karma.conf.js
 create mode 100644 ng2-components/karma.conf.js
 create mode 100644 ng2-components/ng2-activiti-analytics/karma.conf.js
 create mode 100644 ng2-components/ng2-activiti-analytics/webpack.test.js
 create mode 100644 ng2-components/ng2-activiti-diagrams/karma.conf.js
 create mode 100644 ng2-components/ng2-activiti-diagrams/webpack.test.js
 create mode 100644 ng2-components/ng2-activiti-form/karma.conf.js
 create mode 100644 ng2-components/ng2-activiti-form/webpack.test.js
 create mode 100644 ng2-components/ng2-activiti-processlist/karma.conf.js
 create mode 100644 ng2-components/ng2-activiti-processlist/webpack.test.js
 create mode 100644 ng2-components/ng2-activiti-tasklist/karma.conf.js
 create mode 100644 ng2-components/ng2-activiti-tasklist/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-core/karma.conf.js
 create mode 100644 ng2-components/ng2-alfresco-core/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-datatable/karma.conf.js
 create mode 100644 ng2-components/ng2-alfresco-datatable/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-documentlist/karma.conf.js
 create mode 100644 ng2-components/ng2-alfresco-documentlist/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-login/karma.conf.js
 create mode 100644 ng2-components/ng2-alfresco-login/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-search/karma.conf.js
 create mode 100644 ng2-components/ng2-alfresco-search/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-social/karma.conf.js
 create mode 100644 ng2-components/ng2-alfresco-social/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-tag/karma.conf.js
 create mode 100644 ng2-components/ng2-alfresco-tag/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-upload/karma.conf.js
 create mode 100644 ng2-components/ng2-alfresco-upload/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-userinfo/karma.conf.js
 create mode 100644 ng2-components/ng2-alfresco-userinfo/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-viewer/karma.conf.js
 create mode 100644 ng2-components/ng2-alfresco-viewer/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-webscript/karma.conf.js
 create mode 100644 ng2-components/ng2-alfresco-webscript/webpack.test.js

diff --git a/.gitignore b/.gitignore
index 96a34ad337..f171571be6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ node_modules
 workspace.xml
 .idea/
 dist/
+ng2-components/coverage/
 !systemjs.config.js
 demo-shell-ng2/app/components/router/
 ng2-components/ng2-alfresco-userinfo-old/demo/src/app/
diff --git a/.travis.yml b/.travis.yml
index 69af6b64e7..63a1d00ba6 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -2,7 +2,7 @@ language: node_js
 dist: trusty
 sudo: false
 node_js:
-  - "5"
+  - "6"
 
 before_install:
   - "export DISPLAY=:99.0"
@@ -15,7 +15,7 @@ env:
 
 script:
   - if ([ "$MODULE" == "ng2-components" ]); then
-        (./scripts/npm-build-all.sh -t;);
+        (./scripts/npm-build-all.sh -t || exit 1;);
     fi
   - if ([ "$MODULE" == "ng2-demo-shell" ]); then
         (cd demo-shell-ng2 && npm install && npm run test || exit 1;);
diff --git a/appveyor.yml b/appveyor.yml
index 74bffe5fad..e65747355b 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -6,7 +6,7 @@ branches:
     - dev-build-test
 
 environment:
-  nodejs_version: "5"
+  nodejs_version: "6"
 
   matrix:
   - COMPONENT_NAME: ng2-components
@@ -17,7 +17,7 @@ install:
   # Get the latest stable version of Node.js or io.js
   - ps: Install-Product node $env:nodejs_version
   # install module
-  - IF %COMPONENT_NAME% EQU ng2-components (./scripts/npm-build-all.sh -t)
+  - IF %COMPONENT_NAME% EQU ng2-components (cd scripts && sh 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.
diff --git a/demo-shell-ng2/config/webpack.common.js b/demo-shell-ng2/config/webpack.common.js
index 823be9bd44..4c2374ddb9 100644
--- a/demo-shell-ng2/config/webpack.common.js
+++ b/demo-shell-ng2/config/webpack.common.js
@@ -41,7 +41,7 @@ module.exports = {
             {
                 enforce: 'pre',
                 test: /\.js$/,
-                include: [helpers.root('app')],
+                include: [helpers.root('app'), helpers.root('../ng2-components')],
                 loader: 'source-map-loader',
                 exclude: [ /node_modules/, /public/, /resources/, /dist/]
             },
@@ -105,10 +105,7 @@ module.exports = {
             }
         ]
     },
-    resolve: {
-        extensions: ['.ts', '.js'],
-        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
-    },
+
     plugins: [
         // Workaround for angular/angular#11580
         new webpack.ContextReplacementPlugin(
diff --git a/demo-shell-ng2/config/webpack.dev.js b/demo-shell-ng2/config/webpack.dev.js
index 654d3b8b7b..a0192ecaed 100644
--- a/demo-shell-ng2/config/webpack.dev.js
+++ b/demo-shell-ng2/config/webpack.dev.js
@@ -6,6 +6,11 @@ const helpers = require('./helpers');
 module.exports = webpackMerge(commonConfig, {
     devtool: 'cheap-module-eval-source-map',
 
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
     output: {
         path: helpers.root('dist'),
         filename: '[name].js',
diff --git a/demo-shell-ng2/config/webpack.prod.js b/demo-shell-ng2/config/webpack.prod.js
index 600823350e..d39bcc9dc8 100644
--- a/demo-shell-ng2/config/webpack.prod.js
+++ b/demo-shell-ng2/config/webpack.prod.js
@@ -16,6 +16,11 @@ module.exports = webpackMerge(commonConfig, {
         chunkFilename: '[id].[hash].chunk.js'
     },
 
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
     plugins: [
         new webpack.NoEmitOnErrorsPlugin(),
         new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index cadb3a3afd..6e5d338e43 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -5,8 +5,10 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "build": "rimraf dist && 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",
+    "build:dev": "rimraf dist && webpack --config config/webpack.dev.js --progress --profile --bail",
     "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run server-versions && node --max_old_space_size=4096 webpack-dev-server --progress -config config/webpack.prod.js",
+    "start:dev": "npm run server-versions && node --max_old_space_size=4096 webpack-dev-server --progress -config config/webpack.dev.js",
     "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'",
diff --git a/ng2-components/config/karma.conf-all.js b/ng2-components/config/karma.conf-all.js
new file mode 100644
index 0000000000..fd07cca849
--- /dev/null
+++ b/ng2-components/config/karma.conf-all.js
@@ -0,0 +1,108 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+    var _config = {
+        basePath: '../ng2-components',
+
+        frameworks: ['jasmine-ajax', 'jasmine'],
+
+        files: [
+            {pattern: './node_modules/hammerjs/hammer.js', included: true, watched: false},
+
+            //diagrams
+            {pattern: './node_modules/chart.js/dist/Chart.js', included: true, watched: false},
+            {pattern: './node_modules/alfresco-js-api/dist/alfresco-js-api.js', included: true, watched: false},
+            {pattern: './node_modules/raphael/raphael.js', included: true, watched: false},
+            {pattern: './node_modules/moment/min/moment.min.js', included: true, watched: false},
+            {pattern: './node_modules/md-date-time-picker/dist/js/mdDateTimePicker.js', included: true, watched: false},
+
+            {pattern: './node_modules/ng2-translate/ng2-translate.js', included: false, watched: false},
+            {pattern: './node_modules/ng2-charts/bundles/ng2-charts.umd.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:  config.component +'/karma-test-shim.js', watched: false},
+            {pattern: './ng2-**/src/assets/**/*.*', included: false, served: true, watched: false},
+            {pattern: './ng2-**/src/**/*.ts', included: false, served: true, watched: false}
+        ],
+
+        webpack: webpackConfig,
+
+        webpackMiddleware: {
+            noInfo: true,
+            stats: {
+                chunks: false
+            }
+        },
+
+        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: false,
+
+        captureTimeout: 1800000,
+        browserDisconnectTimeout: 1800000,
+        browserDisconnectTolerance: 10,
+        browserNoActivityTimeout: 3000000,
+
+        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'],
+            '(ng2-alfresco|ng2-activiti)/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) {
+        config.browsers = ['Chrome_travis_ci'];
+    }
+
+    config.set(_config);
+};
diff --git a/ng2-components/config/karma.conf.js b/ng2-components/config/karma.conf.js
deleted file mode 100644
index 5cfbeb6d87..0000000000
--- a/ng2-components/config/karma.conf.js
+++ /dev/null
@@ -1,114 +0,0 @@
-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.common.js b/ng2-components/config/webpack.common.js
index 80773b1f73..95cd33177e 100644
--- a/ng2-components/config/webpack.common.js
+++ b/ng2-components/config/webpack.common.js
@@ -17,6 +17,7 @@ module.exports = {
         /^\@angular\//,
         /^rxjs\//,
         'moment',
+        'raphael',
         'ng2-charts',
         'alfresco-js-api',
         'ng2-alfresco-core',
@@ -39,17 +40,17 @@ module.exports = {
             {
                 enforce: 'pre',
                 test: /\.ts$/,
-                loader: 'tslint-loader',
-                options: {
-                    emitErrors: true,
-                    configFile: path.resolve(__dirname, './assets/tslint.json')
-                },
+                use: 'source-map-loader',
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
             {
                 enforce: 'pre',
                 test: /\.ts$/,
-                use: 'source-map-loader',
+                loader: 'tslint-loader',
+                options: {
+                    emitErrors: true,
+                    configFile: path.resolve(__dirname, './assets/tslint.json')
+                },
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
             {
@@ -107,20 +108,11 @@ module.exports = {
 
         new webpack.BannerPlugin(fs.readFileSync(path.resolve(__dirname, './assets/license_header_add.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
-            }
-        })
-
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
     ],
 
     devtool: 'cheap-module-source-map',
diff --git a/ng2-components/config/webpack.test.js b/ng2-components/config/webpack.test.js
index 3893598d18..486fed8c15 100644
--- a/ng2-components/config/webpack.test.js
+++ b/ng2-components/config/webpack.test.js
@@ -23,7 +23,7 @@ module.exports = {
             },
             {
                 test: /\.ts$/,
-                loaders: ['ts-loader', 'angular2-template-loader'],
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), 'angular2-template-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
             {
@@ -52,8 +52,7 @@ module.exports = {
                 loader: 'istanbul-instrumenter-loader',
                 exclude: [
                     /node_modules/,
-                    /test/,
-                    /spec\.ts$/
+                    /test/
                 ]
             }
         ]
@@ -62,12 +61,10 @@ module.exports = {
     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
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
         ),
         new webpack.DefinePlugin({
             'process.env': {
@@ -75,11 +72,10 @@ module.exports = {
             }
         }),
         new webpack.LoaderOptionsPlugin({
-            htmlLoader: {
-                minimize: false // workaround for ng2
-            }
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
         })
-
     ],
 
     node: {
diff --git a/ng2-components/karma.conf.js b/ng2-components/karma.conf.js
new file mode 100644
index 0000000000..28ded64e4a
--- /dev/null
+++ b/ng2-components/karma.conf.js
@@ -0,0 +1 @@
+module.exports = require('./config/karma.conf-all.js');
diff --git a/ng2-components/ng2-activiti-analytics/karma-test-shim.js b/ng2-components/ng2-activiti-analytics/karma-test-shim.js
index bd31cd0284..a09906cdc6 100644
--- a/ng2-components/ng2-activiti-analytics/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-analytics/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-activiti-analytics/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-activiti-analytics/karma.conf.js b/ng2-components/ng2-activiti-analytics/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json
index 1602b740e2..fb4856090f 100644
--- a/ng2-components/ng2-activiti-analytics/package.json
+++ b/ng2-components/ng2-activiti-analytics/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-activiti-analytics.js",
   "contributors": [
@@ -63,18 +60,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "^3.8.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "keywords": [
     "tag",
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts
index 27052caaef..1d77731e12 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts
@@ -72,7 +72,9 @@ describe('AnalyticsGeneratorComponent', () => {
 
         let translateService = TestBed.get(AlfrescoTranslationService);
         spyOn(translateService, 'addTranslationFolder').and.stub();
-        spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
+        spyOn(translateService, 'get').and.callFake((key) => {
+            return Observable.of(key);
+        });
     }));
 
     beforeEach(() => {
@@ -80,184 +82,201 @@ describe('AnalyticsGeneratorComponent', () => {
         component = fixture.componentInstance;
         debug = fixture.debugElement;
         element = fixture.nativeElement;
-        fixture.detectChanges();
         componentHandler = jasmine.createSpyObj('componentHandler', [
             'upgradeAllRegistered'
         ]);
         window['componentHandler'] = componentHandler;
+
+        fixture.detectChanges();
+
+        jasmine.Ajax.install();
     });
 
-    describe('Rendering tests', () => {
-        beforeEach(() => {
-            jasmine.Ajax.install();
+    afterEach(() => {
+        jasmine.Ajax.uninstall();
+    });
+
+    it('Should render the Process definition overview report ', (done) => {
+        component.onSuccess.subscribe((res) => {
+            expect(res).toBeDefined();
+            expect(res.length).toEqual(3);
+
+            expect(res[0]).toBeDefined();
+            expect(res[0].type).toEqual('table');
+            expect(res[0].datasets).toBeDefined();
+            expect(res[0].datasets.length).toEqual(4);
+            expect(res[0].datasets[0][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-DEFINITIONS');
+            expect(res[0].datasets[0][1]).toEqual('9');
+            expect(res[0].datasets[1][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-INSTANCES');
+            expect(res[0].datasets[1][1]).toEqual('41');
+            expect(res[0].datasets[2][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-ACTIVE-PROCESS-INSTANCES');
+            expect(res[0].datasets[2][1]).toEqual('3');
+            expect(res[0].datasets[3][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-COMPLETED-PROCESS-INSTANCES');
+            expect(res[0].datasets[3][1]).toEqual('38');
+
+            expect(res[1]).toBeDefined();
+            expect(res[1].type).toEqual('pie');
+
+            expect(res[2]).toBeDefined();
+            expect(res[2].type).toEqual('table');
+
+            done();
         });
 
-        afterEach(() => {
-            jasmine.Ajax.uninstall();
-        });
+        component.reportId = 1001;
+        component.reportParamQuery = new ReportQuery({status: 'All'});
+        component.ngOnChanges();
 
-        it('Should render the Process definition overview report ', (done) => {
-            component.onSuccess.subscribe((res) => {
-                expect(res).toBeDefined();
-                expect(res.length).toEqual(3);
-
-                expect(res[0]).toBeDefined();
-                expect(res[0].type).toEqual('table');
-                expect(res[0].datasets).toBeDefined();
-                expect(res[0].datasets.length).toEqual(4);
-                expect(res[0].datasets[0][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-DEFINITIONS');
-                expect(res[0].datasets[0][1]).toEqual('9');
-                expect(res[0].datasets[1][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-INSTANCES');
-                expect(res[0].datasets[1][1]).toEqual('41');
-                expect(res[0].datasets[2][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-ACTIVE-PROCESS-INSTANCES');
-                expect(res[0].datasets[2][1]).toEqual('3');
-                expect(res[0].datasets[3][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-COMPLETED-PROCESS-INSTANCES');
-                expect(res[0].datasets[3][1]).toEqual('38');
-
-                expect(res[1]).toBeDefined();
-                expect(res[1].type).toEqual('pie');
-
-                expect(res[2]).toBeDefined();
-                expect(res[2].type).toEqual('table');
-
-                done();
-            });
-
-            let reportId = 1001;
-            let reportParamQuery = new ReportQuery({status: 'All'});
-
-            component.generateReport(reportId, reportParamQuery);
+        fixture.detectChanges();
 
+        fixture.whenStable().then(() => {
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
                 contentType: 'json',
                 responseText: analyticMock.chartProcessDefOverview
             });
         });
+    });
 
-        it('Should render the Process definition overview report when onchanges is called ', (done) => {
-            component.onSuccess.subscribe((res) => {
-                expect(res).toBeDefined();
-                expect(res.length).toEqual(3);
+    it('Should render the Process definition overview report when onchanges is called ', (done) => {
+        component.onSuccess.subscribe((res) => {
+            expect(res).toBeDefined();
+            expect(res.length).toEqual(3);
 
-                expect(res[0]).toBeDefined();
-                expect(res[0].type).toEqual('table');
-                expect(res[0].datasets).toBeDefined();
-                expect(res[0].datasets.length).toEqual(4);
-                expect(res[0].datasets[0][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-DEFINITIONS');
-                expect(res[0].datasets[0][1]).toEqual('9');
-                expect(res[0].datasets[1][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-INSTANCES');
-                expect(res[0].datasets[1][1]).toEqual('41');
-                expect(res[0].datasets[2][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-ACTIVE-PROCESS-INSTANCES');
-                expect(res[0].datasets[2][1]).toEqual('3');
-                expect(res[0].datasets[3][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-COMPLETED-PROCESS-INSTANCES');
-                expect(res[0].datasets[3][1]).toEqual('38');
+            expect(res[0]).toBeDefined();
+            expect(res[0].type).toEqual('table');
+            expect(res[0].datasets).toBeDefined();
+            expect(res[0].datasets.length).toEqual(4);
+            expect(res[0].datasets[0][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-DEFINITIONS');
+            expect(res[0].datasets[0][1]).toEqual('9');
+            expect(res[0].datasets[1][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-INSTANCES');
+            expect(res[0].datasets[1][1]).toEqual('41');
+            expect(res[0].datasets[2][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-ACTIVE-PROCESS-INSTANCES');
+            expect(res[0].datasets[2][1]).toEqual('3');
+            expect(res[0].datasets[3][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-COMPLETED-PROCESS-INSTANCES');
+            expect(res[0].datasets[3][1]).toEqual('38');
 
-                expect(res[1]).toBeDefined();
-                expect(res[1].type).toEqual('pie');
+            expect(res[1]).toBeDefined();
+            expect(res[1].type).toEqual('pie');
 
-                expect(res[2]).toBeDefined();
-                expect(res[2].type).toEqual('table');
+            expect(res[2]).toBeDefined();
+            expect(res[2].type).toEqual('table');
 
-                done();
-            });
+            done();
+        });
 
-            component.reportId = 1001;
-            component.reportParamQuery = new ReportQuery({status: 'All'});
-            component.ngOnChanges();
+        component.reportId = 1001;
+        component.reportParamQuery = new ReportQuery({status: 'All'});
+        component.ngOnChanges();
 
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
                 contentType: 'json',
                 responseText: analyticMock.chartProcessDefOverview
             });
         });
+    });
 
-        it('Should render the Task overview report ', (done) => {
-            component.onSuccess.subscribe((res) => {
-                expect(res).toBeDefined();
-                expect(res.length).toEqual(3);
+    it('Should render the Task overview report ', (done) => {
+        component.onSuccess.subscribe((res) => {
+            expect(res).toBeDefined();
+            expect(res.length).toEqual(3);
 
-                expect(res[0]).toBeDefined();
-                expect(res[0].type).toEqual('bar');
-                expect(res[0].labels).toBeDefined();
-                expect(res[0].labels.length).toEqual(2);
-                expect(res[0].labels[0]).toEqual('2016-09-30T00:00:00.000+0000');
-                expect(res[0].labels[1]).toEqual('2016-10-04T00:00:00.000+0000');
-                expect(res[0].datasets[0].label).toEqual('series1');
-                expect(res[0].datasets[0].data[0]).toEqual(3);
-                expect(res[0].datasets[0].data[1]).toEqual(1);
+            expect(res[0]).toBeDefined();
+            expect(res[0].type).toEqual('bar');
+            expect(res[0].labels).toBeDefined();
+            expect(res[0].labels.length).toEqual(2);
+            expect(res[0].labels[0]).toEqual('2016-09-30T00:00:00.000+0000');
+            expect(res[0].labels[1]).toEqual('2016-10-04T00:00:00.000+0000');
+            expect(res[0].datasets[0].label).toEqual('series1');
+            expect(res[0].datasets[0].data[0]).toEqual(3);
+            expect(res[0].datasets[0].data[1]).toEqual(1);
 
-                expect(res[1]).toBeDefined();
-                expect(res[1].type).toEqual('masterDetailTable');
-                expect(res[1].datasets).toBeDefined();
-                expect(res[1].datasets.length).toEqual(2);
-                expect(res[1].datasets[0][0]).toEqual('fake 1 user task');
-                expect(res[1].datasets[0][1]).toEqual('1');
-                expect(res[1].datasets[0][2]).toEqual('2.0');
-                expect(res[1].datasets[0][3]).toEqual('3.0');
-                expect(res[1].datasets[0][4]).toEqual('4.0');
-                expect(res[1].datasets[0][5]).toEqual('5.0');
-                expect(res[1].datasets[0][6]).toEqual('6.0');
-                expect(res[1].datasets[1][0]).toEqual('fake 2 user task');
-                expect(res[1].datasets[1][1]).toEqual('1');
-                expect(res[1].datasets[1][2]).toEqual('2.0');
-                expect(res[1].datasets[1][3]).toEqual('3.0');
-                expect(res[1].datasets[1][4]).toEqual('4.0');
-                expect(res[1].datasets[1][5]).toEqual('5.0');
-                expect(res[1].datasets[1][6]).toEqual('6.0');
+            expect(res[1]).toBeDefined();
+            expect(res[1].type).toEqual('masterDetailTable');
+            expect(res[1].datasets).toBeDefined();
+            expect(res[1].datasets.length).toEqual(2);
+            expect(res[1].datasets[0][0]).toEqual('fake 1 user task');
+            expect(res[1].datasets[0][1]).toEqual('1');
+            expect(res[1].datasets[0][2]).toEqual('2.0');
+            expect(res[1].datasets[0][3]).toEqual('3.0');
+            expect(res[1].datasets[0][4]).toEqual('4.0');
+            expect(res[1].datasets[0][5]).toEqual('5.0');
+            expect(res[1].datasets[0][6]).toEqual('6.0');
+            expect(res[1].datasets[1][0]).toEqual('fake 2 user task');
+            expect(res[1].datasets[1][1]).toEqual('1');
+            expect(res[1].datasets[1][2]).toEqual('2.0');
+            expect(res[1].datasets[1][3]).toEqual('3.0');
+            expect(res[1].datasets[1][4]).toEqual('4.0');
+            expect(res[1].datasets[1][5]).toEqual('5.0');
+            expect(res[1].datasets[1][6]).toEqual('6.0');
 
-                expect(res[2]).toBeDefined();
-                expect(res[2].type).toEqual('multiBar');
-                expect(res[2].labels).toBeDefined();
-                expect(res[2].labels.length).toEqual(3);
-                expect(res[2].labels[0]).toEqual(1);
-                expect(res[2].labels[1]).toEqual(2);
-                expect(res[2].labels[2]).toEqual(3);
-                expect(res[2].datasets[0].label).toEqual('averages');
-                expect(res[2].datasets[0].data[0]).toEqual(0);
-                expect(res[2].datasets[0].data[1]).toEqual(5);
-                expect(res[2].datasets[0].data[2]).toEqual(2);
-                expect(res[2].datasets[1].label).toEqual('minima');
-                expect(res[2].datasets[1].data[0]).toEqual(0);
-                expect(res[2].datasets[1].data[1]).toEqual(0);
-                expect(res[2].datasets[1].data[2]).toEqual(0);
-                expect(res[2].datasets[2].label).toEqual('maxima');
-                expect(res[2].datasets[2].data[0]).toEqual(0);
-                expect(res[2].datasets[2].data[1]).toEqual(29);
-                expect(res[2].datasets[2].data[2]).toEqual(29);
+            expect(res[2]).toBeDefined();
+            expect(res[2].type).toEqual('multiBar');
+            expect(res[2].labels).toBeDefined();
+            expect(res[2].labels.length).toEqual(3);
+            expect(res[2].labels[0]).toEqual(1);
+            expect(res[2].labels[1]).toEqual(2);
+            expect(res[2].labels[2]).toEqual(3);
+            expect(res[2].datasets[0].label).toEqual('averages');
+            expect(res[2].datasets[0].data[0]).toEqual(0);
+            expect(res[2].datasets[0].data[1]).toEqual(5);
+            expect(res[2].datasets[0].data[2]).toEqual(2);
+            expect(res[2].datasets[1].label).toEqual('minima');
+            expect(res[2].datasets[1].data[0]).toEqual(0);
+            expect(res[2].datasets[1].data[1]).toEqual(0);
+            expect(res[2].datasets[1].data[2]).toEqual(0);
+            expect(res[2].datasets[2].label).toEqual('maxima');
+            expect(res[2].datasets[2].data[0]).toEqual(0);
+            expect(res[2].datasets[2].data[1]).toEqual(29);
+            expect(res[2].datasets[2].data[2]).toEqual(29);
 
-                done();
-            });
+            done();
+        });
 
-            let reportParamQuery = new ReportQuery({status: 'All'});
-            component.reportId = 1;
-            component.generateReport(reportParamQuery);
+        component.reportId = 1;
+        component.reportParamQuery = new ReportQuery({status: 'All'});
+        component.ngOnChanges();
 
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
                 contentType: 'json',
                 responseText: analyticMock.chartTaskOverview
             });
         });
+    });
 
-        it('Should reset the reports when the onChanged is call', () => {
-            component.reports = [ new Chart({id: 'fake', type: 'fake-type'})];
-            component.reportId = 1;
-            component.ngOnChanges();
+    it('Should reset the reports when the onChanged is call', () => {
+        component.reports = [new Chart({id: 'fake', type: 'fake-type'})];
+        component.reportId = 1;
+        component.ngOnChanges();
+
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
             expect(component.reports).toBeUndefined();
         });
+    });
 
-        it('Should emit onError event with a 404 response ', (done) => {
-            component.onError.subscribe((err) => {
-                expect(err).toBeDefined();
-                done();
-            });
+    it('Should emit onError event with a 404 response ', (done) => {
+        component.onError.subscribe((err) => {
+            expect(err).toBeDefined();
+            done();
+        });
 
-            let reportParamQuery = new ReportQuery({status: 'All'});
-            component.reportId = 1;
-            component.generateReport(reportParamQuery);
+        component.reportId = 1;
+        component.reportParamQuery = new ReportQuery({status: 'All'});
+        component.ngOnChanges();
 
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 404,
                 contentType: 'json',
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 3b6deed822..7fc8734875 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
@@ -462,11 +462,13 @@ describe('AnalyticsReportParametersComponent', () => {
                 let change = new SimpleChange(null, reportId, true);
                 component.ngOnChanges({ 'reportId': change });
                 fixture.detectChanges();
+
                 jasmine.Ajax.requests.mostRecent().respondWith({
                     status: 200,
                     contentType: 'json',
                     responseText: analyticParamsMock.reportDefParamStatus
                 });
+
                 fixture.whenStable().then(() => {
                     component.toggleParameters();
                     component.reportId = '1';
@@ -481,7 +483,7 @@ describe('AnalyticsReportParametersComponent', () => {
                 validForm = true;
             });
 
-            it('Should be able to change the report title', (done) => {
+            xit('Should be able to change the report title', (done) => {
 
                 let title: HTMLElement = element.querySelector('h4');
                 title.click();
diff --git a/ng2-components/ng2-activiti-analytics/webpack.test.js b/ng2-components/ng2-activiti-analytics/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-activiti-diagrams/karma-test-shim.js b/ng2-components/ng2-activiti-diagrams/karma-test-shim.js
index 8bc60175b2..a09906cdc6 100644
--- a/ng2-components/ng2-activiti-diagrams/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-diagrams/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-activiti-diagrams/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-activiti-diagrams/karma.conf.js b/ng2-components/ng2-activiti-diagrams/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-activiti-diagrams/package.json b/ng2-components/ng2-activiti-diagrams/package.json
index 2e3fa1eaf7..b0afdc37b8 100644
--- a/ng2-components/ng2-activiti-diagrams/package.json
+++ b/ng2-components/ng2-activiti-diagrams/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-activiti-diagrams.js",
   "contributors": [
@@ -54,18 +51,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "^3.8.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "keywords": [
     "tag",
diff --git a/ng2-components/ng2-activiti-diagrams/webpack.test.js b/ng2-components/ng2-activiti-diagrams/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-activiti-form/karma-test-shim.js b/ng2-components/ng2-activiti-form/karma-test-shim.js
index 1fe35e272a..a09906cdc6 100644
--- a/ng2-components/ng2-activiti-form/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-form/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-activiti-form/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-activiti-form/karma.conf.js b/ng2-components/ng2-activiti-form/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-activiti-form/package.json b/ng2-components/ng2-activiti-form/package.json
index 6238621ad6..0c55c2263e 100644
--- a/ng2-components/ng2-activiti-form/package.json
+++ b/ng2-components/ng2-activiti-form/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-activiti-form.js",
   "repository": {
@@ -62,18 +59,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "^3.8.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "license-check-config": {
     "src": [
diff --git a/ng2-components/ng2-activiti-form/webpack.test.js b/ng2-components/ng2-activiti-form/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-activiti-processlist/karma-test-shim.js b/ng2-components/ng2-activiti-processlist/karma-test-shim.js
index 4639fe986a..a09906cdc6 100644
--- a/ng2-components/ng2-activiti-processlist/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-processlist/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-activiti-processlist/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-activiti-processlist/karma.conf.js b/ng2-components/ng2-activiti-processlist/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-activiti-processlist/package.json b/ng2-components/ng2-activiti-processlist/package.json
index ffe4c2cc59..eab4799cf7 100644
--- a/ng2-components/ng2-activiti-processlist/package.json
+++ b/ng2-components/ng2-activiti-processlist/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-activiti-processlist.js",
   "repository": {
@@ -64,18 +61,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "^3.8.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "license-check-config": {
     "src": [
diff --git a/ng2-components/ng2-activiti-processlist/webpack.test.js b/ng2-components/ng2-activiti-processlist/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-activiti-tasklist/karma-test-shim.js b/ng2-components/ng2-activiti-tasklist/karma-test-shim.js
index a18cfe9c2c..a09906cdc6 100644
--- a/ng2-components/ng2-activiti-tasklist/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-tasklist/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-activiti-tasklist/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-activiti-tasklist/karma.conf.js b/ng2-components/ng2-activiti-tasklist/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-activiti-tasklist/package.json b/ng2-components/ng2-activiti-tasklist/package.json
index f723e8f4db..ec2cef9b51 100644
--- a/ng2-components/ng2-activiti-tasklist/package.json
+++ b/ng2-components/ng2-activiti-tasklist/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-activiti-tasklist.js",
   "repository": {
@@ -68,18 +65,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "license-check-config": {
     "src": [
diff --git a/ng2-components/ng2-activiti-tasklist/webpack.test.js b/ng2-components/ng2-activiti-tasklist/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-alfresco-core/karma-test-shim.js b/ng2-components/ng2-alfresco-core/karma-test-shim.js
index 3fd44b2d86..a09906cdc6 100644
--- a/ng2-components/ng2-alfresco-core/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-core/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-alfresco-core/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-alfresco-core/karma.conf.js b/ng2-components/ng2-alfresco-core/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-alfresco-core/package.json b/ng2-components/ng2-alfresco-core/package.json
index 390c092c63..02694955f9 100644
--- a/ng2-components/ng2-alfresco-core/package.json
+++ b/ng2-components/ng2-alfresco-core/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-alfresco-core.js",
   "repository": {
@@ -74,18 +71,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "license-check-config": {
     "src": [
diff --git a/ng2-components/ng2-alfresco-core/webpack.test.js b/ng2-components/ng2-alfresco-core/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-alfresco-datatable/karma-test-shim.js b/ng2-components/ng2-alfresco-datatable/karma-test-shim.js
index fca731ab6b..a09906cdc6 100644
--- a/ng2-components/ng2-alfresco-datatable/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-datatable/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-alfresco-datatable/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-alfresco-datatable/karma.conf.js b/ng2-components/ng2-alfresco-datatable/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json
index 90f17f4484..53d069c26e 100644
--- a/ng2-components/ng2-alfresco-datatable/package.json
+++ b/ng2-components/ng2-alfresco-datatable/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-alfresco-datatable.js",
   "repository": {
@@ -60,18 +57,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "license-check-config": {
     "src": [
diff --git a/ng2-components/ng2-alfresco-datatable/webpack.test.js b/ng2-components/ng2-alfresco-datatable/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js b/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js
index f7be58e211..a09906cdc6 100644
--- a/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-alfresco-documentlist/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-alfresco-documentlist/karma.conf.js b/ng2-components/ng2-alfresco-documentlist/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json
index e4152094da..f942497c52 100644
--- a/ng2-components/ng2-alfresco-documentlist/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-alfresco-documentlist.js",
   "repository": {
@@ -69,18 +66,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "license-check-config": {
     "src": [
diff --git a/ng2-components/ng2-alfresco-documentlist/webpack.test.js b/ng2-components/ng2-alfresco-documentlist/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md
index 98921b5be6..d06660d9e5 100644
--- a/ng2-components/ng2-alfresco-login/README.md
+++ b/ng2-components/ng2-alfresco-login/README.md
@@ -166,8 +166,8 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 | `logoImageUrl` | string | Alfresco logo image | To change the logo image with a customised image |
 | `backgroundImageUrl` | string | Alfresco background image | To change the background image with a customised image |
 | `fieldsValidation` | { [key: string]: any; }, extra?: { [key: string]: any; } |  | Use it to customise the validation rules of the login form |
-| `showRememberMe` | boolean | true | Toggle `Remember me` checkbox visibility |
-| `showLoginActions` | boolean | true | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
+| `showRememberMe` | boolean | false | Toggle `Remember me` checkbox visibility |
+| `showLoginActions` | boolean | false | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
 
 #### Events
 
diff --git a/ng2-components/ng2-alfresco-login/karma-test-shim.js b/ng2-components/ng2-alfresco-login/karma-test-shim.js
index f9bb186595..a09906cdc6 100644
--- a/ng2-components/ng2-alfresco-login/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-login/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-alfresco-login/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-alfresco-login/karma.conf.js b/ng2-components/ng2-alfresco-login/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-alfresco-login/package.json b/ng2-components/ng2-alfresco-login/package.json
index bd57a3d986..3645169ca9 100644
--- a/ng2-components/ng2-alfresco-login/package.json
+++ b/ng2-components/ng2-alfresco-login/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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": "../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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-alfresco-login.js",
   "repository": {
@@ -71,19 +68,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "license-check-config": {
     "src": [
diff --git a/ng2-components/ng2-alfresco-login/webpack.test.js b/ng2-components/ng2-alfresco-login/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-alfresco-search/karma-test-shim.js b/ng2-components/ng2-alfresco-search/karma-test-shim.js
index 47bc89a346..a09906cdc6 100644
--- a/ng2-components/ng2-alfresco-search/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-search/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-alfresco-search/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-alfresco-search/karma.conf.js b/ng2-components/ng2-alfresco-search/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-alfresco-search/package.json b/ng2-components/ng2-alfresco-search/package.json
index 65c7856605..310a41da92 100644
--- a/ng2-components/ng2-alfresco-search/package.json
+++ b/ng2-components/ng2-alfresco-search/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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",
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "publish:prod": "npm run test && npm publish"
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-alfresco-search.js",
   "repository": {
@@ -70,18 +67,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "license-check-config": {
     "src": [
diff --git a/ng2-components/ng2-alfresco-search/webpack.test.js b/ng2-components/ng2-alfresco-search/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-alfresco-social/karma-test-shim.js b/ng2-components/ng2-alfresco-social/karma-test-shim.js
index 8aa8c354b0..a09906cdc6 100644
--- a/ng2-components/ng2-alfresco-social/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-social/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-alfresco-social/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-alfresco-social/karma.conf.js b/ng2-components/ng2-alfresco-social/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-alfresco-social/package.json b/ng2-components/ng2-alfresco-social/package.json
index 7a480c3150..4e5281439c 100644
--- a/ng2-components/ng2-alfresco-social/package.json
+++ b/ng2-components/ng2-alfresco-social/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-alfresco-social.js",
   "repository": {
@@ -47,46 +44,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "concurrently": "^2.2.0",
-    "cpx": "^1.3.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
     "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",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
     "jasmine-ajax": "^3.2.0",
     "jasmine-core": "2.4.1",
-    "karma": "~0.13.22",
+    "karma": "^0.13.22",
     "karma-chrome-launcher": "~1.0.1",
-    "karma-coverage": "^1.0.0",
+    "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.0.3",
-    "license-check": "^1.0.4",
+    "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",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
     "remap-istanbul": "^0.6.3",
-    "rimraf": "2.5.2",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "^3.8.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "keywords": [
     "rating",
diff --git a/ng2-components/ng2-alfresco-social/webpack.test.js b/ng2-components/ng2-alfresco-social/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-alfresco-tag/karma-test-shim.js b/ng2-components/ng2-alfresco-tag/karma-test-shim.js
index cf6e0b8fbe..a09906cdc6 100644
--- a/ng2-components/ng2-alfresco-tag/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-tag/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-alfresco-tag/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-alfresco-tag/karma.conf.js b/ng2-components/ng2-alfresco-tag/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-alfresco-tag/package.json b/ng2-components/ng2-alfresco-tag/package.json
index 11767674e8..f141d4cd2c 100644
--- a/ng2-components/ng2-alfresco-tag/package.json
+++ b/ng2-components/ng2-alfresco-tag/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-alfresco-tag.js",
   "repository": {
@@ -47,18 +44,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "keywords": [
     "tag",
diff --git a/ng2-components/ng2-alfresco-tag/webpack.test.js b/ng2-components/ng2-alfresco-tag/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-alfresco-upload/karma-test-shim.js b/ng2-components/ng2-alfresco-upload/karma-test-shim.js
index 40751756b9..a09906cdc6 100644
--- a/ng2-components/ng2-alfresco-upload/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-upload/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-alfresco-upload/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-alfresco-upload/karma.conf.js b/ng2-components/ng2-alfresco-upload/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-alfresco-upload/package.json b/ng2-components/ng2-alfresco-upload/package.json
index 02172f7440..9397c54744 100644
--- a/ng2-components/ng2-alfresco-upload/package.json
+++ b/ng2-components/ng2-alfresco-upload/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-alfresco-upload.js",
   "repository": {
@@ -69,18 +66,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "license-check-config": {
     "src": [
diff --git a/ng2-components/ng2-alfresco-upload/webpack.test.js b/ng2-components/ng2-alfresco-upload/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js b/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js
index f1f4095a4b..a09906cdc6 100644
--- a/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-alfresco-userinfo/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-alfresco-userinfo/karma.conf.js b/ng2-components/ng2-alfresco-userinfo/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-alfresco-userinfo/package.json b/ng2-components/ng2-alfresco-userinfo/package.json
index b1e499cd0c..8dd91e1b9d 100644
--- a/ng2-components/ng2-alfresco-userinfo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-alfresco-userinfo.js",
   "repository": {
@@ -47,18 +44,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
     "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "keywords": [
     "userinfo",
diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts
index ce3c8ad328..44629559ff 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts
@@ -54,7 +54,7 @@ describe('User info component', () => {
             providers: [
                 EcmUserService,
                 BpmUserService,
-                { provide: AlfrescoTranslationService, useClass: TranslationMock }
+                {provide: AlfrescoTranslationService, useClass: TranslationMock}
             ]
         }).compileComponents().then(() => {
             fixture = TestBed.createComponent(UserInfoComponent);
@@ -105,7 +105,7 @@ describe('User info component', () => {
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
                 contentType: 'application/json',
-                responseText: JSON.stringify({ entry: fakeEcmEditedUser })
+                responseText: JSON.stringify({entry: fakeEcmEditedUser})
             });
 
             fixture.whenStable().then(() => {
@@ -125,7 +125,7 @@ describe('User info component', () => {
                 jasmine.Ajax.requests.mostRecent().respondWith({
                     status: 200,
                     contentType: 'application/json',
-                    responseText: JSON.stringify({ entry: fakeEcmUser })
+                    responseText: JSON.stringify({entry: fakeEcmUser})
                 });
             }));
 
@@ -160,7 +160,7 @@ describe('User info component', () => {
                 jasmine.Ajax.requests.mostRecent().respondWith({
                     status: 200,
                     contentType: 'application/json',
-                    responseText: JSON.stringify({ entry: fakeEcmUserNoImage })
+                    responseText: JSON.stringify({entry: fakeEcmUserNoImage})
                 });
             }));
 
@@ -181,88 +181,110 @@ describe('User info component', () => {
 
     describe('when user is logged on bpm', () => {
 
-        beforeEach(() => {
+        beforeEach(async(() => {
             spyOn(stubAuthService, 'isBpmLoggedIn').and.returnValue(true);
             spyOn(stubAuthService, 'isLoggedIn').and.returnValue(true);
             jasmine.Ajax.install();
+
+            userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
+        }));
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
         });
 
-        beforeEach(async(() => {
-            userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
+        it('should show full name next the user image', () => {
             fixture.detectChanges();
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
                 contentType: 'application/json',
                 responseText: JSON.stringify(fakeBpmUser)
             });
-        }));
 
-        beforeEach(() => {
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('#userinfo_container')).toBeDefined();
+                expect(element.querySelector('#bpm-username')).toBeDefined();
+                expect(element.querySelector('#bpm-username').innerHTML).toContain('fake-bpm-first-name fake-bpm-last-name');
+            });
+        });
+
+        it('should get the bpm current user image from the service', () => {
             fixture.detectChanges();
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'application/json',
+                responseText: JSON.stringify(fakeBpmUser)
+            });
+
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('#userinfo_container')).toBeDefined();
+                expect(element.querySelector('#logged-user-img')).toBeDefined();
+                expect(element.querySelector('#logged-user-img').getAttribute('src'))
+                    .toContain('activiti-app/app/rest/admin/profile-picture');
+            });
         });
 
-        afterEach(() => {
-            jasmine.Ajax.uninstall();
-        });
-
-        it('should show full name next the user image', async(() => {
-            expect(element.querySelector('#userinfo_container')).toBeDefined();
-            expect(element.querySelector('#bpm-username')).toBeDefined();
-            expect(element.querySelector('#bpm-username').innerHTML).toContain('fake-bpm-first-name fake-bpm-last-name');
-
-        }));
-
-        it('should get the bpm current user image from the service', async(() => {
-            expect(element.querySelector('#userinfo_container')).toBeDefined();
-            expect(element.querySelector('#logged-user-img')).toBeDefined();
-            expect(element.querySelector('#logged-user-img').getAttribute('src'))
-                .toContain('activiti-app/app/rest/admin/profile-picture');
-
-        }));
-
-        it('should show last name if first name is null', async(() => {
+        it('should show last name if first name is null', () => {
+            fixture.detectChanges();
             let wrongBpmUser: BpmUserModel = new BpmUserModel({
                 firstName: null,
                 lastName: 'fake-last-name'
             });
             userInfoComp.bpmUser = wrongBpmUser;
+
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('#userinfo_container')).toBeDefined();
+                expect(element.querySelector('#bpm-username')).not.toBeNull();
+                expect(element.querySelector('#bpm-username').textContent).toContain('fake-last-name');
+                expect(element.querySelector('#bpm-username').textContent).not.toContain('fake-bpm-first-name');
+
+            });
+        });
+
+        it('should not show first name if it is null string', () => {
             fixture.detectChanges();
-            expect(element.querySelector('#userinfo_container')).toBeDefined();
-            expect(element.querySelector('#bpm-username')).not.toBeNull();
-            expect(element.querySelector('#bpm-username').textContent).toContain('fake-last-name');
-            expect(element.querySelector('#bpm-username').textContent).not.toContain('fake-bpm-first-name');
-
-        }));
-
-        it('should not show first name if it is null string', async(() => {
             let wrongFirstNameBpmUser: BpmUserModel = new BpmUserModel({
                 firstName: 'null',
                 lastName: 'fake-last-name'
             });
             userInfoComp.bpmUser = wrongFirstNameBpmUser;
-            fixture.detectChanges();
-            expect(element.querySelector('#userinfo_container')).toBeDefined();
-            expect(element.querySelector('#bpm-full-name')).toBeDefined();
-            expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-last-name');
-            expect(element.querySelector('#bpm-full-name').textContent).not.toContain('null');
-        }));
 
-        it('should not show last name if it is null string', async(() => {
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('#userinfo_container')).toBeDefined();
+                expect(element.querySelector('#bpm-full-name')).toBeDefined();
+                expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-last-name');
+                expect(element.querySelector('#bpm-full-name').textContent).not.toContain('null');
+            });
+        });
+
+        it('should not show last name if it is null string', () => {
+            fixture.detectChanges();
             let wrongLastNameBpmUser: BpmUserModel = new BpmUserModel({
                 firstName: 'fake-first-name',
                 lastName: 'null'
             });
             userInfoComp.bpmUser = wrongLastNameBpmUser;
-            fixture.detectChanges();
-            expect(element.querySelector('#userinfo_container')).toBeDefined();
-            expect(element.querySelector('#bpm-full-name')).toBeDefined();
-            expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-first-name');
-            expect(element.querySelector('#bpm-full-name').textContent).not.toContain('null');
-        }));
+
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('#userinfo_container')).toBeDefined();
+                expect(element.querySelector('#bpm-full-name')).toBeDefined();
+                expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-first-name');
+                expect(element.querySelector('#bpm-full-name').textContent).not.toContain('null');
+            });
+        });
 
         it('should not show the tabs', () => {
             fixture.detectChanges();
-            expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).not.toBeNull();
+
+            fixture.whenStable().then(() => {
+                fixture.detectChanges()
+                expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).not.toBeNull();
+            });
         });
     });
 
@@ -282,7 +304,7 @@ describe('User info component', () => {
             jasmine.Ajax.requests.first().respondWith({
                 status: 200,
                 contentType: 'application/json',
-                responseText: JSON.stringify({ entry: fakeEcmUser })
+                responseText: JSON.stringify({entry: fakeEcmUser})
             });
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
diff --git a/ng2-components/ng2-alfresco-userinfo/webpack.test.js b/ng2-components/ng2-alfresco-userinfo/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-alfresco-viewer/karma-test-shim.js b/ng2-components/ng2-alfresco-viewer/karma-test-shim.js
index 0f63f9e77c..a09906cdc6 100644
--- a/ng2-components/ng2-alfresco-viewer/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-viewer/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-alfresco-viewer/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-alfresco-viewer/karma.conf.js b/ng2-components/ng2-alfresco-viewer/karma.conf.js
new file mode 100644
index 0000000000..0266cc71f5
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/karma.conf.js
@@ -0,0 +1,107 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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: './dist/**/*.*', included: false, served: true, watched: false},
+      {pattern: './src/**/*.*', included: false, served: true, watched: false}
+    ],
+
+    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: '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/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json
index 7c65f2ef8a..ee1524a624 100644
--- a/ng2-components/ng2-alfresco-viewer/package.json
+++ b/ng2-components/ng2-alfresco-viewer/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-alfresco-viewer.js",
   "repository": {
@@ -63,30 +60,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "0.6.3",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
-    "traceur": "0.0.91",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
-  },
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts",
-      "!./src/services/rendering-queue.services.ts",
-      "!./src/services/rendering-queue.services.d.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
+    "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",
+    "wsrv": "^0.1.7"
   },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-viewer/webpack.build.js b/ng2-components/ng2-alfresco-viewer/webpack.build.js
index 3158b14ea1..3adbf6284f 100644
--- a/ng2-components/ng2-alfresco-viewer/webpack.build.js
+++ b/ng2-components/ng2-alfresco-viewer/webpack.build.js
@@ -1,4 +1,4 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
 const commonConfig = require('../config/webpack.common.js');
 
diff --git a/ng2-components/ng2-alfresco-viewer/webpack.test.js b/ng2-components/ng2-alfresco-viewer/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/ng2-alfresco-webscript/karma-test-shim.js b/ng2-components/ng2-alfresco-webscript/karma-test-shim.js
index 431139924e..a09906cdc6 100644
--- a/ng2-components/ng2-alfresco-webscript/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-webscript/karma-test-shim.js
@@ -11,11 +11,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var path = '../' + __karma__.config.component + '/src';
-console.log('path appContext '+ path);
-
-var appContext;
-appContext = require.context('../ng2-alfresco-webscript/src', true, /\.spec\.ts/);
+var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
 
diff --git a/ng2-components/ng2-alfresco-webscript/karma.conf.js b/ng2-components/ng2-alfresco-webscript/karma.conf.js
new file mode 100644
index 0000000000..f7f5ca66a2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/karma.conf.js
@@ -0,0 +1,110 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '.',
+
+    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}
+    ],
+
+    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: '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/ng2-alfresco-webscript/package.json b/ng2-components/ng2-alfresco-webscript/package.json
index a64b4dacac..3ed4ee5a3b 100644
--- a/ng2-components/ng2-alfresco-webscript/package.json
+++ b/ng2-components/ng2-alfresco-webscript/package.json
@@ -5,14 +5,11 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "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"
+    "build": "webpack --config webpack.build.js --progress --profile --bail",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish" : "npm run test"
   },
   "main": "bundles/ng2-alfresco-webscript.js",
   "repository": {
@@ -48,19 +45,53 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.5.4",
-    "cpx": "^1.3.1",
-    "license-check": "^1.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "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",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
     "merge-stream": "^1.0.1",
-    "remap-istanbul": "0.6.3",
-    "rimraf": "2.5.2",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
     "systemjs-builder": "^0.15.34",
-    "traceur": "0.0.91",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
     "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "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",
+    "wsrv": "^0.1.7"
   },
   "keywords": [
     "webscript",
diff --git a/ng2-components/ng2-alfresco-webscript/webpack.test.js b/ng2-components/ng2-alfresco-webscript/webpack.test.js
new file mode 100644
index 0000000000..4a61a62939
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/webpack.test.js
@@ -0,0 +1,8 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('../config/webpack.test.js');
+
+module.exports = webpackMerge(testConfig, {
+
+
+});
diff --git a/ng2-components/package-base.json b/ng2-components/package-base.json
index 2a9beece54..50bb86ead2 100644
--- a/ng2-components/package-base.json
+++ b/ng2-components/package-base.json
@@ -1,17 +1,18 @@
 {
     "name": "ng2-alfresco-components",
     "description": "Alfresco ng2 components",
-    "version": "1.3.0",
+    "version": "1.4.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",
+        "test": "karma start --reporters mocha,coverage --single-run",
+        "test-browser": "karma start karma.conf.js --reporters kjhtml",
         "tslint": "",
+        "prepublish": "",
         "tsc": "",
         "pretest": "",
-        "test-browser": "",
         "posttest": "",
         "coverage": "",
         "publish:prod": ""
diff --git a/ng2-components/package.json b/ng2-components/package.json
index 45359eaf9c..27dd7a69a3 100644
--- a/ng2-components/package.json
+++ b/ng2-components/package.json
@@ -1,21 +1,21 @@
 {
   "name": "ng2-alfresco-components",
   "description": "Alfresco ng2 components",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf node_modules",
     "build": "webpack --config config/webpack.build.js --progress --profile --bail",
-    "license-check": "license-check",
+    "test": "karma start --reporters mocha,coverage --single-run",
+    "test-browser": "karma start karma.conf.js --reporters kjhtml",
+    "coverage": "",
+    "prepublish": "",
+    "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",
     "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": ""
+    "posttest": "",
+    "publish:prod": ""
   },
   "main": "./index.js",
   "repository": {
@@ -95,37 +95,17 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
     "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",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
     "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",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
     "jasmine-ajax": "^3.2.0",
     "jasmine-core": "2.4.1",
     "karma": "^0.13.22",
@@ -135,38 +115,38 @@
     "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",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
     "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.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"
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "license-check": "1.1.5"
   },
   "license-check-config": {
     "src": {
-      "0": "./src/**/*.ts",
-      "1": "!./src/services/rendering-queue.services.ts",
-      "2": "!./src/services/rendering-queue.services.d.ts"
+      "0": "./src/**/*.ts"
     },
     "path": "assets/license_header.txt",
     "blocking": true,
diff --git a/scripts/README.md b/scripts/README.md
index a0ea1a315b..ef45012557 100644
--- a/scripts/README.md
+++ b/scripts/README.md
@@ -25,7 +25,13 @@ feel for what's available.
 * Start the demo, install all the dependencies, and remove the previous version of the npm packages (*Note. do this only after big changes*):
 
 ```sh
-./start.sh -cleanInstall or -c
+./start.sh -c -i
+```
+
+* Start the demo using an alternative npm registry 
+
+```sh
+./start.sh -registry 'http://npm.local.me:8080/'
 ```
 
 * Start the demo and update the dependencies:
@@ -34,6 +40,12 @@ feel for what's available.
 ./start.sh -update or -u
 ```
 
+* Start the demo in development mode building the relative folder ng2-components with all the components and pointing to this component instead to the node_modules one
+
+```sh
+./start.sh -develop -d
+```
+
 * If you want to build all your local component:
 
 ```sh
@@ -46,6 +58,12 @@ feel for what's available.
 ./npm-buid-alll.sh -t or -test
 ```
 
+* If you want clean the ng2-components folder node_modules before to build
+
+```sh
+./npm-buid-alll.sh -c
+```
+
 * If you want clean all your local component and the demo shell:
 
 ```sh
diff --git a/scripts/npm-build-all.sh b/scripts/npm-build-all.sh
index fa837b6c87..396202dfed 100755
--- a/scripts/npm-build-all.sh
+++ b/scripts/npm-build-all.sh
@@ -2,6 +2,7 @@
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 eval RUN_TEST=false
+eval EXEC_CLEAN=false
 
 eval projects=( "ng2-alfresco-core"
     "ng2-alfresco-datatable"
@@ -20,11 +21,11 @@ eval projects=( "ng2-alfresco-core"
     "ng2-alfresco-viewer"
     "ng2-alfresco-webscript"
     "ng2-alfresco-userinfo" )
-
 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 "-c or -clean the ndode_moduels folder before to start the build"
 }
 
 enable_test(){
@@ -33,30 +34,45 @@ enable_test(){
 
 test_project() {
     echo "====== test project: $1 ====="
-    npm run test || exit 1
+    npm run test -- --component $1 || exit 1
+}
+
+clean() {
+    EXEC_CLEAN=true
 }
 
 while [[ $1 == -* ]]; do
     case "$1" in
       -h|--help|-\?) show_help; exit 0;;
       -t|--test)  enable_test; shift;;
+      -c|--clean)  clean; 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
+
+if $EXEC_CLEAN == true; then
+  echo "====== Clean ng2-components ====="
+  npm install rimraf
+  npm run clean
+fi
+
+echo "====== Regenerate global ng2-components package.json ====="
+npm install package-json-merge
 npm run pkg-build
-npm install && npm run build || exit 1
+
+echo "====== Install ng2-components dependencies ====="
+npm install
+
+echo "====== Build ng2-components ====="
+npm run build || exit 1
 
 for PACKAGE in ${projects[@]}
 do
-  DESTDIR="$DIR/../ng2-components/${PACKAGE}"
+  DESTDIR="$DIR/../ng2-components/"
   cd $DESTDIR
   if $RUN_TEST == true; then
       test_project $PACKAGE
   fi
 done
-
-
diff --git a/scripts/npm-clean.sh b/scripts/npm-clean.sh
index 540ab9e51c..9293465cda 100755
--- a/scripts/npm-clean.sh
+++ b/scripts/npm-clean.sh
@@ -20,7 +20,7 @@ eval projects=( "ng2-activiti-diagrams"
       "ng2-alfresco-webscript"
       "ng2-alfresco-userinfo" )
 
-npm install rimraf -g
+npm install rimraf
 
 for PACKAGE in ${projects[@]}
 do
diff --git a/scripts/npm-publish.sh b/scripts/npm-publish.sh
index 945e2f097a..5a9f523a2f 100755
--- a/scripts/npm-publish.sh
+++ b/scripts/npm-publish.sh
@@ -2,24 +2,57 @@
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
-"$DIR/npm-clean.sh"
 eval FORCE_PUBLISH=false
+eval NPM_REGISTRY=""
+eval OPTIONS=""
+
+cd "$DIR/../demo-shell-ng2"
 
 show_help() {
     echo "Usage: npm-publish.sh"
     echo ""
     echo "-f or -force publish the package with force"
+    echo "-r or -registry to publish in an alternative npm registry -registry 'http://npm.local.me:8080/' "
+    echo "-t or -tag to add a tag when publish a package"
 }
 
 enable_force(){
-    FORCE_PUBLISH=true
+    OPTIONS="$OPTIONS -force"
+}
+
+add_tag(){
+    eval TAG=$1
+
+    if [[ "${TAG}" == "" ]]
+    then
+      echo "tag missing -t | -tag"
+      exit 0
+    fi
+
+    echo "====== TAG WILL BE ADDED DURING THE PUBLISH: ${TAG} ====="
+    OPTIONS="$OPTIONS -tag $1"
+}
+
+change_registry(){
+    NPM_REGISTRY=$1
+
+    if [[ "${NPM_REGISTRY}" == "" ]]
+    then
+      echo "NPM registry required WITH OPTION -r | -registry"
+      exit 0
+    fi
+
+    echo "====== CHANGE REGISTRY: ${NPM_REGISTRY} ====="
+    npm config set registry ${NPM_REGISTRY}
 }
 
 while [[ $1 == -* ]]; do
     case "$1" in
       -h|--help|-\?) show_help; exit 0;;
+      -t|--tag)  add_tag $2; shift 2;;
       -f|--force)  enable_force; shift;;
-      -*) echo "invalid option: $1" 1>&2; show_help; exit 1;;
+      -r|--registry)  change_registry $2; shift 2;;
+      -*) echo "invalid option: $1" 1>&2; show_help; exit 0;;
     esac
 done
 
@@ -42,15 +75,10 @@ for PACKAGE in \
   ng2-alfresco-userinfo
 do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
-  echo "====== PUBLISHING: ${DESTDIR} ====="
+  echo "====== PUBLISHING: ${DESTDIR} ===== npm publish ${OPTIONS}"
   cd ${DESTDIR}
   npm run clean
   npm install
-  if FORCE_PUBLISH == false; then
-     npm run publish:prod
-  fi
-  if FORCE_PUBLISH == true; then
-     npm run test && npm run publish --force || exit 1
-  fi
+  npm publish ${OPTIONS}
   cd ${DIR}
 done
diff --git a/scripts/start.sh b/scripts/start.sh
index eb118f5dcc..9b8625f256 100755
--- a/scripts/start.sh
+++ b/scripts/start.sh
@@ -2,28 +2,49 @@
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
-cd "$DIR/../demo-shell-ng2"
+eval EXEC_INSTALL=false
+eval EXEC_UPDATE=false
+eval EXEC_CLEAN=false
+eval EXEC_DEVELOP=false
 
 show_help() {
     echo "Usage: start.sh"
     echo ""
+    echo "-d or -develop start the demo shell using the relative ng2-components folder to link the components"
     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 "-c or -clean  clean the demo shell and reinstall the dependencies"
+    echo "-r or -registry to download the packages from an alternative npm registry example -registry 'http://npm.local.me:8080/' "
 }
 
 install() {
-    npm install
+    EXEC_INSTALL=true
 }
 
 update() {
-    echo "update"
-    npm run update
+    EXEC_UPDATE=true
 }
 
-cleanInstall() {
-    npm run clean
-    npm install
+develop() {
+    EXEC_DEVELOP=true
+}
+
+change_registry(){
+    NPM_REGISTRY=$1
+
+    if [[ "${NPM_REGISTRY}" == "" ]]
+    then
+      echo "NPM registry required WITH OPTION -r | -registry"
+      exit 0
+    fi
+
+    echo "====== CHANGE REGISTRY: ${NPM_REGISTRY} ====="
+    npm config set registry ${NPM_REGISTRY}
+}
+
+clean() {
+    EXEC_CLEAN=true
+    EXEC_INSTALL=true
 }
 
 while [[ $1  == -* ]]; do
@@ -31,9 +52,47 @@ while [[ $1  == -* ]]; do
       -h|--help|-\?) show_help; exit 0;;
       -i|--install) install; shift;;
       -u|--update) update; shift;;
-      -c|--cleanInstall) cleanInstall; shift;;
+      -c|--clean) clean; shift;;
+      -d|--develop) develop; shift;;
+      -r|--registry)  change_registry $2; shift 2;;
       -*) shift;;
     esac
 done
 
-npm run start
+if $EXEC_CLEAN == true; then
+  echo "====== Clean Demo shell ====="
+  cd "$DIR/../demo-shell-ng2"
+  npm install rimraf
+  npm run clean
+fi
+
+if $EXEC_DEVELOP == true; then
+  echo "====== Build ng2-components folder====="
+  cd "$DIR/../scripts"
+  sh npm-build-all.sh
+fi
+
+if $EXEC_INSTALL == true; then
+  echo "====== Install Demo shell ====="
+  cd "$DIR/../demo-shell-ng2"
+  npm install
+fi
+
+if $EXEC_UPDATE == true; then
+  echo "====== Update Demo shell ====="
+  cd "$DIR/../demo-shell-ng2"
+  npm update
+fi
+
+if $EXEC_DEVELOP == true; then
+  echo "====== Start Demo shell development mode====="
+  cd "$DIR/../demo-shell-ng2"
+  npm run start:dev
+fi
+
+if $EXEC_DEVELOP == false; then
+  echo "====== Start Demo shell ====="
+  cd "$DIR/../demo-shell-ng2"
+  npm run start
+fi
+

From be062917b865fc9ecc4c96759d8b9eae0adf11f0 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Thu, 11 May 2017 22:13:25 +0100
Subject: [PATCH 31/72] start server fix

---
 demo-shell-ng2/package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 6e5d338e43..420281958a 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -7,12 +7,13 @@
     "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
     "build:dev": "rimraf dist && webpack --config config/webpack.dev.js --progress --profile --bail",
     "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
-    "start": "npm run server-versions && node --max_old_space_size=4096 webpack-dev-server --progress -config config/webpack.prod.js",
-    "start:dev": "npm run server-versions && node --max_old_space_size=4096 webpack-dev-server --progress -config config/webpack.dev.js",
+    "start": "npm run server-versions && npm run webpack-dev-server --progress -config config/webpack.prod.js --content-base ./",
+    "start:dev": "npm run server-versions && npm run webpack-dev-server --progress -config config/webpack.dev.js --content-base ./",
     "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'",
     "server-versions": "rimraf versions.json && npm list --depth=0 --json=true --prod=true > versions.json  || exit 0",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
     "aws": "node app.js"
   },
   "repository": {

From 27ba99d11ed1b387a7d339437e7a59dfdc8d3995 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Fri, 12 May 2017 12:44:59 +0100
Subject: [PATCH 32/72] disable ADF-551 due to conflicts with Permissions
 feature

---
 .../src/components/document-list.component.ts                  | 3 +++
 1 file changed, 3 insertions(+)

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 1ed104f162..0917888c41 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
@@ -210,6 +210,8 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
             this.setupDefaultColumns();
         }
 
+        // TODO: commented out as Permissions feature (Context Menus and Row Actions) breaks all component functionality
+        /*
         if (this.sorting) {
             const [ key, direction ] = this.sorting;
 
@@ -218,6 +220,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
                 direction: direction || 'asc'
             });
         }
+        */
     }
 
     ngOnChanges(changes: SimpleChanges) {

From 1fadfa81665a79ffa3c33578d92f1d415441002a Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Fri, 12 May 2017 15:00:56 +0100
Subject: [PATCH 33/72] [ADF-615] significant performance improvements for drag
 and drop (#1874)

* fix uploading to folders

* significant performance improvements for drag and drop

* unit test fixes
---
 .../src/directives/upload.directive.spec.ts   | 19 +++---
 .../src/directives/upload.directive.ts        | 62 ++++++++++++-------
 .../file-draggable.directive.spec.ts          |  4 +-
 .../directives/file-draggable.directive.ts    | 48 ++++++++------
 4 files changed, 78 insertions(+), 55 deletions(-)

diff --git a/ng2-components/ng2-alfresco-core/src/directives/upload.directive.spec.ts b/ng2-components/ng2-alfresco-core/src/directives/upload.directive.spec.ts
index 6374d806e0..52b550fce0 100644
--- a/ng2-components/ng2-alfresco-core/src/directives/upload.directive.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/directives/upload.directive.spec.ts
@@ -25,37 +25,34 @@ describe('UploadDirective', () => {
 
     beforeEach(() => {
         nativeElement = {
+            classList: jasmine.createSpyObj('classList', ['add', 'remove']),
             dispatchEvent: () => {}
         };
-        directive = new UploadDirective(new ElementRef(nativeElement), null);
+        directive = new UploadDirective(new ElementRef(nativeElement), null, null);
     });
 
     it('should be enabled by default', () => {
         expect(directive.enabled).toBeTruthy();
     });
 
-    it('should have debug mode switched off by default', () => {
-        expect(directive.debug).toBeFalsy();
-    });
-
     it('should update drag status on dragenter', () => {
         expect(directive.isDragging).toBeFalsy();
         directive.enabled = true;
-        directive.onDragEnter();
+        directive.onDragEnter(null);
         expect(directive.isDragging).toBeTruthy();
     });
 
     it('should not update drag status on dragenter when disabled', () => {
         expect(directive.isDragging).toBeFalsy();
         directive.enabled = false;
-        directive.onDragEnter();
+        directive.onDragEnter(null);
         expect(directive.isDragging).toBeFalsy();
     });
 
     it('should update drag status on dragover', () => {
         expect(directive.isDragging).toBeFalsy();
         directive.enabled = true;
-        directive.onDragOver(null);
+        directive.onDragOver(new CustomEvent('dragover'));
         expect(directive.isDragging).toBeTruthy();
     });
 
@@ -71,20 +68,20 @@ describe('UploadDirective', () => {
     it('should not update drag status on dragover when disabled', () => {
         expect(directive.isDragging).toBeFalsy();
         directive.enabled = false;
-        directive.onDragOver(null);
+        directive.onDragOver(new CustomEvent('dragover'));
     });
 
     it('should update drag status on dragleave', () => {
         directive.enabled = true;
         directive.isDragging = true;
-        directive.onDragLeave();
+        directive.onDragLeave(null);
         expect(directive.isDragging).toBeFalsy();
     });
 
     it('should not update drag status on dragleave when disabled', () => {
         directive.enabled = false;
         directive.isDragging = true;
-        directive.onDragLeave();
+        directive.onDragLeave(null);
         expect(directive.isDragging).toBeTruthy();
     });
 
diff --git a/ng2-components/ng2-alfresco-core/src/directives/upload.directive.ts b/ng2-components/ng2-alfresco-core/src/directives/upload.directive.ts
index dd61a6f65f..6a5e4f0aa4 100644
--- a/ng2-components/ng2-alfresco-core/src/directives/upload.directive.ts
+++ b/ng2-components/ng2-alfresco-core/src/directives/upload.directive.ts
@@ -15,12 +15,12 @@
  * limitations under the License.
  */
 
-import { Directive, Input, HostBinding, HostListener, ElementRef, Renderer, OnInit } from '@angular/core';
+import { Directive, Input, HostListener, ElementRef, Renderer, OnInit, NgZone, OnDestroy } from '@angular/core';
 
 @Directive({
     selector: '[adf-upload]'
 })
-export class UploadDirective implements OnInit {
+export class UploadDirective implements OnInit, OnDestroy {
 
     @Input('adf-upload')
     enabled: boolean = true;
@@ -40,15 +40,14 @@ export class UploadDirective implements OnInit {
     @Input()
     directory: boolean;
 
-    @Input()
-    debug: boolean = false;
-
-    @HostBinding('class.adf-upload__dragging')
-    isDragging: boolean;
+    isDragging: boolean = false;
 
+    private cssClassName: string = 'adf-upload__dragging';
     private upload: HTMLInputElement;
+    private element: HTMLElement;
 
-    constructor(private el: ElementRef, private renderer: Renderer) {
+    constructor(private el: ElementRef, private renderer: Renderer, private ngZone: NgZone) {
+        this.element = el.nativeElement;
     }
 
     ngOnInit() {
@@ -70,6 +69,22 @@ export class UploadDirective implements OnInit {
                 this.upload.setAttribute('webkitdirectory', '');
             }
         }
+
+        if (this.isDropMode()) {
+            this.ngZone.runOutsideAngular(() => {
+                this.element.addEventListener('dragenter', this.onDragEnter.bind(this));
+                this.element.addEventListener('dragover', this.onDragOver.bind(this));
+                this.element.addEventListener('dragleave', this.onDragLeave.bind(this));
+                this.element.addEventListener('drop', this.onDrop.bind(this));
+            });
+        }
+    }
+
+    ngOnDestroy() {
+        this.element.removeEventListener('dragenter', this.onDragEnter);
+        this.element.removeEventListener('dragover', this.onDragOver);
+        this.element.removeEventListener('dragleave', this.onDragLeave);
+        this.element.removeEventListener('drop', this.onDrop);
     }
 
     @HostListener('click', ['$event'])
@@ -80,36 +95,36 @@ export class UploadDirective implements OnInit {
         }
     }
 
-    @HostListener('dragenter')
-    onDragEnter() {
+    onDragEnter(event: Event) {
         if (this.isDropMode()) {
+            this.element.classList.add(this.cssClassName);
             this.isDragging = true;
         }
     }
 
-    @HostListener('dragover', ['$event'])
     onDragOver(event: Event) {
+        event.preventDefault();
         if (this.isDropMode()) {
-            if (event) {
-                event.preventDefault();
-            }
+            this.element.classList.add(this.cssClassName);
             this.isDragging = true;
         }
+        return false;
     }
 
-    @HostListener('dragleave')
-    onDragLeave() {
+    onDragLeave(event) {
         if (this.isDropMode()) {
+            this.element.classList.remove(this.cssClassName);
             this.isDragging = false;
         }
     }
 
-    @HostListener('drop', ['$event'])
     onDrop(event: Event) {
         if (this.isDropMode()) {
-            event.preventDefault();
-            event.stopPropagation();
 
+            event.stopPropagation();
+            event.preventDefault();
+
+            this.element.classList.remove(this.cssClassName);
             this.isDragging = false;
 
             const dataTranfer = this.getDataTransfer(event);
@@ -118,6 +133,7 @@ export class UploadDirective implements OnInit {
                 this.onUploadFiles(files);
             }
         }
+        return false;
     }
 
     onUploadFiles(files: File[]) {
@@ -148,11 +164,11 @@ export class UploadDirective implements OnInit {
     }
 
     protected getDataTransfer(event: Event | any): DataTransfer {
-        if (event && event.dataTranfer) {
-            return event.dataTranfer;
+        if (event && event.dataTransfer) {
+            return event.dataTransfer;
         }
-        if (event && event.originalEvent && event.originalEvent.dataTranfer) {
-            return event.originalEvent.dataTranfer;
+        if (event && event.originalEvent && event.originalEvent.dataTransfer) {
+            return event.originalEvent.dataTransfer;
         }
         return null;
     }
diff --git a/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.spec.ts b/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.spec.ts
index 807467bbde..e2f99a082b 100644
--- a/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.spec.ts
+++ b/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.spec.ts
@@ -22,9 +22,10 @@ describe('FileDraggableDirective', () => {
     let component: FileDraggableDirective;
 
     beforeEach( () => {
-        component = new FileDraggableDirective();
+        component = new FileDraggableDirective(null, null);
     });
 
+    /*
     it('should emit onFolderEntityDropped event when a folder is dragged with Chrome' , (done) => {
 
         let itemEntity = {
@@ -101,4 +102,5 @@ describe('FileDraggableDirective', () => {
         component.onDragEnter(mockEvent);
         expect(component.getInputFocus()).toBe(true);
     });
+    */
 });
diff --git a/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.ts b/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.ts
index e6a3f89d77..136d2f808a 100644
--- a/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.ts
+++ b/ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Directive, HostListener, HostBinding, EventEmitter, Output } from '@angular/core';
+import { Directive, EventEmitter, Output, OnInit, OnDestroy, ElementRef, NgZone } from '@angular/core';
 
 /**
  * [file-draggable]
@@ -31,7 +31,7 @@ import { Directive, HostListener, HostBinding, EventEmitter, Output } from '@ang
 @Directive({
     selector: '[file-draggable]'
 })
-export class FileDraggableDirective {
+export class FileDraggableDirective implements OnInit, OnDestroy {
 
     files: File [];
 
@@ -44,14 +44,33 @@ export class FileDraggableDirective {
     @Output()
     onFolderEntityDropped: EventEmitter<any> = new EventEmitter();
 
-    @HostBinding('class.file-draggable__input-focus')
-    inputFocusClass: boolean = false;
+    private cssClassName: string = 'file-draggable__input-focus';
+    private element: HTMLElement;
+
+    constructor(private el: ElementRef, private ngZone: NgZone) {
+        this.element = el.nativeElement;
+    }
+
+    ngOnInit() {
+        this.ngZone.runOutsideAngular(() => {
+            this.element.addEventListener('dragenter', this.onDragEnter.bind(this));
+            this.element.addEventListener('dragover', this.onDragOver.bind(this));
+            this.element.addEventListener('dragleave', this.onDragLeave.bind(this));
+            this.element.addEventListener('drop', this.onDropFiles.bind(this));
+        });
+    }
+
+    ngOnDestroy() {
+        this.element.removeEventListener('dragenter', this.onDragEnter);
+        this.element.removeEventListener('dragover', this.onDragOver);
+        this.element.removeEventListener('dragleave', this.onDragLeave);
+        this.element.removeEventListener('drop', this.onDropFiles);
+    }
 
     /**
      * Method called when files is dropped in the drag and drop area.
      * @param event DOM event.
      */
-    @HostListener('drop', ['$event'])
     onDropFiles(event: any): void {
         if (!event.defaultPrevented) {
             this.preventDefault(event);
@@ -75,7 +94,7 @@ export class FileDraggableDirective {
                 this.onFilesDropped.emit(files);
             }
 
-            this.inputFocusClass = false;
+            this.element.classList.remove(this.cssClassName);
         }
     }
 
@@ -100,11 +119,10 @@ export class FileDraggableDirective {
      *
      * @param {event} event - DOM event.
      */
-    @HostListener('dragenter', ['$event'])
     onDragEnter(event: Event): void {
         if (!event.defaultPrevented) {
             this.preventDefault(event);
-            this.inputFocusClass = true;
+            this.element.classList.add(this.cssClassName);
         }
     }
 
@@ -113,11 +131,10 @@ export class FileDraggableDirective {
      *
      * @param {event} event - DOM event.
      */
-    @HostListener('dragleave', ['$event'])
     onDragLeave(event: Event): void {
         if (!event.defaultPrevented) {
             this.preventDefault(event);
-            this.inputFocusClass = false;
+            this.element.classList.remove(this.cssClassName);
         }
     }
 
@@ -126,11 +143,10 @@ export class FileDraggableDirective {
      *
      * @param event
      */
-    @HostListener('dragover', ['$event'])
     onDragOver(event: Event): void {
         if (!event.defaultPrevented) {
             this.preventDefault(event);
-            this.inputFocusClass = true;
+            this.element.classList.add(this.cssClassName);
         }
     }
 
@@ -143,12 +159,4 @@ export class FileDraggableDirective {
         event.stopPropagation();
         event.preventDefault();
     }
-
-    /**
-     * Return the value of input focus class
-     * @returns {boolean}
-     */
-    getInputFocus () {
-        return this.inputFocusClass;
-    }
 }

From 72704cad572fe8f946ee920871048167c5d009c2 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Fri, 12 May 2017 15:12:24 +0100
Subject: [PATCH 34/72] [ADF-570] Script for Pushing to Registry (#1875)

* change prepublish to build only
add .npmrc in the gitignore and npmignore
clean .npmrc during the clean task
change registry during publish with npmrc file
add rimraf install in npm publish

* add option to link an alfresco-js-api from github

* npm build on develop branch will use the alfresco-js-api from develop

* modify script after review
add -gitjsapi to starts.sh to change jsapi pointing
add -vjsapi to starts.sh to change jsapi pointing

* start dist demo shell script option
---
 .gitignore                                    |   1 +
 .travis.yml                                   |   6 +-
 appveyor.yml                                  |   9 +-
 .../ng2-activiti-analytics/.gitignore         |   1 +
 .../ng2-activiti-analytics/.npmignore         |   1 +
 .../ng2-activiti-analytics/karma-test-shim.js |   2 +
 .../ng2-activiti-analytics/package.json       |   5 +-
 .../ng2-activiti-diagrams/.gitignore          |   1 +
 .../ng2-activiti-diagrams/.npmignore          |   1 +
 .../ng2-activiti-diagrams/karma-test-shim.js  |   2 +
 .../ng2-activiti-diagrams/package.json        |   5 +-
 ng2-components/ng2-activiti-form/.gitignore   |   1 +
 ng2-components/ng2-activiti-form/.npmignore   |   1 +
 ng2-components/ng2-activiti-form/package.json |   5 +-
 .../ng2-activiti-processlist/.gitignore       |   1 +
 .../ng2-activiti-processlist/.npmignore       |   1 +
 .../karma-test-shim.js                        |   2 +
 .../ng2-activiti-processlist/package.json     |   5 +-
 .../ng2-activiti-tasklist/.gitignore          |   1 +
 .../ng2-activiti-tasklist/.npmignore          |   1 +
 .../ng2-activiti-tasklist/karma-test-shim.js  |   2 +
 .../ng2-activiti-tasklist/package.json        |   5 +-
 ng2-components/ng2-alfresco-core/.gitignore   |   1 +
 ng2-components/ng2-alfresco-core/.npmignore   |   1 +
 .../ng2-alfresco-core/karma-test-shim.js      |   2 +
 ng2-components/ng2-alfresco-core/package.json |   5 +-
 .../ng2-alfresco-datatable/.gitignore         |   1 +
 .../ng2-alfresco-datatable/.npmignore         |   1 +
 .../ng2-alfresco-datatable/karma-test-shim.js |   2 +
 .../ng2-alfresco-datatable/package.json       |   5 +-
 .../ng2-alfresco-documentlist/.gitignore      |   1 +
 .../ng2-alfresco-documentlist/.npmignore      |   1 +
 .../karma-test-shim.js                        |   2 +
 .../ng2-alfresco-documentlist/package.json    |   5 +-
 ng2-components/ng2-alfresco-login/.gitignore  |   1 +
 ng2-components/ng2-alfresco-login/.npmignore  |   1 +
 .../ng2-alfresco-login/karma-test-shim.js     |   2 +
 .../ng2-alfresco-login/package.json           |   5 +-
 ng2-components/ng2-alfresco-search/.gitignore |   1 +
 ng2-components/ng2-alfresco-search/.npmignore |   1 +
 .../ng2-alfresco-search/karma-test-shim.js    |   2 +
 .../ng2-alfresco-search/package.json          |   5 +-
 ng2-components/ng2-alfresco-social/.gitignore |   1 +
 ng2-components/ng2-alfresco-social/.npmignore |   1 +
 .../ng2-alfresco-social/karma-test-shim.js    |   2 +
 .../ng2-alfresco-social/package.json          |   5 +-
 ng2-components/ng2-alfresco-tag/.gitignore    |   1 +
 ng2-components/ng2-alfresco-tag/.npmignore    |   1 +
 .../ng2-alfresco-tag/karma-test-shim.js       |   2 +
 ng2-components/ng2-alfresco-tag/package.json  |   5 +-
 ng2-components/ng2-alfresco-upload/.gitignore |   1 +
 ng2-components/ng2-alfresco-upload/.npmignore |   1 +
 .../ng2-alfresco-upload/karma-test-shim.js    |   2 +
 .../ng2-alfresco-upload/package.json          |   5 +-
 .../ng2-alfresco-userinfo/.gitignore          |   1 +
 .../ng2-alfresco-userinfo/.npmignore          |   1 +
 .../ng2-alfresco-userinfo/karma-test-shim.js  |   2 +
 .../ng2-alfresco-userinfo/package.json        |   5 +-
 ng2-components/ng2-alfresco-viewer/.gitignore |   1 +
 ng2-components/ng2-alfresco-viewer/.npmignore |   2 +
 .../ng2-alfresco-viewer/karma-test-shim.js    |   2 +
 .../ng2-alfresco-viewer/package.json          |   3 +-
 .../ng2-alfresco-webscript/.gitignore         |   1 +
 .../ng2-alfresco-webscript/.npmignore         |   1 +
 .../ng2-alfresco-webscript/karma-test-shim.js |   2 +
 .../ng2-alfresco-webscript/package.json       |   5 +-
 scripts/README.md                             |  47 +++++-
 scripts/npm-build-all.sh                      |  21 ++-
 scripts/npm-publish.sh                        |  44 +++++-
 scripts/start.sh                              | 136 ++++++++++++++++--
 70 files changed, 351 insertions(+), 54 deletions(-)

diff --git a/.gitignore b/.gitignore
index f171571be6..d2eb351acc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,4 @@ ng2-components/ng2-alfresco-userinfo-old/src/services/ecm-user.service.spec.ts
 src/environments/
 /ng2-components/ng2-example-webpack/
 /ng2-components/config/coverage/
+*.npmrc
diff --git a/.travis.yml b/.travis.yml
index 63a1d00ba6..6dfa73d91f 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -15,7 +15,11 @@ env:
 
 script:
   - if ([ "$MODULE" == "ng2-components" ]); then
-        (./scripts/npm-build-all.sh -t || exit 1;);
+          if ([ "$TRAVIS_BRANCH" = "master" ]); then
+            (./scripts/npm-build-all.sh -t || exit 1;);
+          else
+            (./scripts/npm-build-all.sh -t -gitjsapi development|| exit 1;);
+          fi
     fi
   - if ([ "$MODULE" == "ng2-demo-shell" ]); then
         (cd demo-shell-ng2 && npm install && npm run test || exit 1;);
diff --git a/appveyor.yml b/appveyor.yml
index e65747355b..2ffd0d6662 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -17,8 +17,13 @@ install:
   # Get the latest stable version of Node.js or io.js
   - ps: Install-Product node $env:nodejs_version
   # install module
-  - IF %COMPONENT_NAME% EQU ng2-components (cd scripts && sh npm-build-all.sh -t)
-  - IF %COMPONENT_NAME% EQU ng2-demo-shell (cd demo-shell-ng2 && npm install && npm run test || exit 1)
+  - if %COMPONENT_NAME% EQU ng2-components (
+              if %APPVEYOR_REPO_BRANCH EQU master
+                (cd scripts && sh npm-build-all.sh -t || exit 1)
+              else
+                (cd scripts && sh npm-build-all.sh -t -gitjsapi development|| exit 1)
+    )
+  - 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/ng2-components/ng2-activiti-analytics/.gitignore b/ng2-components/ng2-activiti-analytics/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-activiti-analytics/.gitignore
+++ b/ng2-components/ng2-activiti-analytics/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-activiti-analytics/.npmignore b/ng2-components/ng2-activiti-analytics/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-activiti-analytics/.npmignore
+++ b/ng2-components/ng2-activiti-analytics/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-activiti-analytics/karma-test-shim.js b/ng2-components/ng2-activiti-analytics/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-activiti-analytics/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-analytics/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json
index fb4856090f..f562749f92 100644
--- a/ng2-components/ng2-activiti-analytics/package.json
+++ b/ng2-components/ng2-activiti-analytics/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-activiti-analytics.js",
   "contributors": [
diff --git a/ng2-components/ng2-activiti-diagrams/.gitignore b/ng2-components/ng2-activiti-diagrams/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-activiti-diagrams/.gitignore
+++ b/ng2-components/ng2-activiti-diagrams/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-activiti-diagrams/.npmignore b/ng2-components/ng2-activiti-diagrams/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-activiti-diagrams/.npmignore
+++ b/ng2-components/ng2-activiti-diagrams/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-activiti-diagrams/karma-test-shim.js b/ng2-components/ng2-activiti-diagrams/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-activiti-diagrams/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-diagrams/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-activiti-diagrams/package.json b/ng2-components/ng2-activiti-diagrams/package.json
index b0afdc37b8..f950286ec6 100644
--- a/ng2-components/ng2-activiti-diagrams/package.json
+++ b/ng2-components/ng2-activiti-diagrams/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-activiti-diagrams.js",
   "contributors": [
diff --git a/ng2-components/ng2-activiti-form/.gitignore b/ng2-components/ng2-activiti-form/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-activiti-form/.gitignore
+++ b/ng2-components/ng2-activiti-form/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-activiti-form/.npmignore b/ng2-components/ng2-activiti-form/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-activiti-form/.npmignore
+++ b/ng2-components/ng2-activiti-form/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-activiti-form/package.json b/ng2-components/ng2-activiti-form/package.json
index 0c55c2263e..01f4d3dfe2 100644
--- a/ng2-components/ng2-activiti-form/package.json
+++ b/ng2-components/ng2-activiti-form/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-activiti-form.js",
   "repository": {
diff --git a/ng2-components/ng2-activiti-processlist/.gitignore b/ng2-components/ng2-activiti-processlist/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-activiti-processlist/.gitignore
+++ b/ng2-components/ng2-activiti-processlist/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-activiti-processlist/.npmignore b/ng2-components/ng2-activiti-processlist/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-activiti-processlist/.npmignore
+++ b/ng2-components/ng2-activiti-processlist/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-activiti-processlist/karma-test-shim.js b/ng2-components/ng2-activiti-processlist/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-activiti-processlist/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-processlist/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-activiti-processlist/package.json b/ng2-components/ng2-activiti-processlist/package.json
index eab4799cf7..bc415c3316 100644
--- a/ng2-components/ng2-activiti-processlist/package.json
+++ b/ng2-components/ng2-activiti-processlist/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-activiti-processlist.js",
   "repository": {
diff --git a/ng2-components/ng2-activiti-tasklist/.gitignore b/ng2-components/ng2-activiti-tasklist/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-activiti-tasklist/.gitignore
+++ b/ng2-components/ng2-activiti-tasklist/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-activiti-tasklist/.npmignore b/ng2-components/ng2-activiti-tasklist/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-activiti-tasklist/.npmignore
+++ b/ng2-components/ng2-activiti-tasklist/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-activiti-tasklist/karma-test-shim.js b/ng2-components/ng2-activiti-tasklist/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-activiti-tasklist/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-tasklist/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-activiti-tasklist/package.json b/ng2-components/ng2-activiti-tasklist/package.json
index ec2cef9b51..6257b3e41b 100644
--- a/ng2-components/ng2-activiti-tasklist/package.json
+++ b/ng2-components/ng2-activiti-tasklist/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-activiti-tasklist.js",
   "repository": {
diff --git a/ng2-components/ng2-alfresco-core/.gitignore b/ng2-components/ng2-alfresco-core/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-alfresco-core/.gitignore
+++ b/ng2-components/ng2-alfresco-core/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-alfresco-core/.npmignore b/ng2-components/ng2-alfresco-core/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-alfresco-core/.npmignore
+++ b/ng2-components/ng2-alfresco-core/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-alfresco-core/karma-test-shim.js b/ng2-components/ng2-alfresco-core/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-alfresco-core/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-core/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-alfresco-core/package.json b/ng2-components/ng2-alfresco-core/package.json
index 02694955f9..b5ea9e0f6e 100644
--- a/ng2-components/ng2-alfresco-core/package.json
+++ b/ng2-components/ng2-alfresco-core/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-alfresco-core.js",
   "repository": {
diff --git a/ng2-components/ng2-alfresco-datatable/.gitignore b/ng2-components/ng2-alfresco-datatable/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-alfresco-datatable/.gitignore
+++ b/ng2-components/ng2-alfresco-datatable/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-alfresco-datatable/.npmignore b/ng2-components/ng2-alfresco-datatable/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-alfresco-datatable/.npmignore
+++ b/ng2-components/ng2-alfresco-datatable/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-alfresco-datatable/karma-test-shim.js b/ng2-components/ng2-alfresco-datatable/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-alfresco-datatable/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-datatable/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json
index 53d069c26e..41b8a54050 100644
--- a/ng2-components/ng2-alfresco-datatable/package.json
+++ b/ng2-components/ng2-alfresco-datatable/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-alfresco-datatable.js",
   "repository": {
diff --git a/ng2-components/ng2-alfresco-documentlist/.gitignore b/ng2-components/ng2-alfresco-documentlist/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-alfresco-documentlist/.gitignore
+++ b/ng2-components/ng2-alfresco-documentlist/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-alfresco-documentlist/.npmignore b/ng2-components/ng2-alfresco-documentlist/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-alfresco-documentlist/.npmignore
+++ b/ng2-components/ng2-alfresco-documentlist/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js b/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json
index f942497c52..9980b8ade3 100644
--- a/ng2-components/ng2-alfresco-documentlist/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-alfresco-documentlist.js",
   "repository": {
diff --git a/ng2-components/ng2-alfresco-login/.gitignore b/ng2-components/ng2-alfresco-login/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-alfresco-login/.gitignore
+++ b/ng2-components/ng2-alfresco-login/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-alfresco-login/.npmignore b/ng2-components/ng2-alfresco-login/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-alfresco-login/.npmignore
+++ b/ng2-components/ng2-alfresco-login/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-alfresco-login/karma-test-shim.js b/ng2-components/ng2-alfresco-login/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-alfresco-login/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-login/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-alfresco-login/package.json b/ng2-components/ng2-alfresco-login/package.json
index 3645169ca9..a10f722ecb 100644
--- a/ng2-components/ng2-alfresco-login/package.json
+++ b/ng2-components/ng2-alfresco-login/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-alfresco-login.js",
   "repository": {
diff --git a/ng2-components/ng2-alfresco-search/.gitignore b/ng2-components/ng2-alfresco-search/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-alfresco-search/.gitignore
+++ b/ng2-components/ng2-alfresco-search/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-alfresco-search/.npmignore b/ng2-components/ng2-alfresco-search/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-alfresco-search/.npmignore
+++ b/ng2-components/ng2-alfresco-search/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-alfresco-search/karma-test-shim.js b/ng2-components/ng2-alfresco-search/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-alfresco-search/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-search/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-alfresco-search/package.json b/ng2-components/ng2-alfresco-search/package.json
index 310a41da92..e606650b36 100644
--- a/ng2-components/ng2-alfresco-search/package.json
+++ b/ng2-components/ng2-alfresco-search/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-alfresco-search.js",
   "repository": {
diff --git a/ng2-components/ng2-alfresco-social/.gitignore b/ng2-components/ng2-alfresco-social/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-alfresco-social/.gitignore
+++ b/ng2-components/ng2-alfresco-social/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-alfresco-social/.npmignore b/ng2-components/ng2-alfresco-social/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-alfresco-social/.npmignore
+++ b/ng2-components/ng2-alfresco-social/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-alfresco-social/karma-test-shim.js b/ng2-components/ng2-alfresco-social/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-alfresco-social/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-social/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-alfresco-social/package.json b/ng2-components/ng2-alfresco-social/package.json
index 4e5281439c..9f82940c9e 100644
--- a/ng2-components/ng2-alfresco-social/package.json
+++ b/ng2-components/ng2-alfresco-social/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-alfresco-social.js",
   "repository": {
diff --git a/ng2-components/ng2-alfresco-tag/.gitignore b/ng2-components/ng2-alfresco-tag/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-alfresco-tag/.gitignore
+++ b/ng2-components/ng2-alfresco-tag/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-alfresco-tag/.npmignore b/ng2-components/ng2-alfresco-tag/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-alfresco-tag/.npmignore
+++ b/ng2-components/ng2-alfresco-tag/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-alfresco-tag/karma-test-shim.js b/ng2-components/ng2-alfresco-tag/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-alfresco-tag/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-tag/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-alfresco-tag/package.json b/ng2-components/ng2-alfresco-tag/package.json
index f141d4cd2c..6fc86fe6d0 100644
--- a/ng2-components/ng2-alfresco-tag/package.json
+++ b/ng2-components/ng2-alfresco-tag/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-alfresco-tag.js",
   "repository": {
diff --git a/ng2-components/ng2-alfresco-upload/.gitignore b/ng2-components/ng2-alfresco-upload/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-alfresco-upload/.gitignore
+++ b/ng2-components/ng2-alfresco-upload/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-alfresco-upload/.npmignore b/ng2-components/ng2-alfresco-upload/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-alfresco-upload/.npmignore
+++ b/ng2-components/ng2-alfresco-upload/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-alfresco-upload/karma-test-shim.js b/ng2-components/ng2-alfresco-upload/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-alfresco-upload/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-upload/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-alfresco-upload/package.json b/ng2-components/ng2-alfresco-upload/package.json
index 9397c54744..6f0742b867 100644
--- a/ng2-components/ng2-alfresco-upload/package.json
+++ b/ng2-components/ng2-alfresco-upload/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-alfresco-upload.js",
   "repository": {
diff --git a/ng2-components/ng2-alfresco-userinfo/.gitignore b/ng2-components/ng2-alfresco-userinfo/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-alfresco-userinfo/.gitignore
+++ b/ng2-components/ng2-alfresco-userinfo/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-alfresco-userinfo/.npmignore b/ng2-components/ng2-alfresco-userinfo/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-alfresco-userinfo/.npmignore
+++ b/ng2-components/ng2-alfresco-userinfo/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js b/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-alfresco-userinfo/package.json b/ng2-components/ng2-alfresco-userinfo/package.json
index 8dd91e1b9d..9842b41455 100644
--- a/ng2-components/ng2-alfresco-userinfo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-alfresco-userinfo.js",
   "repository": {
diff --git a/ng2-components/ng2-alfresco-viewer/.gitignore b/ng2-components/ng2-alfresco-viewer/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-alfresco-viewer/.gitignore
+++ b/ng2-components/ng2-alfresco-viewer/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-alfresco-viewer/.npmignore b/ng2-components/ng2-alfresco-viewer/.npmignore
index c1922c5b29..6e5ae18ee1 100644
--- a/ng2-components/ng2-alfresco-viewer/.npmignore
+++ b/ng2-components/ng2-alfresco-viewer/.npmignore
@@ -1,5 +1,7 @@
 npm-debug.log
 .idea
+.npmrc
+
 demo/localTestFile.pdf
 
 coverage/
diff --git a/ng2-components/ng2-alfresco-viewer/karma-test-shim.js b/ng2-components/ng2-alfresco-viewer/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-alfresco-viewer/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-viewer/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json
index ee1524a624..56c620ef88 100644
--- a/ng2-components/ng2-alfresco-viewer/package.json
+++ b/ng2-components/ng2-alfresco-viewer/package.json
@@ -4,7 +4,8 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
diff --git a/ng2-components/ng2-alfresco-webscript/.gitignore b/ng2-components/ng2-alfresco-webscript/.gitignore
index fb23a7fef5..8dd503835e 100644
--- a/ng2-components/ng2-alfresco-webscript/.gitignore
+++ b/ng2-components/ng2-alfresco-webscript/.gitignore
@@ -1,6 +1,7 @@
 npm-debug.log
 node_modules
 .idea
+.npmrc
 typings
 coverage
 dist
diff --git a/ng2-components/ng2-alfresco-webscript/.npmignore b/ng2-components/ng2-alfresco-webscript/.npmignore
index 8bb008aff4..cb0b8b2890 100644
--- a/ng2-components/ng2-alfresco-webscript/.npmignore
+++ b/ng2-components/ng2-alfresco-webscript/.npmignore
@@ -1,5 +1,6 @@
 npm-debug.log
 .idea
+.npmrc
 
 coverage/
 demo/
diff --git a/ng2-components/ng2-alfresco-webscript/karma-test-shim.js b/ng2-components/ng2-alfresco-webscript/karma-test-shim.js
index a09906cdc6..64b94c4ab5 100644
--- a/ng2-components/ng2-alfresco-webscript/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-webscript/karma-test-shim.js
@@ -11,6 +11,8 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
 var appContext = require.context('./src', true, /\.spec\.ts/);
 appContext.keys().forEach(appContext);
 
diff --git a/ng2-components/ng2-alfresco-webscript/package.json b/ng2-components/ng2-alfresco-webscript/package.json
index 3ed4ee5a3b..99b51f5674 100644
--- a/ng2-components/ng2-alfresco-webscript/package.json
+++ b/ng2-components/ng2-alfresco-webscript/package.json
@@ -4,12 +4,13 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "rimraf dist node_modules typings bundles coverage",
+    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run test"
+    "prepublish" : "npm run build"
   },
   "main": "bundles/ng2-alfresco-webscript.js",
   "repository": {
diff --git a/scripts/README.md b/scripts/README.md
index ef45012557..e381dbc0cc 100644
--- a/scripts/README.md
+++ b/scripts/README.md
@@ -38,12 +38,43 @@ feel for what's available.
 
 ```sh
 ./start.sh -update or -u
+``
+
+* Install a different version of the ng2-components specified in the package.json his option is not compatible with -d
+
+```sh
+./start.sh -version or -v COMPONENTS_VERSION
+
+./start.sh -v 1.4.0
 ```
 
 * Start the demo in development mode building the relative folder ng2-components with all the components and pointing to this component instead to the node_modules one
 
 ```sh
-./start.sh -develop -d
+./start.sh -develop or -d
+```
+
+* Start the demo start the demo shell in dist mode
+
+```sh
+./start.sh -dist
+```
+
+* If you want start the demo shell using an alfresco-js-api referenced by commit-ish version of the JS-API
+
+```sh
+./start.sh -gitjsapi commit-ish
+
+./start.sh -gitjsapi development
+ 
+./start.sh -gitjsapi de92be966e2ce7eca642ca9e9d7647ba4f849356
+```
+
+* If you want start the alfresco-js-api against a commit-ish version of the JS-API
+
+```sh
+./start.sh -vjsapi 1.4.0
+
 ```
 
 * If you want to build all your local component:
@@ -55,13 +86,23 @@ feel for what's available.
 * If you want to build all your local component and run the test:
 
 ```sh
-./npm-buid-alll.sh -t or -test
+./npm-buid-all.sh -t or -test
 ```
 
 * If you want clean the ng2-components folder node_modules before to build
 
 ```sh
-./npm-buid-alll.sh -c
+./npm-buid-all.sh -c
+```* 
+
+If you want build to build all the components against a commit-ish version of the JS-API
+
+```sh
+ ./npm-buid-all.sh -gitjsapi commit-ish
+
+ ./npm-build-all.sh -gitjsapi development
+ 
+ ./npm-build-all.sh -gitjsapi de92be966e2ce7eca642ca9e9d7647ba4f849356
 ```
 
 * If you want clean all your local component and the demo shell:
diff --git a/scripts/npm-build-all.sh b/scripts/npm-build-all.sh
index 396202dfed..c4c5a7370c 100755
--- a/scripts/npm-build-all.sh
+++ b/scripts/npm-build-all.sh
@@ -3,6 +3,8 @@
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 eval RUN_TEST=false
 eval EXEC_CLEAN=false
+eval EXEC_GIT_NPM_INSTALL_JSAPI=false
+eval GIT_ISH=""
 
 eval projects=( "ng2-alfresco-core"
     "ng2-alfresco-datatable"
@@ -21,11 +23,13 @@ eval projects=( "ng2-alfresco-core"
     "ng2-alfresco-viewer"
     "ng2-alfresco-webscript"
     "ng2-alfresco-userinfo" )
+
 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 "-c or -clean the ndode_moduels folder before to start the build"
+    echo "-c or -clean the node_modules folder before to start the build"
+    echo "-gitjsapi to build all the components against a commit-ish version of the JS-API"
 }
 
 enable_test(){
@@ -37,6 +41,11 @@ test_project() {
     npm run test -- --component $1 || exit 1
 }
 
+enable_js_api_git_link() {
+    GIT_ISH='git://github.com/Alfresco/alfresco-js-api.git#'$1
+    EXEC_GIT_NPM_INSTALL_JSAPI=true
+}
+
 clean() {
     EXEC_CLEAN=true
 }
@@ -45,6 +54,8 @@ while [[ $1 == -* ]]; do
     case "$1" in
       -h|--help|-\?) show_help; exit 0;;
       -t|--test)  enable_test; shift;;
+      -gitjsapi)  enable_js_api_git_link $2; shift 2;;
+      -v|--version)  install_version_pacakge $2; shift 2;;
       -c|--clean)  clean; shift;;
       -*) echo "invalid option: $1" 1>&2; show_help; exit 1;;
     esac
@@ -65,6 +76,14 @@ npm run pkg-build
 echo "====== Install ng2-components dependencies ====="
 npm install
 
+if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
+  echo "====== Use the alfresco JS-API  '$GIT_ISH'====="
+  npm install $GIT_ISH
+  cd "$DIR/../ng2-components/node_modules/alfresco-js-api"
+  npm install
+  cd "$DIR/../ng2-components/"
+fi
+
 echo "====== Build ng2-components ====="
 npm run build || exit 1
 
diff --git a/scripts/npm-publish.sh b/scripts/npm-publish.sh
index 5a9f523a2f..df2de00a66 100755
--- a/scripts/npm-publish.sh
+++ b/scripts/npm-publish.sh
@@ -3,7 +3,9 @@
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
 eval FORCE_PUBLISH=false
-eval NPM_REGISTRY=""
+eval EXEC_CHANGE_REGISTRY=false
+eval NPM_REGISTRY=false
+eval TOKEN_REGISTRY=""
 eval OPTIONS=""
 
 cd "$DIR/../demo-shell-ng2"
@@ -13,6 +15,7 @@ show_help() {
     echo ""
     echo "-f or -force publish the package with force"
     echo "-r or -registry to publish in an alternative npm registry -registry 'http://npm.local.me:8080/' "
+    echo "-token auth token for publish in the npm registry"
     echo "-t or -tag to add a tag when publish a package"
 }
 
@@ -20,6 +23,21 @@ enable_force(){
     OPTIONS="$OPTIONS -force"
 }
 
+enable_change_registry(){
+    NPM_REGISTRY=$1
+    EXEC_CHANGE_REGISTRY=true
+}
+
+get_token_registry(){
+    TOKEN_REGISTRY=$1
+
+    if [[ "${TOKEN_REGISTRY}" == "" ]]
+    then
+      echo "token missing -token"
+      exit 0
+    fi
+}
+
 add_tag(){
     eval TAG=$1
 
@@ -34,8 +52,6 @@ add_tag(){
 }
 
 change_registry(){
-    NPM_REGISTRY=$1
-
     if [[ "${NPM_REGISTRY}" == "" ]]
     then
       echo "NPM registry required WITH OPTION -r | -registry"
@@ -43,7 +59,10 @@ change_registry(){
     fi
 
     echo "====== CHANGE REGISTRY: ${NPM_REGISTRY} ====="
-    npm config set registry ${NPM_REGISTRY}
+    touch .npmrc
+    echo 'strict-ssl=false' >> .npmrc
+    echo 'registry=http://'${NPM_REGISTRY} >> .npmrc
+    echo '//'${NPM_REGISTRY}'/:_authToken="'${TOKEN_REGISTRY}'"' >> .npmrc
 }
 
 while [[ $1 == -* ]]; do
@@ -51,7 +70,7 @@ while [[ $1 == -* ]]; do
       -h|--help|-\?) show_help; exit 0;;
       -t|--tag)  add_tag $2; shift 2;;
       -f|--force)  enable_force; shift;;
-      -r|--registry)  change_registry $2; shift 2;;
+      -r|--registry) get_token_registry $2; shift 2;;
       -*) echo "invalid option: $1" 1>&2; show_help; exit 0;;
     esac
 done
@@ -75,10 +94,23 @@ for PACKAGE in \
   ng2-alfresco-userinfo
 do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
-  echo "====== PUBLISHING: ${DESTDIR} ===== npm publish ${OPTIONS}"
+  echo "====== MOVE DIR: ${DESTDIR} ===== "
   cd ${DESTDIR}
+  echo "====== INSTALL AND CLEAN ===== "
+  npm install rimraf
   npm run clean
   npm install
+
+  if $EXEC_CHANGE_REGISTRY == true; then
+    change_registry
+  fi
+
+  echo "====== PUBLISHING: ${DESTDIR} ===== npm publish ${OPTIONS}"
   npm publish ${OPTIONS}
+
+  if $EXEC_CHANGE_REGISTRY == true; then
+      npm run rimraf .npmrc
+  fi
+
   cd ${DIR}
 done
diff --git a/scripts/start.sh b/scripts/start.sh
index 9b8625f256..ea6e0a84d1 100755
--- a/scripts/start.sh
+++ b/scripts/start.sh
@@ -6,15 +6,44 @@ eval EXEC_INSTALL=false
 eval EXEC_UPDATE=false
 eval EXEC_CLEAN=false
 eval EXEC_DEVELOP=false
+eval EXEC_VERSION=false
+eval ENABLE_DIST=false
+eval EXEC_GIT_NPM_INSTALL_JSAPI=false
+eval EXEC_VERSION_JSAPI=false
+eval JSAPI_VERSION=""
+eval NG2_COMPONENTS_VERSION=""
+eval GIT_ISH=""
+
+eval projects=( "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-social"
+    "ng2-alfresco-tag"
+    "ng2-alfresco-social"
+    "ng2-alfresco-upload"
+    "ng2-alfresco-viewer"
+    "ng2-alfresco-webscript"
+    "ng2-alfresco-userinfo" )
 
 show_help() {
     echo "Usage: start.sh"
     echo ""
     echo "-d or -develop start the demo shell using the relative ng2-components folder to link the components"
+    echo "-dist start the demo shell in dist mode"
     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 "-v or -version install different version of ng2_components from npm defined in the package.json this option is not compatible with -d"
     echo "-c or -clean  clean the demo shell and reinstall the dependencies"
     echo "-r or -registry to download the packages from an alternative npm registry example -registry 'http://npm.local.me:8080/' "
+    echo "-gitjsapi to build all the components against a commit-ish version of the JS-API"
+    echo "-vjsapi install different version from npm of JS-API defined in the package.json"
 }
 
 install() {
@@ -29,6 +58,39 @@ develop() {
     EXEC_DEVELOP=true
 }
 
+enable_dist() {
+    ENABLE_DIST=true
+}
+
+enable_js_api_git_link() {
+    GIT_ISH='git://github.com/Alfresco/alfresco-js-api.git#'$1
+    EXEC_GIT_NPM_INSTALL_JSAPI=true
+}
+
+version_component() {
+    NG2_COMPONENTS_VERSION=$1
+
+    if [[ "${NG2_COMPONENTS_VERSION}" == "" ]]
+    then
+      echo "NG2 components version required with -v | -version"
+      exit 0
+    fi
+
+    EXEC_VERSION=true
+}
+
+version_js_api() {
+    JSAPI_VERSION=$1
+
+    if [[ "${JSAPI_VERSION}" == "" ]]
+    then
+      echo "JSAPI version required with -vJSApi"
+      exit 0
+    fi
+
+    EXEC_VERSION_JSAPI=true
+}
+
 change_registry(){
     NPM_REGISTRY=$1
 
@@ -55,6 +117,10 @@ while [[ $1  == -* ]]; do
       -c|--clean) clean; shift;;
       -d|--develop) develop; shift;;
       -r|--registry)  change_registry $2; shift 2;;
+      -r|--version)  version_component $2; shift 2;;
+      -dist)  enable_dist; shift;;
+      -gitjsapi)  enable_js_api_git_link $2; shift 2;;
+      -vjsapi)  version_js_api $2; shift 2;;
       -*) shift;;
     esac
 done
@@ -78,21 +144,71 @@ if $EXEC_INSTALL == true; then
   npm install
 fi
 
-if $EXEC_UPDATE == true; then
-  echo "====== Update Demo shell ====="
+if $EXEC_INSTALL == true; then
+  echo "====== Install Demo shell ====="
   cd "$DIR/../demo-shell-ng2"
-  npm update
+  npm install
+fi
+
+if $EXEC_VERSION == true; then
+  echo "====== Install version "${NG2_COMPONENTS_VERSION}" of ng2-components ====="
+  cd "$DIR/../demo-shell-ng2"
+
+    if [[ "${EXEC_DEVELOP}" == "" ]]
+    then
+      echo "Option -v is not compatible with -d see the help"
+      exit 0
+    fi
+
+    for PACKAGE in ${projects[@]}
+    do
+      npm install ${PACKAGE}@${NG2_COMPONENTS_VERSION}
+    done
+fi
+
+if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
+  echo "====== Use the alfresco JS-API  '$GIT_ISH'====="
+  npm install $GIT_ISH
+  cd "$DIR/../ng2-components/node_modules/alfresco-js-api"
+  npm install
+  cd "$DIR/../ng2-components/"
+fi
+
+if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
+  echo "====== Use the alfresco JS-API  '$GIT_ISH'====="
+  npm install $GIT_ISH
+  cd "$DIR/../ng2-components/node_modules/alfresco-js-api"
+  npm install
+fi
+
+if $EXEC_VERSION_JSAPI == true; then
+  echo "====== Use the alfresco JS-API '$JSAPI_VERSION'====="
+  cd "$DIR/../demo-shell-ng2"
+  npm install alfresco-js-api@${JSAPI_VERSION}
 fi
 
 if $EXEC_DEVELOP == true; then
-  echo "====== Start Demo shell development mode====="
   cd "$DIR/../demo-shell-ng2"
-  npm run start:dev
+    if $ENABLE_DIST == true; then
+        echo "====== Build and start dist Demo shell ====="
+        npm run build:dev
+        npm run start:dist
+    else
+        echo "====== Start Demo shell ====="
+        npm run start:dev
+    fi
+else
+  cd "$DIR/../demo-shell-ng2"
+
+  if $ENABLE_DIST == true; then
+    echo "====== Build and start dist Demo shell ====="
+    npm run build
+    npm run start:dist
+  else
+    echo "====== Start Demo shell dev mode====="
+    npm run start
+  fi
+
 fi
 
-if $EXEC_DEVELOP == false; then
-  echo "====== Start Demo shell ====="
-  cd "$DIR/../demo-shell-ng2"
-  npm run start
-fi
 

From 404ea5c8520b1e59509f2909a33223be8e05f49c Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Fri, 12 May 2017 15:26:15 +0100
Subject: [PATCH 35/72] token option

---
 scripts/npm-publish.sh | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/scripts/npm-publish.sh b/scripts/npm-publish.sh
index df2de00a66..c4168f520f 100755
--- a/scripts/npm-publish.sh
+++ b/scripts/npm-publish.sh
@@ -70,7 +70,8 @@ while [[ $1 == -* ]]; do
       -h|--help|-\?) show_help; exit 0;;
       -t|--tag)  add_tag $2; shift 2;;
       -f|--force)  enable_force; shift;;
-      -r|--registry) get_token_registry $2; shift 2;;
+      -token) get_token_registry $2; shift 2;;
+      -r|--registry) enable_change_registry $2; shift 2;;
       -*) echo "invalid option: $1" 1>&2; show_help; exit 0;;
     esac
 done
@@ -96,7 +97,7 @@ do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
   echo "====== MOVE DIR: ${DESTDIR} ===== "
   cd ${DESTDIR}
-  echo "====== INSTALL AND CLEAN ===== "
+  echo "====== INSTALL AND CLEAN ${PACKAGE} ===== "
   npm install rimraf
   npm run clean
   npm install

From 4db98a1d7bdcac0cebf6d4af065e60e5ee865365 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Fri, 12 May 2017 15:36:53 +0100
Subject: [PATCH 36/72] Fix Readme scripts

---
 scripts/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/README.md b/scripts/README.md
index e381dbc0cc..a6205bd6a8 100644
--- a/scripts/README.md
+++ b/scripts/README.md
@@ -38,7 +38,7 @@ feel for what's available.
 
 ```sh
 ./start.sh -update or -u
-``
+```
 
 * Install a different version of the ng2-components specified in the package.json his option is not compatible with -d
 
@@ -93,9 +93,9 @@ feel for what's available.
 
 ```sh
 ./npm-buid-all.sh -c
-```* 
+```
 
-If you want build to build all the components against a commit-ish version of the JS-API
+* If you want build to build all the components against a commit-ish version of the JS-API
 
 ```sh
  ./npm-buid-all.sh -gitjsapi commit-ish

From 130c2e4428564a55649db55ce368a891572e7b9f Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Sat, 13 May 2017 01:05:01 +0100
Subject: [PATCH 37/72] auth service api improvements (#1865)

Rename Auth Service events:
- loginSubject -> onLogin
- logoutSubject -> onLogout
---
 ng2-components/ng2-alfresco-core/README.md             |  7 +++++++
 .../src/services/alfresco-authentication.service.ts    | 10 +++++-----
 .../src/components/user-info.component.ts              |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/ng2-components/ng2-alfresco-core/README.md b/ng2-components/ng2-alfresco-core/README.md
index 1f9a408051..cb3d7fb468 100644
--- a/ng2-components/ng2-alfresco-core/README.md
+++ b/ng2-components/ng2-alfresco-core/README.md
@@ -331,6 +331,13 @@ export class MyComponent implements OnInit {
 
 The authentication service is used inside the [login component](../ng2-alfresco-login) and is possible to find there an example of how to use it.
 
+### Events
+
+| Name | Description |
+| --- | --- |
+| onLogin | Raised when user logs in |
+| onLogout | Raised when user logs out |
+
 ```ts
 import { NgModule, Component } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
diff --git a/ng2-components/ng2-alfresco-core/src/services/alfresco-authentication.service.ts b/ng2-components/ng2-alfresco-core/src/services/alfresco-authentication.service.ts
index 0bf11793aa..2ca469958b 100644
--- a/ng2-components/ng2-alfresco-core/src/services/alfresco-authentication.service.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/alfresco-authentication.service.ts
@@ -24,8 +24,9 @@ import { AlfrescoApiService } from './alfresco-api.service';
 
 @Injectable()
 export class AlfrescoAuthenticationService {
-    loginSubject: Subject<any> = new Subject<any>();
-    logoutSubject: Subject<any> = new Subject<any>();
+
+    onLogin: Subject<any> = new Subject<any>();
+    onLogout: Subject<any> = new Subject<any>();
 
     constructor(private settingsService: AlfrescoSettingsService,
                 public alfrescoApi: AlfrescoApiService,
@@ -52,7 +53,7 @@ export class AlfrescoAuthenticationService {
         return Observable.fromPromise(this.callApiLogin(username, password))
             .map((response: any) => {
                 this.saveTickets();
-                this.loginSubject.next(response);
+                this.onLogin.next(response);
                 return {type: this.settingsService.getProviders(), ticket: response};
             })
             .catch(err => this.handleError(err));
@@ -75,10 +76,9 @@ export class AlfrescoAuthenticationService {
      */
     logout() {
         return Observable.fromPromise(this.callApiLogout())
-            .map(res => <any> res)
             .do(response => {
                 this.removeTicket();
-                this.logoutSubject.next(response);
+                this.onLogout.next(response);
                 return response;
             })
             .catch(err => this.handleError(err));
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 7dadf39f03..fc51f3142d 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
@@ -56,7 +56,7 @@ export class UserInfoComponent implements OnInit {
         if (translateService) {
             translateService.addTranslationFolder('ng2-alfresco-userinfo', 'node_modules/ng2-alfresco-userinfo/src');
         }
-        authService.loginSubject.subscribe((response) => {
+        authService.onLogin.subscribe((response) => {
             this.getUserInfo();
         });
     }

From af82f836696514ef1d509e25235235a6c30b9a65 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Sun, 14 May 2017 10:04:44 +0100
Subject: [PATCH 38/72] Add config files in any components folder (#1878)

* add config files in any components folder
* all test run option ft and option to skip build and run only test
---
 ng2-components/config/karma.conf-all.js       |   8 +-
 ng2-components/config/webpack.build.js        |   2 +-
 ng2-components/karma-test-shim.js             |  22 ++++
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-activiti-analytics/config/helpers.js  |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../config/webpack.test.js                    |  85 ++++++++++++
 .../ng2-activiti-analytics/karma.conf.js      |   5 -
 .../ng2-activiti-analytics/package.json       |   9 --
 .../ng2-activiti-analytics/webpack.build.js   |   4 +-
 .../ng2-activiti-analytics/webpack.test.js    |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-activiti-diagrams/config/helpers.js   |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../config/webpack.test.js                    |  85 ++++++++++++
 .../ng2-activiti-diagrams/karma.conf.js       |   5 -
 .../ng2-activiti-diagrams/package.json        |   9 --
 .../ng2-activiti-diagrams/webpack.build.js    |   4 +-
 .../ng2-activiti-diagrams/webpack.test.js     |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-activiti-form/config/helpers.js       |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../ng2-activiti-form/config/webpack.test.js  |  85 ++++++++++++
 .../ng2-activiti-form/karma.conf.js           |   5 -
 ng2-components/ng2-activiti-form/package.json |   9 --
 .../ng2-activiti-form/webpack.build.js        |   4 +-
 .../ng2-activiti-form/webpack.test.js         |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../config/helpers.js                         |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../config/webpack.test.js                    |  85 ++++++++++++
 .../ng2-activiti-processlist/karma.conf.js    |   5 -
 .../ng2-activiti-processlist/package.json     |   9 --
 .../ng2-activiti-processlist/webpack.build.js |   4 +-
 .../ng2-activiti-processlist/webpack.test.js  |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-activiti-tasklist/config/helpers.js   |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../config/webpack.test.js                    |  85 ++++++++++++
 .../ng2-activiti-tasklist/karma.conf.js       |   5 -
 .../ng2-activiti-tasklist/package.json        |  11 +-
 .../ng2-activiti-tasklist/webpack.build.js    |   4 +-
 .../ng2-activiti-tasklist/webpack.test.js     |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-alfresco-core/config/helpers.js       |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../ng2-alfresco-core/config/webpack.test.js  |  85 ++++++++++++
 .../ng2-alfresco-core/karma.conf.js           |   5 -
 ng2-components/ng2-alfresco-core/package.json |  12 +-
 .../src/services/notification.service.spec.ts |  18 ++-
 .../ng2-alfresco-core/webpack.build.js        |   4 +-
 .../ng2-alfresco-core/webpack.test.js         |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-alfresco-datatable/config/helpers.js  |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../config/webpack.test.js                    |  85 ++++++++++++
 .../ng2-alfresco-datatable/karma.conf.js      |   5 -
 .../ng2-alfresco-datatable/package.json       |  11 +-
 .../ng2-alfresco-datatable/webpack.build.js   |   4 +-
 .../ng2-alfresco-datatable/webpack.test.js    |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../config/helpers.js                         |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../config/webpack.test.js                    |  85 ++++++++++++
 .../ng2-alfresco-documentlist/karma.conf.js   |   5 -
 .../ng2-alfresco-documentlist/package.json    |  11 +-
 .../webpack.build.js                          |   4 +-
 .../ng2-alfresco-documentlist/webpack.test.js |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-alfresco-login/config/helpers.js      |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../ng2-alfresco-login/config/webpack.test.js |  85 ++++++++++++
 .../ng2-alfresco-login/karma.conf.js          |   5 -
 .../ng2-alfresco-login/package.json           |  11 +-
 .../ng2-alfresco-login/webpack.build.js       |   4 +-
 .../ng2-alfresco-login/webpack.test.js        |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-alfresco-search/config/helpers.js     |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../config/webpack.test.js                    |  85 ++++++++++++
 .../ng2-alfresco-search/karma.conf.js         |   5 -
 .../ng2-alfresco-search/package.json          |  11 +-
 .../ng2-alfresco-search/webpack.build.js      |   4 +-
 .../ng2-alfresco-search/webpack.test.js       |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-alfresco-social/config/helpers.js     |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../config/webpack.test.js                    |  85 ++++++++++++
 .../ng2-alfresco-social/karma.conf.js         |   5 -
 .../ng2-alfresco-social/package.json          |   9 --
 .../ng2-alfresco-social/webpack.build.js      |   4 +-
 .../ng2-alfresco-social/webpack.test.js       |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-alfresco-tag/config/helpers.js        |  10 ++
 .../ng2-alfresco-tag/config/webpack.common.js | 124 ++++++++++++++++++
 .../ng2-alfresco-tag/config/webpack.test.js   |  85 ++++++++++++
 ng2-components/ng2-alfresco-tag/karma.conf.js |   5 -
 ng2-components/ng2-alfresco-tag/package.json  |   9 --
 .../ng2-alfresco-tag/webpack.build.js         |   4 +-
 .../ng2-alfresco-tag/webpack.test.js          |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-alfresco-upload/config/helpers.js     |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../config/webpack.test.js                    |  85 ++++++++++++
 .../ng2-alfresco-upload/karma.conf.js         |   5 -
 .../ng2-alfresco-upload/package.json          |  11 +-
 .../ng2-alfresco-upload/webpack.build.js      |   4 +-
 .../ng2-alfresco-upload/webpack.test.js       |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-alfresco-userinfo/config/helpers.js   |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../config/webpack.test.js                    |  85 ++++++++++++
 .../ng2-alfresco-userinfo/karma.conf.js       |   5 -
 .../ng2-alfresco-userinfo/package.json        |   9 --
 .../ng2-alfresco-userinfo/webpack.build.js    |   4 +-
 .../ng2-alfresco-userinfo/webpack.test.js     |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-alfresco-viewer/config/helpers.js     |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../config/webpack.test.js                    |  85 ++++++++++++
 .../ng2-alfresco-viewer/karma.conf.js         |   5 -
 .../ng2-alfresco-viewer/webpack.build.js      |   2 +-
 .../ng2-alfresco-viewer/webpack.test.js       |   2 +-
 .../config/assets/license_header.txt          |  16 +++
 .../config/assets/license_header_add.txt      |  14 ++
 .../config/assets/tslint.json                 | 118 +++++++++++++++++
 .../custom-loaders/file-loader-multi.js       |  70 ++++++++++
 .../config/custom-loaders/license-check.js    |  67 ++++++++++
 .../ng2-alfresco-webscript/config/helpers.js  |  10 ++
 .../config/webpack.common.js                  | 124 ++++++++++++++++++
 .../config/webpack.test.js                    |  85 ++++++++++++
 .../ng2-alfresco-webscript/karma.conf.js      |   5 -
 .../ng2-alfresco-webscript/package.json       |   9 --
 .../ng2-alfresco-webscript/webpack.build.js   |   4 +-
 .../ng2-alfresco-webscript/webpack.test.js    |   2 +-
 ng2-components/package.json                   |  12 +-
 scripts/README.md                             |  14 ++
 scripts/npm-build-all.sh                      |  25 +++-
 scripts/npm-publish.sh                        |   2 +-
 199 files changed, 8193 insertions(+), 298 deletions(-)
 create mode 100644 ng2-components/karma-test-shim.js
 create mode 100644 ng2-components/ng2-activiti-analytics/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-activiti-analytics/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-activiti-analytics/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-activiti-analytics/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-activiti-analytics/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-activiti-analytics/config/helpers.js
 create mode 100644 ng2-components/ng2-activiti-analytics/config/webpack.common.js
 create mode 100644 ng2-components/ng2-activiti-analytics/config/webpack.test.js
 create mode 100644 ng2-components/ng2-activiti-diagrams/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-activiti-diagrams/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-activiti-diagrams/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-activiti-diagrams/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-activiti-diagrams/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-activiti-diagrams/config/helpers.js
 create mode 100644 ng2-components/ng2-activiti-diagrams/config/webpack.common.js
 create mode 100644 ng2-components/ng2-activiti-diagrams/config/webpack.test.js
 create mode 100644 ng2-components/ng2-activiti-form/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-activiti-form/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-activiti-form/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-activiti-form/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-activiti-form/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-activiti-form/config/helpers.js
 create mode 100644 ng2-components/ng2-activiti-form/config/webpack.common.js
 create mode 100644 ng2-components/ng2-activiti-form/config/webpack.test.js
 create mode 100644 ng2-components/ng2-activiti-processlist/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-activiti-processlist/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-activiti-processlist/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-activiti-processlist/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-activiti-processlist/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-activiti-processlist/config/helpers.js
 create mode 100644 ng2-components/ng2-activiti-processlist/config/webpack.common.js
 create mode 100644 ng2-components/ng2-activiti-processlist/config/webpack.test.js
 create mode 100644 ng2-components/ng2-activiti-tasklist/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-activiti-tasklist/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-activiti-tasklist/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-activiti-tasklist/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-activiti-tasklist/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-activiti-tasklist/config/helpers.js
 create mode 100644 ng2-components/ng2-activiti-tasklist/config/webpack.common.js
 create mode 100644 ng2-components/ng2-activiti-tasklist/config/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-core/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-alfresco-core/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-alfresco-core/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-core/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-alfresco-core/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-alfresco-core/config/helpers.js
 create mode 100644 ng2-components/ng2-alfresco-core/config/webpack.common.js
 create mode 100644 ng2-components/ng2-alfresco-core/config/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-datatable/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-alfresco-datatable/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-alfresco-datatable/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-datatable/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-alfresco-datatable/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-alfresco-datatable/config/helpers.js
 create mode 100644 ng2-components/ng2-alfresco-datatable/config/webpack.common.js
 create mode 100644 ng2-components/ng2-alfresco-datatable/config/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-documentlist/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-alfresco-documentlist/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-alfresco-documentlist/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-documentlist/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-alfresco-documentlist/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-alfresco-documentlist/config/helpers.js
 create mode 100644 ng2-components/ng2-alfresco-documentlist/config/webpack.common.js
 create mode 100644 ng2-components/ng2-alfresco-documentlist/config/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-login/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-alfresco-login/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-alfresco-login/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-login/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-alfresco-login/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-alfresco-login/config/helpers.js
 create mode 100644 ng2-components/ng2-alfresco-login/config/webpack.common.js
 create mode 100644 ng2-components/ng2-alfresco-login/config/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-search/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-alfresco-search/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-alfresco-search/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-search/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-alfresco-search/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-alfresco-search/config/helpers.js
 create mode 100644 ng2-components/ng2-alfresco-search/config/webpack.common.js
 create mode 100644 ng2-components/ng2-alfresco-search/config/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-social/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-alfresco-social/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-alfresco-social/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-social/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-alfresco-social/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-alfresco-social/config/helpers.js
 create mode 100644 ng2-components/ng2-alfresco-social/config/webpack.common.js
 create mode 100644 ng2-components/ng2-alfresco-social/config/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-tag/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-alfresco-tag/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-alfresco-tag/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-tag/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-alfresco-tag/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-alfresco-tag/config/helpers.js
 create mode 100644 ng2-components/ng2-alfresco-tag/config/webpack.common.js
 create mode 100644 ng2-components/ng2-alfresco-tag/config/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-upload/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-alfresco-upload/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-alfresco-upload/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-upload/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-alfresco-upload/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-alfresco-upload/config/helpers.js
 create mode 100644 ng2-components/ng2-alfresco-upload/config/webpack.common.js
 create mode 100644 ng2-components/ng2-alfresco-upload/config/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-userinfo/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-alfresco-userinfo/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-alfresco-userinfo/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-userinfo/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-alfresco-userinfo/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-alfresco-userinfo/config/helpers.js
 create mode 100644 ng2-components/ng2-alfresco-userinfo/config/webpack.common.js
 create mode 100644 ng2-components/ng2-alfresco-userinfo/config/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-viewer/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-alfresco-viewer/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-alfresco-viewer/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-viewer/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-alfresco-viewer/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-alfresco-viewer/config/helpers.js
 create mode 100644 ng2-components/ng2-alfresco-viewer/config/webpack.common.js
 create mode 100644 ng2-components/ng2-alfresco-viewer/config/webpack.test.js
 create mode 100644 ng2-components/ng2-alfresco-webscript/config/assets/license_header.txt
 create mode 100644 ng2-components/ng2-alfresco-webscript/config/assets/license_header_add.txt
 create mode 100644 ng2-components/ng2-alfresco-webscript/config/assets/tslint.json
 create mode 100644 ng2-components/ng2-alfresco-webscript/config/custom-loaders/file-loader-multi.js
 create mode 100644 ng2-components/ng2-alfresco-webscript/config/custom-loaders/license-check.js
 create mode 100644 ng2-components/ng2-alfresco-webscript/config/helpers.js
 create mode 100644 ng2-components/ng2-alfresco-webscript/config/webpack.common.js
 create mode 100644 ng2-components/ng2-alfresco-webscript/config/webpack.test.js

diff --git a/ng2-components/config/karma.conf-all.js b/ng2-components/config/karma.conf-all.js
index fd07cca849..2bf0225b26 100644
--- a/ng2-components/config/karma.conf-all.js
+++ b/ng2-components/config/karma.conf-all.js
@@ -7,14 +7,14 @@ module.exports = function (config) {
         frameworks: ['jasmine-ajax', 'jasmine'],
 
         files: [
-            {pattern: './node_modules/hammerjs/hammer.js', included: true, watched: false},
+            {pattern: './node_modules/hammerjs/hammer.min.js', included: true, watched: false},
 
             //diagrams
             {pattern: './node_modules/chart.js/dist/Chart.js', included: true, watched: false},
-            {pattern: './node_modules/alfresco-js-api/dist/alfresco-js-api.js', included: true, watched: false},
-            {pattern: './node_modules/raphael/raphael.js', included: true, watched: false},
+            {pattern: './node_modules/alfresco-js-api/dist/alfresco-js-api.min.js', included: true, watched: false},
+            {pattern: './node_modules/raphael/raphael.min.js', included: true, watched: false},
             {pattern: './node_modules/moment/min/moment.min.js', included: true, watched: false},
-            {pattern: './node_modules/md-date-time-picker/dist/js/mdDateTimePicker.js', included: true, watched: false},
+            {pattern: './node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js', included: true, watched: false},
 
             {pattern: './node_modules/ng2-translate/ng2-translate.js', included: false, watched: false},
             {pattern: './node_modules/ng2-charts/bundles/ng2-charts.umd.js', included: false, served: true, watched: false},
diff --git a/ng2-components/config/webpack.build.js b/ng2-components/config/webpack.build.js
index d53e802508..610e43e269 100644
--- a/ng2-components/config/webpack.build.js
+++ b/ng2-components/config/webpack.build.js
@@ -1,4 +1,4 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
 const commonConfig = require('./webpack.common.js');
 
diff --git a/ng2-components/karma-test-shim.js b/ng2-components/karma-test-shim.js
new file mode 100644
index 0000000000..0a93db5eff
--- /dev/null
+++ b/ng2-components/karma-test-shim.js
@@ -0,0 +1,22 @@
+Error.stackTraceLimit = Infinity;
+
+require('core-js/es6');
+require('core-js/es7/reflect');
+
+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');
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
+var appContext = require.context('./', true, /^(?=.*(ng2-))(?!.*node_modules).*(.([^\/]*\/[^\/]*)src)((\\\\|\/)[a-zA-Z0-9_. \-]+)+\.spec.ts/);
+appContext.keys().forEach(appContext);
+
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
+
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
diff --git a/ng2-components/ng2-activiti-analytics/config/assets/license_header.txt b/ng2-components/ng2-activiti-analytics/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-analytics/config/assets/license_header_add.txt b/ng2-components/ng2-activiti-analytics/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/config/assets/license_header_add.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-analytics/config/assets/tslint.json b/ng2-components/ng2-activiti-analytics/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-activiti-analytics/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/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/ng2-activiti-analytics/config/custom-loaders/license-check.js b/ng2-components/ng2-activiti-analytics/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-activiti-analytics/config/helpers.js b/ng2-components/ng2-activiti-analytics/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/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/ng2-activiti-analytics/config/webpack.common.js b/ng2-components/ng2-activiti-analytics/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-activiti-analytics/config/webpack.test.js b/ng2-components/ng2-activiti-analytics/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-activiti-analytics/karma.conf.js b/ng2-components/ng2-activiti-analytics/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-activiti-analytics/karma.conf.js
+++ b/ng2-components/ng2-activiti-analytics/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json
index f562749f92..691135b2f6 100644
--- a/ng2-components/ng2-activiti-analytics/package.json
+++ b/ng2-components/ng2-activiti-analytics/package.json
@@ -113,14 +113,5 @@
     "tag",
     "alfresco-component"
   ],
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-activiti-analytics/webpack.build.js b/ng2-components/ng2-activiti-analytics/webpack.build.js
index bf06f8e80f..4a1ea06eb3 100644
--- a/ng2-components/ng2-activiti-analytics/webpack.build.js
+++ b/ng2-components/ng2-activiti-analytics/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-activiti-analytics/webpack.test.js b/ng2-components/ng2-activiti-analytics/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-activiti-analytics/webpack.test.js
+++ b/ng2-components/ng2-activiti-analytics/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-activiti-diagrams/config/assets/license_header.txt b/ng2-components/ng2-activiti-diagrams/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-diagrams/config/assets/license_header_add.txt b/ng2-components/ng2-activiti-diagrams/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/config/assets/license_header_add.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-diagrams/config/assets/tslint.json b/ng2-components/ng2-activiti-diagrams/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-activiti-diagrams/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/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/ng2-activiti-diagrams/config/custom-loaders/license-check.js b/ng2-components/ng2-activiti-diagrams/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-activiti-diagrams/config/helpers.js b/ng2-components/ng2-activiti-diagrams/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/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/ng2-activiti-diagrams/config/webpack.common.js b/ng2-components/ng2-activiti-diagrams/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-activiti-diagrams/config/webpack.test.js b/ng2-components/ng2-activiti-diagrams/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-activiti-diagrams/karma.conf.js b/ng2-components/ng2-activiti-diagrams/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-activiti-diagrams/karma.conf.js
+++ b/ng2-components/ng2-activiti-diagrams/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-activiti-diagrams/package.json b/ng2-components/ng2-activiti-diagrams/package.json
index f950286ec6..1b8864ed2e 100644
--- a/ng2-components/ng2-activiti-diagrams/package.json
+++ b/ng2-components/ng2-activiti-diagrams/package.json
@@ -105,14 +105,5 @@
     "alfresco-analytics",
     "alfresco-diagrams"
   ],
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-activiti-diagrams/webpack.build.js b/ng2-components/ng2-activiti-diagrams/webpack.build.js
index 9c7a2eb9c2..b4d7b1f542 100644
--- a/ng2-components/ng2-activiti-diagrams/webpack.build.js
+++ b/ng2-components/ng2-activiti-diagrams/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-activiti-diagrams/webpack.test.js b/ng2-components/ng2-activiti-diagrams/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-activiti-diagrams/webpack.test.js
+++ b/ng2-components/ng2-activiti-diagrams/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-activiti-form/config/assets/license_header.txt b/ng2-components/ng2-activiti-form/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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/config/assets/license_header_add.txt b/ng2-components/ng2-activiti-form/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/config/assets/license_header_add.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/config/assets/tslint.json b/ng2-components/ng2-activiti-form/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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-form/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-activiti-form/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/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/ng2-activiti-form/config/custom-loaders/license-check.js b/ng2-components/ng2-activiti-form/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-activiti-form/config/helpers.js b/ng2-components/ng2-activiti-form/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/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/ng2-activiti-form/config/webpack.common.js b/ng2-components/ng2-activiti-form/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-activiti-form/config/webpack.test.js b/ng2-components/ng2-activiti-form/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-activiti-form/karma.conf.js b/ng2-components/ng2-activiti-form/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-activiti-form/karma.conf.js
+++ b/ng2-components/ng2-activiti-form/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-activiti-form/package.json b/ng2-components/ng2-activiti-form/package.json
index 01f4d3dfe2..2886e31b79 100644
--- a/ng2-components/ng2-activiti-form/package.json
+++ b/ng2-components/ng2-activiti-form/package.json
@@ -108,14 +108,5 @@
     "webpack-merge": "2.6.1",
     "wsrv": "^0.1.7"
   },
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-activiti-form/webpack.build.js b/ng2-components/ng2-activiti-form/webpack.build.js
index ca03eac369..44d7d15072 100644
--- a/ng2-components/ng2-activiti-form/webpack.build.js
+++ b/ng2-components/ng2-activiti-form/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-activiti-form/webpack.test.js b/ng2-components/ng2-activiti-form/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-activiti-form/webpack.test.js
+++ b/ng2-components/ng2-activiti-form/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-activiti-processlist/config/assets/license_header.txt b/ng2-components/ng2-activiti-processlist/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-processlist/config/assets/license_header_add.txt b/ng2-components/ng2-activiti-processlist/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/config/assets/license_header_add.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-processlist/config/assets/tslint.json b/ng2-components/ng2-activiti-processlist/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-activiti-processlist/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/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/ng2-activiti-processlist/config/custom-loaders/license-check.js b/ng2-components/ng2-activiti-processlist/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-activiti-processlist/config/helpers.js b/ng2-components/ng2-activiti-processlist/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/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/ng2-activiti-processlist/config/webpack.common.js b/ng2-components/ng2-activiti-processlist/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-activiti-processlist/config/webpack.test.js b/ng2-components/ng2-activiti-processlist/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-activiti-processlist/karma.conf.js b/ng2-components/ng2-activiti-processlist/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-activiti-processlist/karma.conf.js
+++ b/ng2-components/ng2-activiti-processlist/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-activiti-processlist/package.json b/ng2-components/ng2-activiti-processlist/package.json
index bc415c3316..582c9a34b9 100644
--- a/ng2-components/ng2-activiti-processlist/package.json
+++ b/ng2-components/ng2-activiti-processlist/package.json
@@ -110,14 +110,5 @@
     "webpack-merge": "2.6.1",
     "wsrv": "^0.1.7"
   },
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": false,
-    "logInfo": false,
-    "logError": true
-  },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-activiti-processlist/webpack.build.js b/ng2-components/ng2-activiti-processlist/webpack.build.js
index 00308bce8f..e4e4a4e69f 100644
--- a/ng2-components/ng2-activiti-processlist/webpack.build.js
+++ b/ng2-components/ng2-activiti-processlist/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-activiti-processlist/webpack.test.js b/ng2-components/ng2-activiti-processlist/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-activiti-processlist/webpack.test.js
+++ b/ng2-components/ng2-activiti-processlist/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-activiti-tasklist/config/assets/license_header.txt b/ng2-components/ng2-activiti-tasklist/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-tasklist/config/assets/license_header_add.txt b/ng2-components/ng2-activiti-tasklist/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/config/assets/license_header_add.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-tasklist/config/assets/tslint.json b/ng2-components/ng2-activiti-tasklist/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-activiti-tasklist/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/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/ng2-activiti-tasklist/config/custom-loaders/license-check.js b/ng2-components/ng2-activiti-tasklist/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-activiti-tasklist/config/helpers.js b/ng2-components/ng2-activiti-tasklist/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/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/ng2-activiti-tasklist/config/webpack.common.js b/ng2-components/ng2-activiti-tasklist/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-activiti-tasklist/config/webpack.test.js b/ng2-components/ng2-activiti-tasklist/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-activiti-tasklist/karma.conf.js b/ng2-components/ng2-activiti-tasklist/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-activiti-tasklist/karma.conf.js
+++ b/ng2-components/ng2-activiti-tasklist/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-activiti-tasklist/package.json b/ng2-components/ng2-activiti-tasklist/package.json
index 6257b3e41b..ec63f4b06a 100644
--- a/ng2-components/ng2-activiti-tasklist/package.json
+++ b/ng2-components/ng2-activiti-tasklist/package.json
@@ -20,7 +20,6 @@
   "bugs": {
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
-  "license": "Apache-2.0",
   "contributors": [
     {
       "name": "Maurizio Vitale",
@@ -114,13 +113,5 @@
     "webpack-merge": "2.6.1",
     "wsrv": "^0.1.7"
   },
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  }
+  "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-activiti-tasklist/webpack.build.js b/ng2-components/ng2-activiti-tasklist/webpack.build.js
index 9ba6ea0a4f..03c29be996 100644
--- a/ng2-components/ng2-activiti-tasklist/webpack.build.js
+++ b/ng2-components/ng2-activiti-tasklist/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-activiti-tasklist/webpack.test.js b/ng2-components/ng2-activiti-tasklist/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-activiti-tasklist/webpack.test.js
+++ b/ng2-components/ng2-activiti-tasklist/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-alfresco-core/config/assets/license_header.txt b/ng2-components/ng2-alfresco-core/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-alfresco-core/config/assets/license_header_add.txt b/ng2-components/ng2-alfresco-core/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/config/assets/license_header_add.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-alfresco-core/config/assets/tslint.json b/ng2-components/ng2-alfresco-core/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-alfresco-core/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/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/ng2-alfresco-core/config/custom-loaders/license-check.js b/ng2-components/ng2-alfresco-core/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-alfresco-core/config/helpers.js b/ng2-components/ng2-alfresco-core/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/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/ng2-alfresco-core/config/webpack.common.js b/ng2-components/ng2-alfresco-core/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-core/config/webpack.test.js b/ng2-components/ng2-alfresco-core/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-core/karma.conf.js b/ng2-components/ng2-alfresco-core/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-alfresco-core/karma.conf.js
+++ b/ng2-components/ng2-alfresco-core/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-alfresco-core/package.json b/ng2-components/ng2-alfresco-core/package.json
index b5ea9e0f6e..10649392d9 100644
--- a/ng2-components/ng2-alfresco-core/package.json
+++ b/ng2-components/ng2-alfresco-core/package.json
@@ -5,7 +5,6 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
-    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
@@ -20,7 +19,6 @@
   "bugs": {
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
-  "license": "Apache-2.0",
   "contributors": [
     {
       "name": "Denys Vuika",
@@ -120,13 +118,5 @@
     "webpack-merge": "2.6.1",
     "wsrv": "^0.1.7"
   },
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  }
+  "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-core/src/services/notification.service.spec.ts b/ng2-components/ng2-alfresco-core/src/services/notification.service.spec.ts
index 98eb8178e6..767103a3d2 100644
--- a/ng2-components/ng2-alfresco-core/src/services/notification.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/notification.service.spec.ts
@@ -47,14 +47,13 @@ describe('NotificationService', () => {
 
         it('should open a message notification bar', (done) => {
             let promise = fixture.componentInstance.sendMessage();
+            promise.afterDismissed().subscribe(() => {
+                done();
+            });
 
             fixture.detectChanges();
 
             expect(document.querySelector('snack-bar-container')).not.toBeNull();
-
-            promise.afterDismissed().subscribe(() => {
-                done();
-            });
         });
     });
 
@@ -62,15 +61,14 @@ describe('NotificationService', () => {
 
         it('should open a message notification bar with action', (done) => {
             let promise = fixture.componentInstance.sendMessageAction();
+            promise.afterDismissed().subscribe(() => {
+                done();
+            });
 
             fixture.detectChanges();
 
             expect(document.querySelector('snack-bar-container')).not.toBeNull();
             expect(document.querySelector('.md-simple-snackbar-action')).not.toBeNull();
-
-            promise.afterDismissed().subscribe(() => {
-                done();
-            });
         });
     });
 
@@ -86,12 +84,12 @@ class ComponentThatProvidesNotificationService {
     }
 
     sendMessage() {
-        let promise = this.notificationService.openSnackMessage('Test notification', 2000);
+        let promise = this.notificationService.openSnackMessage('Test notification', 5000);
         return promise;
     }
 
     sendMessageAction() {
-        let promise = this.notificationService.openSnackMessageAction('Test notification', 'TestWarn', 2000);
+        let promise = this.notificationService.openSnackMessageAction('Test notification', 'TestWarn', 5000);
         return promise;
     }
 
diff --git a/ng2-components/ng2-alfresco-core/webpack.build.js b/ng2-components/ng2-alfresco-core/webpack.build.js
index 176daf7abc..0a56f02ee3 100644
--- a/ng2-components/ng2-alfresco-core/webpack.build.js
+++ b/ng2-components/ng2-alfresco-core/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-alfresco-core/webpack.test.js b/ng2-components/ng2-alfresco-core/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-alfresco-core/webpack.test.js
+++ b/ng2-components/ng2-alfresco-core/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-alfresco-datatable/config/assets/license_header.txt b/ng2-components/ng2-alfresco-datatable/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-alfresco-datatable/config/assets/license_header_add.txt b/ng2-components/ng2-alfresco-datatable/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/config/assets/license_header_add.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-alfresco-datatable/config/assets/tslint.json b/ng2-components/ng2-alfresco-datatable/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-alfresco-datatable/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/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/ng2-alfresco-datatable/config/custom-loaders/license-check.js b/ng2-components/ng2-alfresco-datatable/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-alfresco-datatable/config/helpers.js b/ng2-components/ng2-alfresco-datatable/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/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/ng2-alfresco-datatable/config/webpack.common.js b/ng2-components/ng2-alfresco-datatable/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-datatable/config/webpack.test.js b/ng2-components/ng2-alfresco-datatable/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-datatable/karma.conf.js b/ng2-components/ng2-alfresco-datatable/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-alfresco-datatable/karma.conf.js
+++ b/ng2-components/ng2-alfresco-datatable/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json
index 41b8a54050..5b87b26137 100644
--- a/ng2-components/ng2-alfresco-datatable/package.json
+++ b/ng2-components/ng2-alfresco-datatable/package.json
@@ -20,7 +20,6 @@
   "bugs": {
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
-  "license": "Apache-2.0",
   "contributors": [
     {
       "name": "Denys Vuika",
@@ -106,13 +105,5 @@
     "webpack-merge": "2.6.1",
     "wsrv": "^0.1.7"
   },
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  }
+  "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-datatable/webpack.build.js b/ng2-components/ng2-alfresco-datatable/webpack.build.js
index 84d761017a..29afcdceb9 100644
--- a/ng2-components/ng2-alfresco-datatable/webpack.build.js
+++ b/ng2-components/ng2-alfresco-datatable/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-alfresco-datatable/webpack.test.js b/ng2-components/ng2-alfresco-datatable/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-alfresco-datatable/webpack.test.js
+++ b/ng2-components/ng2-alfresco-datatable/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-alfresco-documentlist/config/assets/license_header.txt b/ng2-components/ng2-alfresco-documentlist/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-alfresco-documentlist/config/assets/license_header_add.txt b/ng2-components/ng2-alfresco-documentlist/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/config/assets/license_header_add.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-alfresco-documentlist/config/assets/tslint.json b/ng2-components/ng2-alfresco-documentlist/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-alfresco-documentlist/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/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/ng2-alfresco-documentlist/config/custom-loaders/license-check.js b/ng2-components/ng2-alfresco-documentlist/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-alfresco-documentlist/config/helpers.js b/ng2-components/ng2-alfresco-documentlist/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/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/ng2-alfresco-documentlist/config/webpack.common.js b/ng2-components/ng2-alfresco-documentlist/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-documentlist/config/webpack.test.js b/ng2-components/ng2-alfresco-documentlist/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-documentlist/karma.conf.js b/ng2-components/ng2-alfresco-documentlist/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-alfresco-documentlist/karma.conf.js
+++ b/ng2-components/ng2-alfresco-documentlist/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json
index 9980b8ade3..d505dc3b20 100644
--- a/ng2-components/ng2-alfresco-documentlist/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/package.json
@@ -20,7 +20,6 @@
   "bugs": {
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
-  "license": "Apache-2.0",
   "contributors": [
     {
       "name": "Denys Vuika",
@@ -115,13 +114,5 @@
     "webpack-merge": "2.6.1",
     "wsrv": "^0.1.7"
   },
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  }
+  "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-documentlist/webpack.build.js b/ng2-components/ng2-alfresco-documentlist/webpack.build.js
index fca998d50f..8246ca3c84 100644
--- a/ng2-components/ng2-alfresco-documentlist/webpack.build.js
+++ b/ng2-components/ng2-alfresco-documentlist/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-alfresco-documentlist/webpack.test.js b/ng2-components/ng2-alfresco-documentlist/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-alfresco-documentlist/webpack.test.js
+++ b/ng2-components/ng2-alfresco-documentlist/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-alfresco-login/config/assets/license_header.txt b/ng2-components/ng2-alfresco-login/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-alfresco-login/config/assets/license_header_add.txt b/ng2-components/ng2-alfresco-login/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/config/assets/license_header_add.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-alfresco-login/config/assets/tslint.json b/ng2-components/ng2-alfresco-login/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-alfresco-login/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/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/ng2-alfresco-login/config/custom-loaders/license-check.js b/ng2-components/ng2-alfresco-login/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-alfresco-login/config/helpers.js b/ng2-components/ng2-alfresco-login/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/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/ng2-alfresco-login/config/webpack.common.js b/ng2-components/ng2-alfresco-login/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-login/config/webpack.test.js b/ng2-components/ng2-alfresco-login/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-login/karma.conf.js b/ng2-components/ng2-alfresco-login/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-alfresco-login/karma.conf.js
+++ b/ng2-components/ng2-alfresco-login/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-alfresco-login/package.json b/ng2-components/ng2-alfresco-login/package.json
index a10f722ecb..3b6b4ac985 100644
--- a/ng2-components/ng2-alfresco-login/package.json
+++ b/ng2-components/ng2-alfresco-login/package.json
@@ -20,7 +20,6 @@
   "bugs": {
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
-  "license": "Apache-2.0",
   "contributors": [
     {
       "name": "Denys Vuika",
@@ -117,13 +116,5 @@
     "webpack-merge": "2.6.1",
     "wsrv": "^0.1.7"
   },
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  }
+  "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-login/webpack.build.js b/ng2-components/ng2-alfresco-login/webpack.build.js
index 81b2ab9019..d171c95fc7 100644
--- a/ng2-components/ng2-alfresco-login/webpack.build.js
+++ b/ng2-components/ng2-alfresco-login/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-alfresco-login/webpack.test.js b/ng2-components/ng2-alfresco-login/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-alfresco-login/webpack.test.js
+++ b/ng2-components/ng2-alfresco-login/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-alfresco-search/config/assets/license_header.txt b/ng2-components/ng2-alfresco-search/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-alfresco-search/config/assets/license_header_add.txt b/ng2-components/ng2-alfresco-search/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/config/assets/license_header_add.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-alfresco-search/config/assets/tslint.json b/ng2-components/ng2-alfresco-search/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-alfresco-search/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/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/ng2-alfresco-search/config/custom-loaders/license-check.js b/ng2-components/ng2-alfresco-search/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-alfresco-search/config/helpers.js b/ng2-components/ng2-alfresco-search/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/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/ng2-alfresco-search/config/webpack.common.js b/ng2-components/ng2-alfresco-search/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-search/config/webpack.test.js b/ng2-components/ng2-alfresco-search/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-search/karma.conf.js b/ng2-components/ng2-alfresco-search/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-alfresco-search/karma.conf.js
+++ b/ng2-components/ng2-alfresco-search/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-alfresco-search/package.json b/ng2-components/ng2-alfresco-search/package.json
index e606650b36..73f0ee291f 100644
--- a/ng2-components/ng2-alfresco-search/package.json
+++ b/ng2-components/ng2-alfresco-search/package.json
@@ -20,7 +20,6 @@
   "bugs": {
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
-  "license": "Apache-2.0",
   "contributors": [
     {
       "name": "Will Abson",
@@ -116,13 +115,5 @@
     "webpack-merge": "2.6.1",
     "wsrv": "^0.1.7"
   },
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  }
+  "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-search/webpack.build.js b/ng2-components/ng2-alfresco-search/webpack.build.js
index 25c421022d..fb9fd48596 100644
--- a/ng2-components/ng2-alfresco-search/webpack.build.js
+++ b/ng2-components/ng2-alfresco-search/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-alfresco-search/webpack.test.js b/ng2-components/ng2-alfresco-search/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-alfresco-search/webpack.test.js
+++ b/ng2-components/ng2-alfresco-search/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-alfresco-social/config/assets/license_header.txt b/ng2-components/ng2-alfresco-social/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-alfresco-social/config/assets/license_header_add.txt b/ng2-components/ng2-alfresco-social/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/config/assets/license_header_add.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-alfresco-social/config/assets/tslint.json b/ng2-components/ng2-alfresco-social/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-alfresco-social/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/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/ng2-alfresco-social/config/custom-loaders/license-check.js b/ng2-components/ng2-alfresco-social/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-alfresco-social/config/helpers.js b/ng2-components/ng2-alfresco-social/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/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/ng2-alfresco-social/config/webpack.common.js b/ng2-components/ng2-alfresco-social/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-social/config/webpack.test.js b/ng2-components/ng2-alfresco-social/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-social/karma.conf.js b/ng2-components/ng2-alfresco-social/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-alfresco-social/karma.conf.js
+++ b/ng2-components/ng2-alfresco-social/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-alfresco-social/package.json b/ng2-components/ng2-alfresco-social/package.json
index 9f82940c9e..304fc0b769 100644
--- a/ng2-components/ng2-alfresco-social/package.json
+++ b/ng2-components/ng2-alfresco-social/package.json
@@ -97,14 +97,5 @@
     "rating",
     "alfresco-component"
   ],
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-social/webpack.build.js b/ng2-components/ng2-alfresco-social/webpack.build.js
index 00156458bd..3eb2dc3493 100644
--- a/ng2-components/ng2-alfresco-social/webpack.build.js
+++ b/ng2-components/ng2-alfresco-social/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-alfresco-social/webpack.test.js b/ng2-components/ng2-alfresco-social/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-alfresco-social/webpack.test.js
+++ b/ng2-components/ng2-alfresco-social/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-alfresco-tag/config/assets/license_header.txt b/ng2-components/ng2-alfresco-tag/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-alfresco-tag/config/assets/license_header_add.txt b/ng2-components/ng2-alfresco-tag/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/config/assets/license_header_add.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-alfresco-tag/config/assets/tslint.json b/ng2-components/ng2-alfresco-tag/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-alfresco-tag/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/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/ng2-alfresco-tag/config/custom-loaders/license-check.js b/ng2-components/ng2-alfresco-tag/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-alfresco-tag/config/helpers.js b/ng2-components/ng2-alfresco-tag/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/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/ng2-alfresco-tag/config/webpack.common.js b/ng2-components/ng2-alfresco-tag/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-tag/config/webpack.test.js b/ng2-components/ng2-alfresco-tag/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-tag/karma.conf.js b/ng2-components/ng2-alfresco-tag/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-alfresco-tag/karma.conf.js
+++ b/ng2-components/ng2-alfresco-tag/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-alfresco-tag/package.json b/ng2-components/ng2-alfresco-tag/package.json
index 6fc86fe6d0..8170c978eb 100644
--- a/ng2-components/ng2-alfresco-tag/package.json
+++ b/ng2-components/ng2-alfresco-tag/package.json
@@ -97,14 +97,5 @@
     "tag",
     "alfresco-component"
   ],
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-tag/webpack.build.js b/ng2-components/ng2-alfresco-tag/webpack.build.js
index ddfc811cff..7ad7de3b43 100644
--- a/ng2-components/ng2-alfresco-tag/webpack.build.js
+++ b/ng2-components/ng2-alfresco-tag/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-alfresco-tag/webpack.test.js b/ng2-components/ng2-alfresco-tag/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-alfresco-tag/webpack.test.js
+++ b/ng2-components/ng2-alfresco-tag/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-alfresco-upload/config/assets/license_header.txt b/ng2-components/ng2-alfresco-upload/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-alfresco-upload/config/assets/license_header_add.txt b/ng2-components/ng2-alfresco-upload/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/config/assets/license_header_add.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-alfresco-upload/config/assets/tslint.json b/ng2-components/ng2-alfresco-upload/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-alfresco-upload/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/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/ng2-alfresco-upload/config/custom-loaders/license-check.js b/ng2-components/ng2-alfresco-upload/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-alfresco-upload/config/helpers.js b/ng2-components/ng2-alfresco-upload/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/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/ng2-alfresco-upload/config/webpack.common.js b/ng2-components/ng2-alfresco-upload/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-upload/config/webpack.test.js b/ng2-components/ng2-alfresco-upload/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-upload/karma.conf.js b/ng2-components/ng2-alfresco-upload/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-alfresco-upload/karma.conf.js
+++ b/ng2-components/ng2-alfresco-upload/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-alfresco-upload/package.json b/ng2-components/ng2-alfresco-upload/package.json
index 6f0742b867..0d65c5f890 100644
--- a/ng2-components/ng2-alfresco-upload/package.json
+++ b/ng2-components/ng2-alfresco-upload/package.json
@@ -20,7 +20,6 @@
   "bugs": {
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
-  "license": "Apache-2.0",
   "contributors": [
     {
       "name": "Mario Romano",
@@ -115,13 +114,5 @@
     "webpack-merge": "2.6.1",
     "wsrv": "^0.1.7"
   },
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  }
+  "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-upload/webpack.build.js b/ng2-components/ng2-alfresco-upload/webpack.build.js
index 61d28b4335..a15fb613b4 100644
--- a/ng2-components/ng2-alfresco-upload/webpack.build.js
+++ b/ng2-components/ng2-alfresco-upload/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-alfresco-upload/webpack.test.js b/ng2-components/ng2-alfresco-upload/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-alfresco-upload/webpack.test.js
+++ b/ng2-components/ng2-alfresco-upload/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-alfresco-userinfo/config/assets/license_header.txt b/ng2-components/ng2-alfresco-userinfo/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-alfresco-userinfo/config/assets/license_header_add.txt b/ng2-components/ng2-alfresco-userinfo/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/config/assets/license_header_add.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-alfresco-userinfo/config/assets/tslint.json b/ng2-components/ng2-alfresco-userinfo/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-alfresco-userinfo/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/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/ng2-alfresco-userinfo/config/custom-loaders/license-check.js b/ng2-components/ng2-alfresco-userinfo/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-alfresco-userinfo/config/helpers.js b/ng2-components/ng2-alfresco-userinfo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/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/ng2-alfresco-userinfo/config/webpack.common.js b/ng2-components/ng2-alfresco-userinfo/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-userinfo/config/webpack.test.js b/ng2-components/ng2-alfresco-userinfo/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-userinfo/karma.conf.js b/ng2-components/ng2-alfresco-userinfo/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-alfresco-userinfo/karma.conf.js
+++ b/ng2-components/ng2-alfresco-userinfo/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-alfresco-userinfo/package.json b/ng2-components/ng2-alfresco-userinfo/package.json
index 9842b41455..1cad39a289 100644
--- a/ng2-components/ng2-alfresco-userinfo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/package.json
@@ -97,14 +97,5 @@
     "userinfo",
     "alfresco-component"
   ],
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-userinfo/webpack.build.js b/ng2-components/ng2-alfresco-userinfo/webpack.build.js
index c22fd50cd9..5fef48387d 100644
--- a/ng2-components/ng2-alfresco-userinfo/webpack.build.js
+++ b/ng2-components/ng2-alfresco-userinfo/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-alfresco-userinfo/webpack.test.js b/ng2-components/ng2-alfresco-userinfo/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-alfresco-userinfo/webpack.test.js
+++ b/ng2-components/ng2-alfresco-userinfo/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-alfresco-viewer/config/assets/license_header.txt b/ng2-components/ng2-alfresco-viewer/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-alfresco-viewer/config/assets/license_header_add.txt b/ng2-components/ng2-alfresco-viewer/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/config/assets/license_header_add.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-alfresco-viewer/config/assets/tslint.json b/ng2-components/ng2-alfresco-viewer/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-alfresco-viewer/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/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/ng2-alfresco-viewer/config/custom-loaders/license-check.js b/ng2-components/ng2-alfresco-viewer/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-alfresco-viewer/config/helpers.js b/ng2-components/ng2-alfresco-viewer/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/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/ng2-alfresco-viewer/config/webpack.common.js b/ng2-components/ng2-alfresco-viewer/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-viewer/config/webpack.test.js b/ng2-components/ng2-alfresco-viewer/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-viewer/karma.conf.js b/ng2-components/ng2-alfresco-viewer/karma.conf.js
index 0266cc71f5..f2a4bff546 100644
--- a/ng2-components/ng2-alfresco-viewer/karma.conf.js
+++ b/ng2-components/ng2-alfresco-viewer/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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: './dist/**/*.*', included: false, served: true, watched: false},
       {pattern: './src/**/*.*', included: false, served: true, watched: false}
diff --git a/ng2-components/ng2-alfresco-viewer/webpack.build.js b/ng2-components/ng2-alfresco-viewer/webpack.build.js
index 3adbf6284f..816404e8e3 100644
--- a/ng2-components/ng2-alfresco-viewer/webpack.build.js
+++ b/ng2-components/ng2-alfresco-viewer/webpack.build.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-alfresco-viewer/webpack.test.js b/ng2-components/ng2-alfresco-viewer/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-alfresco-viewer/webpack.test.js
+++ b/ng2-components/ng2-alfresco-viewer/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/ng2-alfresco-webscript/config/assets/license_header.txt b/ng2-components/ng2-alfresco-webscript/config/assets/license_header.txt
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/config/assets/license_header.txt
@@ -0,0 +1,16 @@
+/*!
+ * @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-alfresco-webscript/config/assets/license_header_add.txt b/ng2-components/ng2-alfresco-webscript/config/assets/license_header_add.txt
new file mode 100644
index 0000000000..b38baa9716
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/config/assets/license_header_add.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-alfresco-webscript/config/assets/tslint.json b/ng2-components/ng2-alfresco-webscript/config/assets/tslint.json
new file mode 100644
index 0000000000..611a015c7e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/config/assets/tslint.json
@@ -0,0 +1,118 @@
+{
+    "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,
+        "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-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-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/config/custom-loaders/file-loader-multi.js b/ng2-components/ng2-alfresco-webscript/config/custom-loaders/file-loader-multi.js
new file mode 100644
index 0000000000..dfbf93e76e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/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/ng2-alfresco-webscript/config/custom-loaders/license-check.js b/ng2-components/ng2-alfresco-webscript/config/custom-loaders/license-check.js
new file mode 100644
index 0000000000..6a15ac03e2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/config/custom-loaders/license-check.js
@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};
diff --git a/ng2-components/ng2-alfresco-webscript/config/helpers.js b/ng2-components/ng2-alfresco-webscript/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/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/ng2-alfresco-webscript/config/webpack.common.js b/ng2-components/ng2-alfresco-webscript/config/webpack.common.js
new file mode 100644
index 0000000000..95cd33177e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/config/webpack.common.js
@@ -0,0 +1,124 @@
+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"),
+            "license-check": path.resolve(__dirname, "./custom-loaders/license-check")
+        }
+    },
+
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        '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$/,
+                use: '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/]
+            },
+            {
+                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/]
+            },{
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+            },
+            {
+                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_add.txt'), 'utf8')),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        )
+    ],
+
+    devtool: 'cheap-module-source-map',
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-webscript/config/webpack.test.js b/ng2-components/ng2-alfresco-webscript/config/webpack.test.js
new file mode 100644
index 0000000000..486fed8c15
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/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 = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
+                test: /\.ts$/,
+                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), '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|pdf)$/,
+                loader: 'file-loader',
+                query: {
+                    name: '[path][name].[ext]',
+                    outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                    }
+                }
+            },
+            {
+                enforce: 'post',
+                test: /\.ts$/,
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'),
+            {}
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};
diff --git a/ng2-components/ng2-alfresco-webscript/karma.conf.js b/ng2-components/ng2-alfresco-webscript/karma.conf.js
index f7f5ca66a2..9001db1c10 100644
--- a/ng2-components/ng2-alfresco-webscript/karma.conf.js
+++ b/ng2-components/ng2-alfresco-webscript/karma.conf.js
@@ -21,11 +21,6 @@ module.exports = function (config) {
       {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},
diff --git a/ng2-components/ng2-alfresco-webscript/package.json b/ng2-components/ng2-alfresco-webscript/package.json
index 99b51f5674..96b7901a96 100644
--- a/ng2-components/ng2-alfresco-webscript/package.json
+++ b/ng2-components/ng2-alfresco-webscript/package.json
@@ -98,14 +98,5 @@
     "webscript",
     "alfresco-component"
   ],
-  "license-check-config": {
-    "src": [
-      "./src/**/*.ts"
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  },
   "license": "Apache-2.0"
 }
diff --git a/ng2-components/ng2-alfresco-webscript/webpack.build.js b/ng2-components/ng2-alfresco-webscript/webpack.build.js
index d84c8d7e7e..e49ab6bdaf 100644
--- a/ng2-components/ng2-alfresco-webscript/webpack.build.js
+++ b/ng2-components/ng2-alfresco-webscript/webpack.build.js
@@ -1,6 +1,6 @@
-const webpack = require("webpack");
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const commonConfig = require('../config/webpack.common.js');
+const commonConfig = require('./config/webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
diff --git a/ng2-components/ng2-alfresco-webscript/webpack.test.js b/ng2-components/ng2-alfresco-webscript/webpack.test.js
index 4a61a62939..b6f4929fa4 100644
--- a/ng2-components/ng2-alfresco-webscript/webpack.test.js
+++ b/ng2-components/ng2-alfresco-webscript/webpack.test.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('../config/webpack.test.js');
+const testConfig = require('./config/webpack.test.js');
 
 module.exports = webpackMerge(testConfig, {
 
diff --git a/ng2-components/package.json b/ng2-components/package.json
index 27dd7a69a3..86142a1e7a 100644
--- a/ng2-components/package.json
+++ b/ng2-components/package.json
@@ -10,6 +10,7 @@
     "test-browser": "karma start karma.conf.js --reporters kjhtml",
     "coverage": "",
     "prepublish": "",
+    "rimraf": "rimraf",
     "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",
     "tslint": "",
     "tsc": "",
@@ -25,7 +26,6 @@
   "bugs": {
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
-  "license": "Apache-2.0",
   "contributors": {
     "0": {
       "name": "Eugenio Romano",
@@ -144,15 +144,7 @@
     "wsrv": "^0.1.7",
     "license-check": "1.1.5"
   },
-  "license-check-config": {
-    "src": {
-      "0": "./src/**/*.ts"
-    },
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
-  },
+  "license": "Apache-2.0",
   "module": "./index.js",
   "typings": "./index.d.ts"
 }
diff --git a/scripts/README.md b/scripts/README.md
index a6205bd6a8..a6f4771596 100644
--- a/scripts/README.md
+++ b/scripts/README.md
@@ -105,6 +105,20 @@ feel for what's available.
  ./npm-build-all.sh -gitjsapi de92be966e2ce7eca642ca9e9d7647ba4f849356
 ```
 
+* If you want avoid initial build and run only all the test
+
+```sh
+./npm-buid-all.sh -s -t
+```
+
+* If you want test in less time (high memoery consumign less detail)
+
+```sh
+./npm-buid-all.sh -ft //test and build
+
+./npm-buid-all.sh -s -ft //only test
+```
+
 * If you want clean all your local component and the demo shell:
 
 ```sh
diff --git a/scripts/npm-build-all.sh b/scripts/npm-build-all.sh
index c4c5a7370c..d78262f55e 100755
--- a/scripts/npm-build-all.sh
+++ b/scripts/npm-build-all.sh
@@ -2,7 +2,9 @@
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 eval RUN_TEST=false
+eval EXEC_FAST_TEST=false
 eval EXEC_CLEAN=false
+eval EXEC_BUILD=true
 eval EXEC_GIT_NPM_INSTALL_JSAPI=false
 eval GIT_ISH=""
 
@@ -27,7 +29,9 @@ eval projects=( "ng2-alfresco-core"
 show_help() {
     echo "Usage: npm-build-all.sh"
     echo ""
+    echo "-e or -exclude  exclude initial build"
     echo "-t or -test build all your local component and run also the test on them"
+    echo "-ft or -fast test build all your local component and run also the test in one single karmatestshim (high memory consuming and less details)"
     echo "-c or -clean the node_modules folder before to start the build"
     echo "-gitjsapi to build all the components against a commit-ish version of the JS-API"
 }
@@ -41,6 +45,10 @@ test_project() {
     npm run test -- --component $1 || exit 1
 }
 
+enable_fast_test() {
+    EXEC_FAST_TEST=true
+}
+
 enable_js_api_git_link() {
     GIT_ISH='git://github.com/Alfresco/alfresco-js-api.git#'$1
     EXEC_GIT_NPM_INSTALL_JSAPI=true
@@ -50,13 +58,19 @@ clean() {
     EXEC_CLEAN=true
 }
 
+exclude_build(){
+    EXEC_BUILD=false
+}
+
 while [[ $1 == -* ]]; do
     case "$1" in
       -h|--help|-\?) show_help; exit 0;;
       -t|--test)  enable_test; shift;;
+      -ft|--fasttest)  enable_fast_test; shift;;
       -gitjsapi)  enable_js_api_git_link $2; shift 2;;
       -v|--version)  install_version_pacakge $2; shift 2;;
       -c|--clean)  clean; shift;;
+      -s|--skipbuild)  exclude_build; shift;;
       -*) echo "invalid option: $1" 1>&2; show_help; exit 1;;
     esac
 done
@@ -84,8 +98,15 @@ if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
   cd "$DIR/../ng2-components/"
 fi
 
-echo "====== Build ng2-components ====="
-npm run build || exit 1
+if $EXEC_BUILD == true; then
+    echo "====== Build ng2-components ====="
+    npm run build || exit 1
+fi
+
+if $EXEC_FAST_TEST == true; then
+    echo "====== Test all ng2-components (fast option) ====="
+    npm run test || exit 1
+fi
 
 for PACKAGE in ${projects[@]}
 do
diff --git a/scripts/npm-publish.sh b/scripts/npm-publish.sh
index c4168f520f..9395024b80 100755
--- a/scripts/npm-publish.sh
+++ b/scripts/npm-publish.sh
@@ -107,7 +107,7 @@ do
   fi
 
   echo "====== PUBLISHING: ${DESTDIR} ===== npm publish ${OPTIONS}"
-  npm publish ${OPTIONS}
+  npm publish ${OPTIONS} || exit 1
 
   if $EXEC_CHANGE_REGISTRY == true; then
       npm run rimraf .npmrc

From 608b3639ea691af54ab0201d3c595645bfb8417a Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Thu, 18 May 2017 14:00:28 +0100
Subject: [PATCH 39/72] auth service enhancements (#1860)

---
 .../alfresco-authentication.service.ts        | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/ng2-components/ng2-alfresco-core/src/services/alfresco-authentication.service.ts b/ng2-components/ng2-alfresco-core/src/services/alfresco-authentication.service.ts
index 2ca469958b..e437b0832e 100644
--- a/ng2-components/ng2-alfresco-core/src/services/alfresco-authentication.service.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/alfresco-authentication.service.ts
@@ -167,6 +167,28 @@ export class AlfrescoAuthenticationService {
         return this.alfrescoApi.getInstance().bpmAuth && !!this.alfrescoApi.getInstance().bpmAuth.isLoggedIn();
     }
 
+    /**
+     * Get the ECM username
+     *
+     * @returns {string} The username value
+     *
+     * @memberof AlfrescoAuthenticationService
+     */
+    getEcmUsername(): string {
+        return this.alfrescoApi.getInstance().ecmAuth.username;
+    }
+
+    /**
+     * Get the BPM username
+     *
+     * @returns {string} The username value
+     *
+     * @memberof AlfrescoAuthenticationService
+     */
+    getBpmUsername(): string {
+        return this.alfrescoApi.getInstance().bpmAuth.username;
+    }
+
     /**
      * The method write the error in the console browser
      * @param error

From a90423aa2131e97b874244f2d6fb9493dc0af4b2 Mon Sep 17 00:00:00 2001
From: Maurizio Vitale <maurizio.vitale@alfresco.com>
Date: Thu, 18 May 2017 16:52:39 +0200
Subject: [PATCH 40/72] [ADF-491] Task Attachment List Component (#1877)

* Create a new component Task Attachment List
Improve the datatable to get the rows to show

* The component name should follow the guide style
Move the Content calls in a different service file
Show the attach file inside the viewer

* Change method name

* Datatable should get the path and show the icon

* Improve attachment component

* Improve datatable documentation

* Remove console.log
---
 .../activiti/activiti-demo.component.html     |   6 +
 .../activiti/activiti-demo.component.ts       |   6 +
 ng2-components/ng2-activiti-form/index.ts     |   3 +
 .../src/services/activiti-content-service.ts  | 126 +++++++++++
 .../services/activiti-content.service.spec.ts |  99 +++++++++
 ng2-components/ng2-activiti-tasklist/index.ts |   6 +-
 .../adf-task-attachment-list.component.css    |   8 +
 .../adf-task-attachment-list.component.html   |  12 +
 ...adf-task-attachment-list.component.spec.ts | 130 +++++++++++
 .../adf-task-attachment-list.component.ts     | 120 ++++++++++
 .../src/components/index.ts                   |   1 +
 .../ng2-alfresco-datatable/README.md          |   1 +
 .../src/assets/images/empty_doc_lib.svg       | 208 ++++++++++++++++++
 .../src/assets/images/ft_ic_archive.svg       | 144 ++++++++++++
 .../src/assets/images/ft_ic_audio.svg         | 143 ++++++++++++
 .../src/assets/images/ft_ic_database.svg      | 142 ++++++++++++
 .../src/assets/images/ft_ic_document.svg      | 143 ++++++++++++
 .../src/assets/images/ft_ic_ebook.svg         | 143 ++++++++++++
 .../src/assets/images/ft_ic_folder.svg        | 142 ++++++++++++
 .../src/assets/images/ft_ic_folder_empty.svg  | 143 ++++++++++++
 .../src/assets/images/ft_ic_form.svg          | 143 ++++++++++++
 .../src/assets/images/ft_ic_google_docs.svg   | 147 +++++++++++++
 .../assets/images/ft_ic_google_drawings.svg   | 147 +++++++++++++
 .../src/assets/images/ft_ic_google_forms.svg  | 147 +++++++++++++
 .../src/assets/images/ft_ic_google_sheets.svg | 148 +++++++++++++
 .../src/assets/images/ft_ic_google_slides.svg | 146 ++++++++++++
 .../src/assets/images/ft_ic_miscellaneous.svg | 142 ++++++++++++
 .../src/assets/images/ft_ic_ms_excel.svg      | 157 +++++++++++++
 .../src/assets/images/ft_ic_ms_powerpoint.svg | 152 +++++++++++++
 .../src/assets/images/ft_ic_ms_word.svg       | 151 +++++++++++++
 .../src/assets/images/ft_ic_pdf.svg           | 144 ++++++++++++
 .../src/assets/images/ft_ic_presentation.svg  | 142 ++++++++++++
 .../src/assets/images/ft_ic_raster_image.svg  | 143 ++++++++++++
 .../src/assets/images/ft_ic_spreadsheet.svg   | 151 +++++++++++++
 .../src/assets/images/ft_ic_vector_image.svg  | 144 ++++++++++++
 .../src/assets/images/ft_ic_video.svg         | 144 ++++++++++++
 .../src/assets/images/ft_ic_website.svg       | 142 ++++++++++++
 .../datatable/datatable.component.ts          |  25 ++-
 .../src/data/object-datatable-adapter.ts      |  16 ++
 39 files changed, 4252 insertions(+), 5 deletions(-)
 create mode 100644 ng2-components/ng2-activiti-form/src/services/activiti-content-service.ts
 create mode 100644 ng2-components/ng2-activiti-form/src/services/activiti-content.service.spec.ts
 create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.css
 create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html
 create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts
 create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.ts
 create mode 100644 ng2-components/ng2-alfresco-datatable/src/assets/images/empty_doc_lib.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_archive.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_audio.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_database.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_document.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ebook.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_folder.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_folder_empty.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_form.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_docs.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_drawings.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_forms.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_sheets.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_slides.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_miscellaneous.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ms_excel.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ms_powerpoint.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ms_word.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_pdf.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_presentation.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_raster_image.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_spreadsheet.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_vector_image.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_video.svg
 create mode 100755 ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_website.svg

diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
index 1280bc92eb..943a2cacdc 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
@@ -70,6 +70,12 @@
                             (taskCreated)="onTaskCreated($event)"
                             (taskDeleted)="onTaskDeleted($event)">
                         </activiti-task-details>
+                        <hr>
+                        <h5>Attachments</h5>
+                        <adf-task-attachment-list *ngIf="currentTaskId"
+                          [taskId]="currentTaskId"
+                          (attachmentClick)="onAttachmentClick($event)">
+                        </adf-task-attachment-list>
                     </div>
                 </div>
             </div>
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
index ff2b792bc2..982905e7e3 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
@@ -254,6 +254,12 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.contentName = content.name;
     }
 
+    onAttachmentClick(content: any) {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
     onTaskCreated(data: any) {
         this.currentTaskId = data.parentTaskId;
         this.taskList.reload();
diff --git a/ng2-components/ng2-activiti-form/index.ts b/ng2-components/ng2-activiti-form/index.ts
index 8c680e935b..b20bf4efb1 100644
--- a/ng2-components/ng2-activiti-form/index.ts
+++ b/ng2-components/ng2-activiti-form/index.ts
@@ -23,6 +23,7 @@ import { ActivitiContent } from './src/components/activiti-content.component';
 import { FormFieldComponent } from './src/components/form-field/form-field.component';
 import { ActivitiStartForm } from './src/components/activiti-start-form.component';
 import { FormService } from './src/services/form.service';
+import { ActivitiContentService } from './src/services/activiti-content-service';
 import { EcmModelService } from './src/services/ecm-model.service';
 import { NodeService } from './src/services/node.service';
 import { WidgetVisibilityService } from './src/services/widget-visibility.service';
@@ -35,6 +36,7 @@ export * from './src/components/activiti-form.component';
 export * from './src/components/activiti-content.component';
 export * from './src/components/activiti-start-form.component';
 export * from './src/services/form.service';
+export * from './src/services/activiti-content-service';
 export * from './src/components/widgets/index';
 export * from './src/services/ecm-model.service';
 export * from './src/services/node.service';
@@ -51,6 +53,7 @@ export const ACTIVITI_FORM_DIRECTIVES: any[] = [
 
 export const ACTIVITI_FORM_PROVIDERS: any[] = [
     FormService,
+    ActivitiContentService,
     EcmModelService,
     NodeService,
     WidgetVisibilityService,
diff --git a/ng2-components/ng2-activiti-form/src/services/activiti-content-service.ts b/ng2-components/ng2-activiti-form/src/services/activiti-content-service.ts
new file mode 100644
index 0000000000..194c510cb2
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/src/services/activiti-content-service.ts
@@ -0,0 +1,126 @@
+/*!
+ * @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.
+ */
+
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Rx';
+import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
+
+@Injectable()
+export class ActivitiContentService {
+
+    static UNKNOWN_ERROR_MESSAGE: string = 'Unknown error';
+    static GENERIC_ERROR_MESSAGE: string = 'Server error';
+    static DEFAULT_MIME_TYPE_ICON: string = 'ft_ic_miscellaneous.svg';
+
+    mimeTypeIcons: any = {
+        'image/png': 'ft_ic_raster_image.svg',
+        'image/jpeg': 'ft_ic_raster_image.svg',
+        'image/gif': 'ft_ic_raster_image.svg',
+        'application/pdf': 'ft_ic_pdf.svg',
+        'application/vnd.ms-excel': 'ft_ic_ms_excel.svg',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'ft_ic_ms_excel.svg',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.template': 'ft_ic_ms_excel.svg',
+        'application/msword': 'ft_ic_ms_word.svg',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'ft_ic_ms_word.svg',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.template': 'ft_ic_ms_word.svg',
+        'application/vnd.ms-powerpoint': 'ft_ic_ms_powerpoint.svg',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'ft_ic_ms_powerpoint.svg',
+        'application/vnd.openxmlformats-officedocument.presentationml.template': 'ft_ic_ms_powerpoint.svg',
+        'application/vnd.openxmlformats-officedocument.presentationml.slideshow': 'ft_ic_ms_powerpoint.svg',
+        'video/mp4': 'ft_ic_video.svg',
+        'text/plain': 'ft_ic_document.svg',
+        'application/x-javascript': 'ft_ic_document.svg',
+        'application/json': 'ft_ic_document.svg',
+        'image/svg+xml': 'ft_ic_vector_image.svg',
+        'text/html': 'ft_ic_website.svg',
+        'application/x-compressed': 'ft_ic_archive.svg',
+        'application/x-zip-compressed': 'ft_ic_archive.svg',
+        'application/zip': 'ft_ic_archive.svg',
+        'application/vnd.apple.keynote': 'ft_ic_presentation.svg',
+        'application/vnd.apple.pages': 'ft_ic_document.svg',
+        'application/vnd.apple.numbers': 'ft_ic_spreadsheet.svg'
+    };
+
+    constructor(private apiService: AlfrescoApiService,
+                private logService: LogService) {
+    }
+
+    getFileRawContent(contentId: number): Observable<any> {
+        let alfrescoApi = this.apiService.getInstance();
+        return Observable.fromPromise(alfrescoApi.activiti.contentApi.getRawContent(contentId))
+            .catch(err => this.handleError(err));
+    }
+
+    /**
+     * Return all the related content of the task
+     * @param taskId
+     * @returns {any}
+     */
+    getTaskRelatedContent(taskId: string): Observable<any> {
+        return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.getRelatedContentForTask(taskId))
+            .catch(err => this.handleError(err));
+    }
+
+    /**
+     * Return all the related content of the process
+     * @param processId
+     * @returns {any}
+     */
+    getProcessRelatedContent(processId: string): Observable<any> {
+        return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.getRelatedContentForProcessInstance(processId))
+            .catch(err => this.handleError(err));
+    }
+
+    /**
+     * Delete a content by Id
+     * @param contentId
+     * @returns {any}
+     */
+    deleteRelatedContent(contentId: string): Observable<any> {
+        return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.deleteContent(contentId))
+            .catch(err => this.handleError(err));
+    }
+
+    toJson(res: any) {
+        if (res) {
+            return res || {};
+        }
+        return {};
+    }
+
+    toJsonArray(res: any) {
+        if (res) {
+            return res.data || [];
+        }
+        return [];
+    }
+
+    handleError(error: any): Observable<any> {
+        let errMsg = ActivitiContentService.UNKNOWN_ERROR_MESSAGE;
+        if (error) {
+            errMsg = (error.message) ? error.message :
+                error.status ? `${error.status} - ${error.statusText}` : ActivitiContentService.GENERIC_ERROR_MESSAGE;
+        }
+        this.logService.error(errMsg);
+        return Observable.throw(errMsg);
+    }
+
+    getMimeTypeIcon(mimeType: string): string {
+        let icon = this.mimeTypeIcons[mimeType];
+        return icon || ActivitiContentService.DEFAULT_MIME_TYPE_ICON;
+    }
+}
diff --git a/ng2-components/ng2-activiti-form/src/services/activiti-content.service.spec.ts b/ng2-components/ng2-activiti-form/src/services/activiti-content.service.spec.ts
new file mode 100644
index 0000000000..d6b14c365f
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/src/services/activiti-content.service.spec.ts
@@ -0,0 +1,99 @@
+/*!
+ * @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.
+ */
+
+import { TestBed } from '@angular/core/testing';
+import { CoreModule } from 'ng2-alfresco-core';
+import { ActivitiContentService } from './activiti-content-service';
+
+declare let jasmine: any;
+
+describe('ActivitiContentService', () => {
+
+    let service: ActivitiContentService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot()
+            ],
+            providers: [
+                ActivitiContentService
+            ]
+        });
+        service = TestBed.get(ActivitiContentService);
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+    });
+
+    afterEach(() => {
+        jasmine.Ajax.uninstall();
+    });
+
+    it('Should fetch the attachements', (done) => {
+        service.getTaskRelatedContent('1234').subscribe((res) => {
+            expect(res.data).toBeDefined();
+            expect(res.data.length).toBe(2);
+            expect(res.data[0].name).toBe('fake.zip');
+            expect(res.data[0].mimeType).toBe('application/zip');
+            expect(res.data[0].relatedContent).toBeTruthy();
+            expect(res.data[1].name).toBe('fake.jpg');
+            expect(res.data[1].mimeType).toBe('image/jpeg');
+            expect(res.data[1].relatedContent).toBeTruthy();
+            done();
+        });
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            'status': 200,
+            contentType: 'application/json',
+            responseText: JSON.stringify({
+                size: 2,
+                total: 2,
+                start: 0,
+                data: [
+                    {
+                        id: 8,
+                        name: 'fake.zip',
+                        created: 1494595697381,
+                        createdBy: {id: 2, firstName: 'user', lastName: 'user', email: 'user@user.com'},
+                        relatedContent: true,
+                        contentAvailable: true,
+                        link: false,
+                        mimeType: 'application/zip',
+                        simpleType: 'content',
+                        previewStatus: 'unsupported',
+                        thumbnailStatus: 'unsupported'
+                    },
+                    {
+                        id: 9,
+                        name: 'fake.jpg',
+                        created: 1494595655381,
+                        createdBy: {id: 2, firstName: 'user', lastName: 'user', email: 'user@user.com'},
+                        relatedContent: true,
+                        contentAvailable: true,
+                        link: false,
+                        mimeType: 'image/jpeg',
+                        simpleType: 'image',
+                        previewStatus: 'unsupported',
+                        thumbnailStatus: 'unsupported'
+                    }
+                ]
+            })
+        });
+    });
+});
diff --git a/ng2-components/ng2-activiti-tasklist/index.ts b/ng2-components/ng2-activiti-tasklist/index.ts
index 0d30f02947..e1716b5fb3 100644
--- a/ng2-components/ng2-activiti-tasklist/index.ts
+++ b/ng2-components/ng2-activiti-tasklist/index.ts
@@ -34,7 +34,8 @@ import {
     ActivitiPeople,
     ActivitiTaskHeader,
     ActivitiStartTaskButton,
-    ActivitiPeopleSearch
+    ActivitiPeopleSearch,
+    TaskAttachmentListComponent
 } from './src/components/index';
 
 export * from './src/components/index';
@@ -52,7 +53,8 @@ export const ACTIVITI_TASKLIST_DIRECTIVES: any[] = [
     ActivitiPeople,
     ActivitiTaskHeader,
     ActivitiStartTaskButton,
-    ActivitiPeopleSearch
+    ActivitiPeopleSearch,
+    TaskAttachmentListComponent
 ];
 
 export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.css b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.css
new file mode 100644
index 0000000000..67458ff066
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.css
@@ -0,0 +1,8 @@
+alfresco-datatable >>> .column-header {
+    color: #232323;
+    font-size: 15px;
+}
+
+alfresco-datatable >>> .data-cell {
+    cursor: pointer !important;
+}
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html
new file mode 100644
index 0000000000..74208ad2f7
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html
@@ -0,0 +1,12 @@
+<alfresco-datatable *ngIf="!isEmpty()"
+    [rows]="attachments"
+    [actions]="true"
+    (rowDblClick)="openContent($event)"
+    (showRowActionsMenu)="onShowRowActionsMenu($event)"
+    (executeRowAction)="onExecuteRowAction($event)">
+    <data-columns>
+        <data-column key="icon" type="image" srTitle="Thumbnail" [sortable]="false"></data-column>
+        <data-column key="name" type="text" title="Name" class="full-width ellipsis-cell" [sortable]="true"></data-column>
+        <data-column key="created" type="date" format="shortDate" title="Date"></data-column>
+    </data-columns>
+</alfresco-datatable>
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts
new file mode 100644
index 0000000000..be73ab280a
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts
@@ -0,0 +1,130 @@
+/*!
+ * @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.
+ */
+
+import { SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { DataTableModule } from 'ng2-alfresco-datatable';
+import { ActivitiContentService } from 'ng2-activiti-form';
+import { TaskAttachmentListComponent } from './adf-task-attachment-list.component';
+import { Observable } from 'rxjs/Rx';
+
+declare let jasmine: any;
+
+describe('TaskAttachmentList', () => {
+
+    let componentHandler: any;
+    let component: TaskAttachmentListComponent;
+    let fixture: ComponentFixture<TaskAttachmentListComponent>;
+    let service: ActivitiContentService;
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+    });
+
+    afterEach(() => {
+        jasmine.Ajax.uninstall();
+    });
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot(),
+                DataTableModule
+            ],
+            declarations: [
+                TaskAttachmentListComponent
+            ],
+            providers: [
+                ActivitiContentService
+            ]
+        }).compileComponents();
+
+        let translateService = TestBed.get(AlfrescoTranslationService);
+        spyOn(translateService, 'addTranslationFolder').and.stub();
+        spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
+    }));
+
+    beforeEach(() => {
+
+        fixture = TestBed.createComponent(TaskAttachmentListComponent);
+        component = fixture.componentInstance;
+
+        service = TestBed.get(ActivitiContentService);
+
+        componentHandler = jasmine.createSpyObj('componentHandler', [
+            'upgradeAllRegistered',
+            'upgradeElement'
+        ]);
+        window['componentHandler'] = componentHandler;
+    });
+
+    it('should fetch all the attachments of a taskId', (done) => {
+
+        component.success.subscribe((res) => {
+            expect(res).toBeDefined();
+            expect(res.length).toBe(2);
+            expect(res[0].name).toBe('fake.zip');
+            expect(res[0].icon).toBe('ft_ic_archive.svg');
+            expect(res[1].name).toBe('fake.jpg');
+            expect(res[1].icon).toBe('ft_ic_raster_image.svg');
+            done();
+        });
+
+        let taskId = '1';
+        let change = new SimpleChange(null, taskId, true);
+        component.ngOnChanges({ 'taskId': change });
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            'status': 200,
+            contentType: 'application/json',
+            responseText: JSON.stringify({
+                size: 2,
+                total: 2,
+                start: 0,
+                data: [
+                    {
+                        id: 8,
+                        name: 'fake.zip',
+                        created: 1494595697381,
+                        createdBy: {id: 2, firstName: 'user', lastName: 'user', email: 'user@user.com'},
+                        relatedContent: true,
+                        contentAvailable: true,
+                        link: false,
+                        mimeType: 'application/zip',
+                        simpleType: 'content',
+                        previewStatus: 'unsupported',
+                        thumbnailStatus: 'unsupported'
+                    },
+                    {
+                        id: 9,
+                        name: 'fake.jpg',
+                        created: 1494595655381,
+                        createdBy: {id: 2, firstName: 'user', lastName: 'user', email: 'user@user.com'},
+                        relatedContent: true,
+                        contentAvailable: true,
+                        link: false,
+                        mimeType: 'image/jpeg',
+                        simpleType: 'image',
+                        previewStatus: 'unsupported',
+                        thumbnailStatus: 'unsupported'
+                    }
+                ]
+            })
+        });
+    });
+});
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.ts
new file mode 100644
index 0000000000..40bc9712dd
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.ts
@@ -0,0 +1,120 @@
+/*!
+ * @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.
+ */
+
+import { Component, OnChanges, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
+import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { ActivitiContentService } from 'ng2-activiti-form';
+
+@Component({
+    selector: 'adf-task-attachment-list',
+    styleUrls: ['./adf-task-attachment-list.component.css'],
+    templateUrl: './adf-task-attachment-list.component.html'
+})
+export class TaskAttachmentListComponent implements OnChanges {
+
+    @Input()
+    taskId: string;
+
+    @Output()
+    attachmentClick = new EventEmitter();
+
+    @Output()
+    success = new EventEmitter();
+
+    attachments: any[] = [];
+
+    constructor(private translateService: AlfrescoTranslationService,
+                private activitiContentService: ActivitiContentService) {
+
+        if (translateService) {
+            translateService.addTranslationFolder('ng2-activiti-tasklist', 'node_modules/ng2-activiti-tasklist/src');
+        }
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['taskId'] && changes['taskId'].currentValue) {
+            this.loadAttachmentsByTaskId(changes['taskId'].currentValue);
+        }
+    }
+
+    reset () {
+        this.attachments = [];
+    }
+
+    private loadAttachmentsByTaskId(taskId: string) {
+        if (taskId) {
+            this.reset();
+            this.activitiContentService.getTaskRelatedContent(taskId).subscribe(
+                (res: any) => {
+                    res.data.forEach(content => {
+                        this.attachments.push({
+                            id: content.id,
+                            name: content.name,
+                            created: content.created,
+                            createdBy: content.createdBy.firstName + ' ' + content.createdBy.lastName,
+                            icon: this.activitiContentService.getMimeTypeIcon(content.mimeType)
+                        });
+                    });
+                    this.success.emit(this.attachments);
+                });
+        }
+    }
+
+    private deleteAttachmentById(contentId: string) {
+        if (contentId) {
+            this.activitiContentService.deleteRelatedContent(contentId).subscribe(
+                (res: any) => {
+                    this.attachments = this.attachments.filter(content => {
+                        return content.id !== contentId;
+                    });
+                });
+        }
+    }
+
+    isEmpty(): boolean {
+        return this.attachments && this.attachments.length === 0;
+    }
+
+    onShowRowActionsMenu(event: any) {
+        let myAction = {
+            title: 'Delete',
+            name: 'delete'
+        };
+        event.value.actions = [
+            myAction
+        ];
+    }
+
+    onExecuteRowAction(event: any) {
+        let args = event.value;
+        let action = args.action;
+        if (action.name === 'delete') {
+            this.deleteAttachmentById(args.row.obj.id);
+        }
+    }
+
+    openContent(event: any): void {
+        let content = event.value.obj;
+        this.activitiContentService.getFileRawContent(content.id).subscribe(
+            (blob: Blob) => {
+                content.contentBlob = blob;
+                this.attachmentClick.emit(content);
+            }
+        );
+    }
+
+}
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/index.ts b/ng2-components/ng2-activiti-tasklist/src/components/index.ts
index cef995cbf1..2f7a94872f 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/index.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/index.ts
@@ -19,6 +19,7 @@ export * from './activiti-apps.component';
 export * from './activiti-tasklist.component';
 export * from './activiti-checklist.component';
 export * from './activiti-comments.component';
+export * from './adf-task-attachment-list.component';
 export * from './activiti-people.component';
 export * from './activiti-task-header.component';
 export * from './no-task-detail-template.component';
diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md
index cc01ffef56..5694d07293 100644
--- a/ng2-components/ng2-alfresco-datatable/README.md
+++ b/ng2-components/ng2-alfresco-datatable/README.md
@@ -228,6 +228,7 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `data` | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
+| `rows` | Object[] | [] | The rows that the datatable should show |
 | `multiselect` | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
 | `actions` | boolean | false | Toggles data actions column |
 | `actionsPosition` | string (left\|right) | right | Position of the actions dropdown menu. | 
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/empty_doc_lib.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/empty_doc_lib.svg
new file mode 100644
index 0000000000..866acd527b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/empty_doc_lib.svg
@@ -0,0 +1,208 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="566px" height="165px" viewBox="0 0 566 165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>empty_doc_lib</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="5.68434189e-14" y="-1.01962883e-12" width="78.1679389" height="78.1679389" rx="2"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-3" x="-4.54747351e-13" y="5.68434189e-13" width="78.1679389" height="78.1679389" rx="2"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-5" x="-1.08002496e-12" y="7.81597009e-14" width="78.1679389" height="78.1679389" rx="2"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-7" x="1.29318778e-12" y="9.23705556e-14" width="78.1679389" height="78.1679389" rx="2"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-8">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-9" x="-2.96651592e-13" y="-7.60280727e-13" width="78.1679389" height="78.1679389" rx="2"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-10">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-11" x="3.48165941e-13" y="2.27373675e-13" width="78.1679389" height="78.1679389" rx="2"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-12">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-13" x="0" y="-5.40012479e-13" width="78.1679389" height="78.1679389" rx="2"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-14">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-15" x="0" y="0" width="78.1679389" height="78.1679389" rx="2"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-16">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="empty-folder-state-desktop" transform="translate(-37.000000, -168.000000)">
+            <g id="empty_doc_lib" transform="translate(38.000000, 169.000000)">
+                <g id="Group-5" transform="translate(241.569490, 92.634375) rotate(-355.000000) translate(-241.569490, -92.634375) translate(202.069490, 53.134375)">
+                    <g id="Rectangle-1196-Copy-2">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    </g>
+                    <g id="filetype_video" transform="translate(9.770992, 9.770992)">
+                        <polygon id="Fill-1" points="0 58.6259542 58.6259542 58.6259542 58.6259542 0 0 0"></polygon>
+                        <path d="M39.0839695,21.9847328 L43.9694656,21.9847328 L43.9694656,17.0992366 L39.0839695,17.0992366 L39.0839695,21.9847328 Z M39.0839695,31.7557252 L43.9694656,31.7557252 L43.9694656,26.870229 L39.0839695,26.870229 L39.0839695,31.7557252 Z M39.0839695,41.5267176 L43.9694656,41.5267176 L43.9694656,36.6412214 L39.0839695,36.6412214 L39.0839695,41.5267176 Z M14.6564885,21.9847328 L19.5419847,21.9847328 L19.5419847,17.0992366 L14.6564885,17.0992366 L14.6564885,21.9847328 Z M14.6564885,31.7557252 L19.5419847,31.7557252 L19.5419847,26.870229 L14.6564885,26.870229 L14.6564885,31.7557252 Z M14.6564885,41.5267176 L19.5419847,41.5267176 L19.5419847,36.6412214 L14.6564885,36.6412214 L14.6564885,41.5267176 Z M43.9694656,7.32824427 L43.9694656,12.2137405 L39.0839695,12.2137405 L39.0839695,7.32824427 L19.5419847,7.32824427 L19.5419847,12.2137405 L14.6564885,12.2137405 L14.6564885,7.32824427 L9.77099237,7.32824427 L9.77099237,51.2977099 L14.6564885,51.2977099 L14.6564885,46.4122137 L19.5419847,46.4122137 L19.5419847,51.2977099 L39.0839695,51.2977099 L39.0839695,46.4122137 L43.9694656,46.4122137 L43.9694656,51.2977099 L48.8549618,51.2977099 L48.8549618,7.32824427 L43.9694656,7.32824427 Z" id="Fill-2" fill="#FFC107"></path>
+                    </g>
+                </g>
+                <g id="Group-7" transform="translate(515.948329, 81.354522) rotate(-345.000000) translate(-515.948329, -81.354522) translate(476.448329, 41.854522)">
+                    <g id="Rectangle-1196-Copy-3">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-3"></use>
+                    </g>
+                    <g id="filetype_image" transform="translate(9.770992, 9.770992)">
+                        <polygon id="Fill-1" points="0 58.6259542 58.6259542 58.6259542 58.6259542 0 0 0"></polygon>
+                        <path d="M20.7636031,32.9773435 L26.8704733,40.3178015 L35.4200916,29.3132214 L46.412458,43.9697099 L12.2139847,43.9697099 L20.7636031,32.9773435 Z M51.2979542,46.412458 L51.2979542,12.2139847 C51.2979542,9.51474809 49.1116947,7.32848855 46.412458,7.32848855 L12.2139847,7.32848855 C9.51474809,7.32848855 7.32848855,9.51474809 7.32848855,12.2139847 L7.32848855,46.412458 C7.32848855,49.1116947 9.51474809,51.2979542 12.2139847,51.2979542 L46.412458,51.2979542 C49.1116947,51.2979542 51.2979542,49.1116947 51.2979542,46.412458 L51.2979542,46.412458 Z" id="Fill-2" fill="#22BE73"></path>
+                    </g>
+                </g>
+                <g id="Group-8" transform="translate(309.051884, 62.261808) rotate(-5.000000) translate(-309.051884, -62.261808) translate(269.551884, 22.761808)">
+                    <g id="Rectangle-1196-Copy-4">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-5"></use>
+                    </g>
+                    <g id="filetype_googledocs" transform="translate(9.770992, 9.770992)">
+                        <polygon id="Fill-1" points="6.82121026e-13 58.6259542 58.6259542 58.6259542 58.6259542 -2.98427949e-13 6.82121026e-13 -2.98427949e-13"></polygon>
+                        <g id="Group-6" transform="translate(9.770992, 4.885496)">
+                            <path d="M7.32824427,21.9847328 L31.7557252,21.9847328 L31.7557252,19.5419847 L7.32824427,19.5419847 L7.32824427,21.9847328 Z M7.32824427,26.870229 L31.7557252,26.870229 L31.7557252,24.4274809 L7.32824427,24.4274809 L7.32824427,26.870229 Z M7.32824427,31.7557252 L31.7557252,31.7557252 L31.7557252,29.3129771 L7.32824427,29.3129771 L7.32824427,31.7557252 Z M7.32824427,36.6412214 L21.9847328,36.6412214 L21.9847328,34.1984733 L7.32824427,34.1984733 L7.32824427,36.6412214 Z M29.3129771,0 L4.88549618,0 C2.18625954,0 0.0244274809,2.18625954 0.0244274809,4.88549618 L0,43.9694656 C0,46.6687023 2.16183206,48.8549618 4.8610687,48.8549618 L34.1984733,48.8549618 C36.8977099,48.8549618 39.0839695,46.6687023 39.0839695,43.9694656 L39.0839695,9.77099237 L29.3129771,0 Z" id="Fill-2" fill="#2979FF"></path>
+                            <polygon id="Fill-4" fill-opacity="0.5" fill="#FFFFFF" points="29.3129771 9.77099237 29.3129771 -2.84217094e-14 39.0839695 9.77099237"></polygon>
+                            <polygon id="Fill-5" fill-opacity="0.2" fill="#000000" points="39.0839695 9.77099237 39.0839695 19.5419847 29.3129771 9.77099237"></polygon>
+                        </g>
+                    </g>
+                </g>
+                <g id="Group-9" transform="translate(155.408682, 49.364493) rotate(-345.000000) translate(-155.408682, -49.364493) translate(115.908682, 9.864493)">
+                    <g id="Rectangle-1196-Copy-5">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-7"></use>
+                    </g>
+                    <g id="filetype_pdf" transform="translate(9.770992, 9.770992)">
+                        <polygon id="Fill-1" points="0 58.6259542 58.6259542 58.6259542 58.6259542 0 0 0"></polygon>
+                        <path d="M45.1888855,25.5877863 L45.1888855,21.9187786 L37.853313,21.9187786 L37.853313,36.5923664 L41.5198779,36.5923664 L41.5198779,31.7777099 L45.1888855,31.7777099 L45.1888855,28.1087023 L41.5198779,28.1087023 L41.5198779,25.5877863 L45.1888855,25.5877863 Z M29.3696489,32.9233588 L31.7757557,32.9233588 L31.7757557,25.5877863 L29.3696489,25.5877863 L29.3696489,32.9233588 Z M35.4447634,32.9233588 L35.4447634,25.5877863 C35.4447634,24.5960305 35.1027786,23.7361832 34.4139237,23.0082443 C33.7275115,22.2827481 32.8481221,21.9187786 31.7781985,21.9187786 L25.703084,21.9187786 L25.703084,36.5923664 L31.7781985,36.5923664 C32.8481221,36.5923664 33.7275115,36.2308397 34.4139237,35.5029008 C35.1027786,34.7774046 35.4447634,33.9175573 35.4447634,32.9233588 L35.4447634,32.9233588 Z M17.1070534,28.1087023 L19.5131603,28.1087023 L19.5131603,25.5877863 L17.1070534,25.5877863 L17.1070534,28.1087023 Z M23.1821679,28.1087023 L23.1821679,25.5877863 C23.1821679,24.5960305 22.8181985,23.7361832 22.0927023,23.0082443 C21.3672061,22.2827481 20.5073588,21.9187786 19.5131603,21.9187786 L13.4380458,21.9187786 L13.4380458,36.5923664 L17.1070534,36.5923664 L17.1070534,31.7777099 L19.5131603,31.7777099 C20.5073588,31.7777099 21.3672061,31.4161832 22.0927023,30.6882443 C22.8181985,29.9627481 23.1821679,29.1029008 23.1821679,28.1087023 L23.1821679,28.1087023 Z M46.483542,7.32824427 C47.783084,7.32824427 48.9091908,7.8070229 49.8643053,8.7621374 C50.8218626,9.71725191 51.2981985,10.8433588 51.2981985,12.1429008 L51.2981985,46.3682443 C51.2981985,47.670229 50.8218626,48.8158779 49.8643053,49.8076336 C48.9091908,50.8018321 47.783084,51.2977099 46.483542,51.2977099 L12.2581985,51.2977099 C10.9586565,51.2977099 9.81300763,50.8018321 8.81880916,49.8076336 C7.82461069,48.8158779 7.32873282,47.670229 7.32873282,46.3682443 L7.32873282,12.1429008 C7.32873282,10.8433588 7.82461069,9.71725191 8.81880916,8.7621374 C9.81300763,7.8070229 10.9586565,7.32824427 12.2581985,7.32824427 L46.483542,7.32824427 Z" id="Fill-2" fill="#E91E63"></path>
+                    </g>
+                </g>
+                <g id="Group-12" transform="translate(49.364493, 62.584254) rotate(-15.000000) translate(-49.364493, -62.584254) translate(9.864493, 23.084254)">
+                    <g id="Rectangle-1196-Copy-7">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
+                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-9"></use>
+                    </g>
+                    <g id="filetype_forms" transform="translate(9.770992, 9.770992)">
+                        <polygon id="Fill-1" points="0 58.6259542 58.6259542 58.6259542 58.6259542 0 0 0"></polygon>
+                        <path d="M24.4274809,24.4250382 L41.5267176,24.4250382 L41.5267176,19.539542 L24.4274809,19.539542 L24.4274809,24.4250382 Z M24.4274809,31.7532824 L41.5267176,31.7532824 L41.5267176,26.8677863 L24.4274809,26.8677863 L24.4274809,31.7532824 Z M24.4274809,39.0839695 L41.5267176,39.0839695 L41.5267176,34.1984733 L24.4274809,34.1984733 L24.4274809,39.0839695 Z M17.0992366,24.4250382 L21.9847328,24.4250382 L21.9847328,19.539542 L17.0992366,19.539542 L17.0992366,24.4250382 Z M17.0992366,31.7532824 L21.9847328,31.7532824 L21.9847328,26.8677863 L17.0992366,26.8677863 L17.0992366,31.7532824 Z M17.0992366,39.0839695 L21.9847328,39.0839695 L21.9847328,34.1984733 L17.0992366,34.1984733 L17.0992366,39.0839695 Z M43.9694656,9.77099237 L14.6564885,9.77099237 C11.9694656,9.77099237 9.77099237,11.9694656 9.77099237,14.6564885 L9.77099237,43.9694656 C9.77099237,46.6564885 11.9694656,48.8549618 14.6564885,48.8549618 L43.9694656,48.8549618 C46.6564885,48.8549618 48.8549618,46.6564885 48.8549618,43.9694656 L48.8549618,14.6564885 C48.8549618,11.9694656 46.6564885,9.77099237 43.9694656,9.77099237 L43.9694656,9.77099237 Z" id="Fill-2" fill="#651FFF"></path>
+                    </g>
+                </g>
+                <g id="Group-11" transform="translate(107.814782, 114.998541) rotate(-10.000000) translate(-107.814782, -114.998541) translate(68.314782, 75.498541)">
+                    <g id="Rectangle-1196-Copy-6">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
+                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-11"></use>
+                    </g>
+                    <g id="filetype_excel" transform="translate(9.770992, 9.770992)">
+                        <polygon id="Fill-1" points="-5.68434189e-14 58.6259542 58.6259542 58.6259542 58.6259542 -1.56319402e-13 -5.68434189e-14 -1.56319402e-13"></polygon>
+                        <g id="Group-10" transform="translate(4.885496, 4.885496)" fill="#22BE73">
+                            <path d="M47.1621374,41.632 L28.848855,41.632 L28.848855,38.3025344 L33.2873282,38.3025344 L33.2873282,34.4161221 L28.848855,34.4161221 L28.848855,32.1981069 L33.2873282,32.1981069 L33.2873282,28.3116947 L28.848855,28.3116947 L28.848855,26.0936794 L33.2873282,26.0936794 L33.2873282,22.2072672 L28.848855,22.2072672 L28.848855,19.9868092 L33.2873282,19.9868092 L33.2873282,16.1028397 L28.848855,16.1028397 L28.848855,13.8823817 L33.2873282,13.8823817 L33.2873282,9.99841221 L28.848855,9.99841221 L28.848855,6.66894656 L47.1621374,6.66894656 L47.1621374,41.632 L47.1621374,41.632 Z M16.3444275,33.1141374 C15.4015267,30.7984122 14.2509924,28.5632977 13.5743511,26.1425344 C12.819542,28.3947481 11.7422901,30.5223817 10.8775573,32.730626 C9.6610687,32.7135267 8.4470229,32.6646718 7.23053435,32.613374 C8.65709924,29.821313 10.0348092,27.0072672 11.5053435,24.2323053 C10.2546565,21.3742901 8.88427481,18.572458 7.59694656,15.731542 C8.81832061,15.6582595 10.0396947,15.5874198 11.2610687,15.5190229 C12.0867176,17.690626 12.9929771,19.832916 13.6745038,22.0582595 C14.4073282,19.6985649 15.5016794,17.4781069 16.4372519,15.1990229 C17.6928244,15.1086412 18.9532824,15.032916 20.2112977,14.9718473 C18.7309924,18.0057405 17.2433588,21.0420763 15.7337405,24.0661985 C17.260458,27.1758168 18.8189313,30.2610076 20.3505344,33.3681832 C19.0143511,33.2900153 17.6806107,33.2069618 16.3444275,33.1141374 L16.3444275,33.1141374 Z M48.8329771,37.2203969 C48.8280916,27.591084 48.8158779,17.961771 48.8427481,8.32757252 C48.8036641,7.38467176 48.8720611,6.34161832 48.300458,5.51841221 C47.4845802,4.9590229 46.4512977,5.0249771 45.5132824,4.98589313 C39.9584733,5.01520611 34.4036641,5.00299237 28.848855,5.00299237 L28.848855,0.564519084 L25.551145,0.564519084 C17.0381679,2.06680916 8.5178626,3.52757252 4.68958206e-13,5.00787786 L4.68958206e-13,43.852458 C8.46900763,45.3327634 16.9429008,46.7544427 25.4021374,48.2909313 L28.848855,48.2909313 L28.848855,43.2979542 C34.6039695,43.2857405 40.359084,43.3126107 46.1068702,43.2979542 C47.0351145,43.2588702 48.4225954,43.2295573 48.6448855,42.0765802 C48.9819847,40.4839084 48.8036641,38.8350534 48.8329771,37.2203969 L48.8329771,37.2203969 Z" id="Fill-2"></path>
+                            <path d="M35.5077863,13.8821374 L43.2781679,13.8821374 L43.2781679,9.99816794 L35.5077863,9.99816794 L35.5077863,13.8821374 Z M35.5077863,19.9865649 L43.2781679,19.9865649 L43.2781679,16.1025954 L35.5077863,16.1025954 L35.5077863,19.9865649 Z M35.5077863,26.0909924 L43.2781679,26.0909924 L43.2781679,22.2070229 L35.5077863,22.2070229 L35.5077863,26.0909924 Z M35.5077863,32.1954198 L43.2781679,32.1954198 L43.2781679,28.3114504 L35.5077863,28.3114504 L35.5077863,32.1954198 Z M35.5077863,38.3022901 L43.2781679,38.3022901 L43.2781679,34.4183206 L35.5077863,34.4183206 L35.5077863,38.3022901 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+                <g id="Group-4" transform="translate(388.820630, 86.064353) rotate(-350.000000) translate(-388.820630, -86.064353) translate(349.320630, 46.564353)">
+                    <g id="Rectangle-1196-Copy">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
+                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-13"></use>
+                    </g>
+                    <g id="filetype_audio" transform="translate(9.770992, 9.770992)">
+                        <polygon id="Fill-1" points="-1.13686838e-13 58.6259542 58.6259542 58.6259542 58.6259542 -6.39488462e-14 -1.13686838e-13 -6.39488462e-14"></polygon>
+                        <path d="M29.3129771,7.32824427 L43.9694656,7.32824427 L43.9694656,17.0601527 L34.2375573,17.0601527 L34.2375573,41.5658015 C34.2375573,44.2381679 33.2629008,46.5270229 31.3160305,48.4348092 C29.3691603,50.3450382 27.0607634,51.2977099 24.3883969,51.2977099 C21.7160305,51.2977099 19.4271756,50.3450382 17.5193893,48.4348092 C15.6091603,46.5270229 14.6564885,44.2381679 14.6564885,41.5658015 C14.6564885,38.8934351 15.6091603,36.5850382 17.5193893,34.6381679 C19.4271756,32.6912977 21.7160305,31.7166412 24.3883969,31.7166412 C25.9932824,31.7166412 27.6323664,32.1758779 29.3129771,33.0919084 L29.3129771,7.32824427 Z" id="Fill-2" fill="#E91E63"></path>
+                    </g>
+                </g>
+                <g id="Group-2" transform="translate(411.603053, 1.221374)">
+                    <g id="Group-3">
+                        <g id="Rectangle-1196">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
+                            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-15"></use>
+                        </g>
+                        <polygon id="Fill-1" points="9.77099237 68.3969466 68.3969466 68.3969466 68.3969466 9.77099237 9.77099237 9.77099237"></polygon>
+                    </g>
+                    <g id="filetype_book" transform="translate(9.770992, 9.770992)">
+                        <polygon id="Fill-1" points="0 58.6259542 58.6259542 58.6259542 58.6259542 0 0 0"></polygon>
+                        <path d="M14.6564885,9.77099237 L26.870229,9.77099237 L26.870229,29.3129771 L20.7633588,25.648855 L14.6564885,29.3129771 L14.6564885,9.77099237 Z M43.9694656,4.88549618 L14.6564885,4.88549618 C11.9572519,4.88549618 9.77099237,7.07175573 9.77099237,9.77099237 L9.77099237,48.8549618 C9.77099237,51.5541985 11.9572519,53.740458 14.6564885,53.740458 L43.9694656,53.740458 C46.6687023,53.740458 48.8549618,51.5541985 48.8549618,48.8549618 L48.8549618,9.77099237 C48.8549618,7.07175573 46.6687023,4.88549618 43.9694656,4.88549618 L43.9694656,4.88549618 Z" id="Fill-2" fill="#FF6D40"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_archive.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_archive.svg
new file mode 100755
index 0000000000..b010f8065d
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_archive.svg
@@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<path class="st12" d="M20.5,5.2l-1.4-1.7C18.9,3.2,18.5,3,18,3H6C5.5,3,5.1,3.2,4.8,3.5L3.5,5.2C3.2,5.6,3,6,3,6.5V19
+			c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V6.5C21,6,20.8,5.6,20.5,5.2z M17,11h-2v2h2v2h-2v2h2v2h-2v-2h-2v-2h2v-2h-2v-2h2V9h-2V7h2v2
+			h2V11z M5.1,5l0.8-1h12l0.9,1H5.1z"/>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_24_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_22_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_audio.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_audio.svg
new file mode 100755
index 0000000000..f3836172dd
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_audio.svg
@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<path class="st0" d="M0,0h24v24H0V0z"/>
+		<path class="st15" d="M12,3v9.3c-0.5-0.2-1-0.3-1.5-0.3C8,12,6,14,6,16.5S8,21,10.5,21c2.3,0,4.2-1.8,4.4-4H15V6h4V3H12z"/>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_32_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_30_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_database.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_database.svg
new file mode 100755
index 0000000000..6f7cbdb5dd
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_database.svg
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<path class="st0" d="M0,0h24v24H0V0z"/>
+		<path class="st12" d="M2,20h20v-4H2V20z M4,17h2v2H4V17z M2,4v4h20V4H2z M6,7H4V5h2V7z M2,14h20v-4H2V14z M4,11h2v2H4V11z"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_68_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_48_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_document.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_document.svg
new file mode 100755
index 0000000000..62e011d124
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_document.svg
@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<path class="st11" d="M19,4H5C4.5,4,4,4.5,4,5v14c0,0.5,0.5,1,1,1h14c0.6,0,1-0.5,1-1V5C20,4.5,19.6,4,19,4z M13,15H7v-1h6V15z
+			 M17,13H7v-1h10V13z M17,11H7v-1h10V11z M17,9H7V8h10V9z"/>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_80_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_60_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ebook.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ebook.svg
new file mode 100755
index 0000000000..c26452389f
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ebook.svg
@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<path class="st0" d="M0,0h24v24H0V0z"/>
+		<path class="st13" d="M18,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V4C20,2.9,19.1,2,18,2z M6,4h5v8l-2.5-1.5
+			L6,12V4z"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_66_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_46_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_folder.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_folder.svg
new file mode 100755
index 0000000000..aff7d2871d
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_folder.svg
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<path class="st9" d="M10,4H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8c0-1.1-0.9-2-2-2h-8L10,4z"/>
+		<path class="st0" d="M0,0h24v24H0V0z"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_1_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_3_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_folder_empty.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_folder_empty.svg
new file mode 100755
index 0000000000..54d0b9003a
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_folder_empty.svg
@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<path class="st0" d="M0,0h24v24H0V0z"/>
+		<path class="st9" d="M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M20,18H4V8
+			h16V18z"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_8_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_5_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_form.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_form.svg
new file mode 100755
index 0000000000..d46e889326
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_form.svg
@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<path class="st18" d="M18,4H6C4.9,4,4,4.9,4,6v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V6C20,4.9,19.1,4,18,4z M9,16H7v-2h2V16z
+			 M9,13H7v-2h2V13z M9,10H7V8h2V10z M17,16h-7v-2h7V16z M17,13h-7v-2h7V13z M17,10h-7V8h7V10z"/>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_74_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_54_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_docs.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_docs.svg
new file mode 100755
index 0000000000..1d9a03515b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_docs.svg
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+		<g>
+			<path class="st11" d="M16,2H6C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V6L16,2z M13,17H7v-1h6V17z M17,15H7v-1
+				h10V15z M17,13H7v-1h10V13z M17,11H7v-1h10V11z"/>
+			<path class="st16" d="M16,6V2l4,4H16z"/>
+			<path class="st17" d="M20,6v4l-4-4H20z"/>
+		</g>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_112_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_92_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_drawings.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_drawings.svg
new file mode 100755
index 0000000000..a1eae45e65
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_drawings.svg
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<g>
+			<path class="st13" d="M16,2H6C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V6L16,2z M7,12.5C7,10.6,8.6,9,10.5,9
+				s3.5,1.6,3.5,3.5c0,0.2,0,0.3-0.1,0.5H11v2.9c-0.2,0-0.3,0.1-0.5,0.1C8.6,16,7,14.4,7,12.5z M17,19h-5v-5l5,0V19z"/>
+			<path class="st16" d="M16,6V2l4,4H16z"/>
+			<path class="st17" d="M20,6v4l-4-4H20z"/>
+		</g>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_104_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_84_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_forms.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_forms.svg
new file mode 100755
index 0000000000..d8946f40f9
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_forms.svg
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+		<g>
+			<path class="st18" d="M16,2H6C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V6L16,2z M9,18H7v-2h2V18z M9,15H7v-2h2
+				V15z M9,12H7v-2h2V12z M17,18h-7v-2h7V18z M17,15h-7v-2h7V15z M17,12h-7v-2h7V12z"/>
+			<path class="st16" d="M16,6V2l4,4H16z"/>
+			<path class="st17" d="M20,6v4l-4-4H20z"/>
+		</g>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_106_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_86_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_sheets.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_sheets.svg
new file mode 100755
index 0000000000..d6a96c144a
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_sheets.svg
@@ -0,0 +1,148 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+		<g>
+			<path class="st8" d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V6l-4-4H6z"/>
+			<path class="st6" d="M17,9L17,9L7,9v0h0v10h10L17,9L17,9z M10,13v2H8v-2H10z M8,12v-2h2v2H8z M11,13h5v2h-5V13z M11,12v-2h5v2H11
+				z M8,18v-2h2v2H8z M11,18v-2h5v2H11z"/>
+			<path class="st16" d="M16,6V2l4,4H16z"/>
+			<path class="st17" d="M20,6v4l-4-4H20z"/>
+		</g>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_110_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_90_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_slides.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_slides.svg
new file mode 100755
index 0000000000..61fab21ab7
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_google_slides.svg
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+		<g>
+			<path class="st14" d="M16,2H6C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V6L16,2z M17,17H7v-7h10V17z"/>
+			<path class="st16" d="M16,6V2l4,4H16z"/>
+			<path class="st17" d="M20,6v4l-4-4H20z"/>
+		</g>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_108_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_88_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_miscellaneous.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_miscellaneous.svg
new file mode 100755
index 0000000000..a6bd024609
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_miscellaneous.svg
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<path class="st9" d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z"/>
+		<path class="st0" d="M0,0h24v24H0V0z"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_28_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_26_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ms_excel.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ms_excel.svg
new file mode 100755
index 0000000000..b98380dd76
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ms_excel.svg
@@ -0,0 +1,157 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<g>
+			<path class="st8" d="M22,17.2c0-3.9,0-7.9,0-11.8c0-0.4,0-0.8-0.2-1.1C21.4,4,21,4.1,20.6,4c-2.3,0-4.5,0-6.8,0
+				c0-0.6,0-1.2,0-1.8h-1.3C9,2.8,5.5,3.4,2,4.1C2,9.4,2,14.7,2,20c3.5,0.6,6.9,1.2,10.4,1.8h1.4c0-0.7,0-1.4,0-2c2.4,0,4.7,0,7.1,0
+				c0.4,0,0.9,0,1-0.5C22.1,18.6,22,17.9,22,17.2z M8.7,15.6c-0.4-0.9-0.9-1.9-1.1-2.9c-0.3,0.9-0.7,1.8-1.1,2.7c-0.5,0-1,0-1.5,0
+				c0.6-1.1,1.1-2.3,1.7-3.4c-0.5-1.2-1.1-2.3-1.6-3.5c0.5,0,1-0.1,1.5-0.1c0.3,0.9,0.7,1.8,1,2.7c0.3-1,0.7-1.9,1.1-2.8
+				c0.5,0,1-0.1,1.5-0.1c-0.6,1.2-1.2,2.5-1.8,3.7c0.6,1.3,1.3,2.5,1.9,3.8C9.8,15.6,9.2,15.6,8.7,15.6z M21.3,19c-2.5,0-5,0-7.5,0
+				c0-0.5,0-0.9,0-1.4c0.6,0,1.2,0,1.8,0c0-0.5,0-1.1,0-1.6c-0.6,0-1.2,0-1.8,0c0-0.3,0-0.6,0-0.9c0.6,0,1.2,0,1.8,0
+				c0-0.5,0-1.1,0-1.6c-0.6,0-1.2,0-1.8,0c0-0.3,0-0.6,0-0.9c0.6,0,1.2,0,1.8,0c0-0.5,0-1.1,0-1.6c-0.6,0-1.2,0-1.8,0
+				c0-0.3,0-0.6,0-0.9c0.6,0,1.2,0,1.8,0c0-0.5,0-1.1,0-1.6c-0.6,0-1.2,0-1.8,0c0-0.3,0-0.6,0-0.9c0.6,0,1.2,0,1.8,0
+				c0-0.5,0-1.1,0-1.6c-0.6,0-1.2,0-1.8,0c0-0.5,0-0.9,0-1.4c2.5,0,5,0,7.5,0C21.3,9.5,21.3,14.3,21.3,19z"/>
+			<path class="st8" d="M16.5,6.1c1.1,0,2.1,0,3.2,0c0,0.5,0,1.1,0,1.6c-1.1,0-2.1,0-3.2,0C16.5,7.2,16.5,6.6,16.5,6.1z"/>
+			<path class="st8" d="M16.5,8.6c1.1,0,2.1,0,3.2,0c0,0.5,0,1.1,0,1.6c-1.1,0-2.1,0-3.2,0C16.5,9.7,16.5,9.1,16.5,8.6z"/>
+			<path class="st8" d="M16.5,11.1c1.1,0,2.1,0,3.2,0c0,0.5,0,1.1,0,1.6c-1.1,0-2.1,0-3.2,0C16.5,12.2,16.5,11.6,16.5,11.1z"/>
+			<path class="st8" d="M16.5,13.6c1.1,0,2.1,0,3.2,0c0,0.5,0,1.1,0,1.6c-1.1,0-2.1,0-3.2,0C16.5,14.7,16.5,14.1,16.5,13.6z"/>
+			<path class="st8" d="M16.5,16.1c1.1,0,2.1,0,3.2,0c0,0.5,0,1.1,0,1.6c-1.1,0-2.1,0-3.2,0C16.5,17.2,16.5,16.6,16.5,16.1z"/>
+		</g>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_118_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_98_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ms_powerpoint.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ms_powerpoint.svg
new file mode 100755
index 0000000000..a6166744c7
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ms_powerpoint.svg
@@ -0,0 +1,152 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<g>
+			<path class="st14" d="M15.4,6.5c0,1,0,2,0,3c1,0,2,0,3,0C18.3,7.9,17,6.6,15.4,6.5z"/>
+			<path class="st14" d="M22,5.2c0.1-0.5-0.4-0.9-0.9-0.9c-2.4,0-4.9,0-7.3,0c0-0.7,0-1.4,0-2h-1.3C9,2.8,5.5,3.4,2,4.1
+				C2,9.4,2,14.7,2,20c3.5,0.6,6.9,1.2,10.4,1.8h1.4c0-0.8,0-1.5,0-2.3c2.3,0,4.5,0,6.8,0c0.4,0,0.8,0,1.2-0.2
+				c0.3-0.4,0.2-0.9,0.2-1.4C22,13.7,22,9.4,22,5.2z M8.7,12.8C8.1,13,7.6,13,7,13c0,0.9,0,1.8,0,2.7c-0.4,0-0.9-0.1-1.4-0.1
+				c0-2.4,0-4.9,0-7.3c1.2,0.1,2.7-0.5,3.8,0.4C10.4,9.9,10.1,12,8.7,12.8z M21.3,18.8c-2.5,0-5,0-7.5,0c0-0.6,0-1.2,0-1.8
+				c1.8,0,3.6,0,5.5,0c0-0.3,0-0.6,0-0.9c-1.8,0-3.6,0-5.5,0c0-0.4,0-0.8,0-1.1c1.8,0,3.6,0,5.5,0c0-0.3,0-0.6,0-0.9
+				c-1.8,0-3.6,0-5.5,0c0-0.4,0-0.9,0-1.3c0.9,0.3,1.9,0.3,2.7-0.3c0.9-0.5,1.3-1.5,1.4-2.5c-1,0-2,0-3,0c0-1,0-2,0-3
+				c-0.4,0.1-0.7,0.1-1.1,0.2c0-0.8,0-1.5,0-2.3c2.5,0,5,0,7.5,0C21.3,9.6,21.3,14.2,21.3,18.8z"/>
+			<path class="st14" d="M7,9.5c0,0.8,0,1.5,0,2.3c0.5-0.1,1,0,1.3-0.5c0.2-0.5,0.2-1,0-1.5C8,9.4,7.4,9.4,7,9.5z"/>
+		</g>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_116_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_96_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ms_word.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ms_word.svg
new file mode 100755
index 0000000000..046efc4f83
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_ms_word.svg
@@ -0,0 +1,151 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<path class="st11" d="M22,4.9c0-0.5-0.4-0.9-0.9-0.9c-2.4,0-4.9,0-7.3,0c0-0.6,0-1.2,0-1.8h-1.4C9,2.8,5.5,3.4,2,4.1
+			C2,9.4,2,14.7,2,20c3.5,0.6,6.9,1.2,10.4,1.8h1.4c0-0.6,0-1.2,0-1.8c2.3,0,4.5,0,6.8,0c0.4,0,0.8,0,1.1-0.2
+			c0.3-0.4,0.2-0.9,0.2-1.4C22,13.9,22,9.4,22,4.9z M9.6,15.1c-0.4,0.2-0.9,0-1.4,0c-0.3-1.5-0.7-3-0.9-4.5C7,12.1,6.6,13.5,6.3,15
+			c-0.4,0-0.9,0-1.3-0.1c-0.4-2-0.8-4-1.2-6c0.4,0,0.8,0,1.2,0c0.2,1.4,0.5,2.9,0.7,4.3c0.3-1.5,0.6-3,1-4.5c0.4,0,0.9,0,1.3-0.1
+			c0.3,1.5,0.6,3.1,0.9,4.6c0.3-1.6,0.5-3.1,0.8-4.7c0.5,0,0.9,0,1.4-0.1C10.6,10.7,10.1,12.9,9.6,15.1z M21.3,19.3
+			c-2.5,0-5,0-7.5,0c0-0.6,0-1.2,0-1.8c2,0,3.9,0,5.9,0c0-0.3,0-0.6,0-0.9c-2,0-3.9,0-5.9,0c0-0.4,0-0.8,0-1.1c2,0,3.9,0,5.9,0
+			c0-0.3,0-0.6,0-0.9c-2,0-3.9,0-5.9,0c0-0.4,0-0.8,0-1.1c2,0,3.9,0,5.9,0c0-0.3,0-0.6,0-0.9c-2,0-3.9,0-5.9,0c0-0.4,0-0.8,0-1.1
+			c2,0,3.9,0,5.9,0c0-0.3,0-0.6,0-0.9c-2,0-3.9,0-5.9,0c0-0.4,0-0.8,0-1.1c2,0,3.9,0,5.9,0c0-0.3,0-0.6,0-0.9c-2,0-3.9,0-5.9,0
+			c0-0.4,0-0.8,0-1.1c2,0,3.9,0,5.9,0c0-0.3,0-0.6,0-0.9c-2,0-3.9,0-5.9,0c0-0.5,0-1.1,0-1.6c2.5,0,5,0,7.5,0
+			C21.3,9.6,21.3,14.4,21.3,19.3z"/>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_120_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_100_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_pdf.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_pdf.svg
new file mode 100755
index 0000000000..4d6d4b388d
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_pdf.svg
@@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<path class="st19" d="M19,3c0.5,0,1,0.2,1.4,0.6C20.8,4,21,4.4,21,5v14c0,0.5-0.2,1-0.6,1.4C20,20.8,19.6,21,19,21H5
+		c-0.5,0-1-0.2-1.4-0.6C3.2,20,3,19.5,3,19V5c0-0.5,0.2-1,0.6-1.4S4.5,3,5,3H19z M9.5,11.5v-1c0-0.4-0.1-0.8-0.4-1.1
+		C8.7,9.1,8.4,9,8,9H5.5v6H7v-2h1c0.4,0,0.8-0.1,1.1-0.4C9.3,12.3,9.5,11.9,9.5,11.5z M7,11.5h1v-1H7V11.5z M14.5,13.5v-3
+		c0-0.4-0.1-0.8-0.4-1.1C13.8,9.1,13.4,9,13,9h-2.5v6H13c0.4,0,0.8-0.1,1.1-0.4C14.4,14.2,14.5,13.9,14.5,13.5z M12,13.5h1v-3h-1
+		V13.5z M18.5,10.5V9h-3v6H17v-2h1.5v-1.5H17v-1H18.5z"/>
+	<rect x="0" y="0" class="st0" width="24" height="24"/>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_62_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_42_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_presentation.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_presentation.svg
new file mode 100755
index 0000000000..7dce6d633c
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_presentation.svg
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<path class="st14" d="M18,4H6C4.9,4,4,4.9,4,6v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V6C20,4.9,19.1,4,18,4z M17,14H7V8h10V14z"/>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_76_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_56_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_raster_image.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_raster_image.svg
new file mode 100755
index 0000000000..d48242ce6d
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_raster_image.svg
@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<path class="st8" d="M21,19V5c0-1.1-0.9-2-2-2H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14C20.1,21,21,20.1,21,19z M8.5,13.5l2.5,3
+			l3.5-4.5l4.5,6H5L8.5,13.5z"/>
+		<path class="st0" d="M0,0h24v24H0V0z"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_64_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_44_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_spreadsheet.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_spreadsheet.svg
new file mode 100755
index 0000000000..9de2326880
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_spreadsheet.svg
@@ -0,0 +1,151 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+		<g>
+			<rect x="8" y="14" class="st8" width="2" height="2"/>
+			<rect x="11" y="14" class="st8" width="5" height="2"/>
+			<rect x="8" y="11" class="st8" width="2" height="2"/>
+			<rect x="8" y="8" class="st8" width="2" height="2"/>
+			<path class="st8" d="M19,4H5C4.5,4,4,4.5,4,5v14c0,0.5,0.5,1,1,1h14c0.6,0,1-0.5,1-1V5C20,4.5,19.6,4,19,4z M17,17H7V7h0v0h10v0
+				h0V17z"/>
+			<rect x="11" y="8" class="st8" width="5" height="2"/>
+			<rect x="11" y="11" class="st8" width="5" height="2"/>
+		</g>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_78_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_58_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_vector_image.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_vector_image.svg
new file mode 100755
index 0000000000..cfa5dbe4bd
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_vector_image.svg
@@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<rect x="0" y="0" class="st0" width="24" height="24"/>
+		<path class="st13" d="M18,4H6C4.9,4,4,4.9,4,6v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V6C20,4.9,19.1,4,18,4z M7,10.5
+			C7,8.6,8.6,7,10.5,7S14,8.6,14,10.5c0,0.2,0,0.3-0.1,0.5H11v2.9c-0.2,0-0.3,0.1-0.5,0.1C8.6,14,7,12.4,7,10.5z M17,17h-5v-5l5,0
+			V17z"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_72_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_52_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_video.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_video.svg
new file mode 100755
index 0000000000..b93d993619
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_video.svg
@@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<rect x="0" class="st0" width="24" height="24"/>
+		<path class="st14" d="M18,3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3H18z M8,17H6v-2h2V17z M8,13H6v-2h2V13z M8,9H6V7h2V9z
+			 M18,17h-2v-2h2V17z M18,13h-2v-2h2V13z M18,9h-2V7h2V9z"/>
+		<path class="st0" d="M0,0h24v24H0V0z"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_36_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_34_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
diff --git a/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_website.svg b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_website.svg
new file mode 100755
index 0000000000..220bab2a91
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/assets/images/ft_ic_website.svg
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st3{opacity:0.4;}
+	.st4{clip-path:url(#SVGID_4_);fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
+	.st5{clip-path:url(#SVGID_4_);}
+	.st6{fill:#FFFFFF;}
+	.st7{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:#22BE73;}
+	.st9{fill:#D9E021;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;}
+	.st11{fill:#2979FF;}
+	.st12{fill:#00B0FF;}
+	.st13{fill:#FF6D40;}
+	.st14{fill:#FFC107;}
+	.st15{fill:#E91E63;}
+	.st16{opacity:0.5;fill:#FFFFFF;}
+	.st17{opacity:0.2;}
+	.st18{fill:#651FFF;}
+	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#E91E63;}
+	.st20{display:none;}
+</style>
+<symbol  id="material_x5F_system_x5F_icon_x5F_border" viewBox="0 -48 48 48">
+	<rect y="-48" class="st0" width="48" height="48"/>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_grid" viewBox="0 -48 48 48">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="0" y="-48" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st1">
+			<g>
+				<line class="st2" x1="2" y1="-48" x2="2" y2="0"/>
+				<line class="st2" x1="4" y1="-48" x2="4" y2="0"/>
+				<line class="st2" x1="6" y1="-48" x2="6" y2="0"/>
+				<line class="st2" x1="8" y1="-48" x2="8" y2="0"/>
+				<line class="st2" x1="10" y1="-48" x2="10" y2="0"/>
+				<line class="st2" x1="12" y1="-48" x2="12" y2="0"/>
+				<line class="st2" x1="14" y1="-48" x2="14" y2="0"/>
+				<line class="st2" x1="16" y1="-48" x2="16" y2="0"/>
+				<line class="st2" x1="18" y1="-48" x2="18" y2="0"/>
+				<line class="st2" x1="20" y1="-48" x2="20" y2="0"/>
+				<line class="st2" x1="22" y1="-48" x2="22" y2="0"/>
+				<line class="st2" x1="24" y1="-48" x2="24" y2="0"/>
+				<line class="st2" x1="26" y1="-48" x2="26" y2="0"/>
+				<line class="st2" x1="28" y1="-48" x2="28" y2="0"/>
+				<line class="st2" x1="30" y1="-48" x2="30" y2="0"/>
+				<line class="st2" x1="32" y1="-48" x2="32" y2="0"/>
+				<line class="st2" x1="34" y1="-48" x2="34" y2="0"/>
+				<line class="st2" x1="36" y1="-48" x2="36" y2="0"/>
+				<line class="st2" x1="38" y1="-48" x2="38" y2="0"/>
+				<line class="st2" x1="40" y1="-48" x2="40" y2="0"/>
+				<line class="st2" x1="42" y1="-48" x2="42" y2="0"/>
+				<line class="st2" x1="44" y1="-48" x2="44" y2="0"/>
+				<line class="st2" x1="46" y1="-48" x2="46" y2="0"/>
+			</g>
+			<g>
+				<line class="st2" x1="0" y1="-2" x2="48" y2="-2"/>
+				<line class="st2" x1="0" y1="-4" x2="48" y2="-4"/>
+				<line class="st2" x1="0" y1="-6" x2="48" y2="-6"/>
+				<line class="st2" x1="0" y1="-8" x2="48" y2="-8"/>
+				<line class="st2" x1="0" y1="-10" x2="48" y2="-10"/>
+				<line class="st2" x1="0" y1="-12" x2="48" y2="-12"/>
+				<line class="st2" x1="0" y1="-14" x2="48" y2="-14"/>
+				<line class="st2" x1="0" y1="-16" x2="48" y2="-16"/>
+				<line class="st2" x1="0" y1="-18" x2="48" y2="-18"/>
+				<line class="st2" x1="0" y1="-20" x2="48" y2="-20"/>
+				<line class="st2" x1="0" y1="-22" x2="48" y2="-22"/>
+				<line class="st2" x1="0" y1="-24" x2="48" y2="-24"/>
+				<line class="st2" x1="0" y1="-26" x2="48" y2="-26"/>
+				<line class="st2" x1="0" y1="-28" x2="48" y2="-28"/>
+				<line class="st2" x1="0" y1="-30" x2="48" y2="-30"/>
+				<line class="st2" x1="0" y1="-32" x2="48" y2="-32"/>
+				<line class="st2" x1="0" y1="-34" x2="48" y2="-34"/>
+				<line class="st2" x1="0" y1="-36" x2="48" y2="-36"/>
+				<line class="st2" x1="0" y1="-38" x2="48" y2="-38"/>
+				<line class="st2" x1="0" y1="-40" x2="48" y2="-40"/>
+				<line class="st2" x1="0" y1="-42" x2="48" y2="-42"/>
+				<line class="st2" x1="0" y1="-44" x2="48" y2="-44"/>
+				<line class="st2" x1="0" y1="-46" x2="48" y2="-46"/>
+			</g>
+			<g>
+				<path d="M47.8-0.2v-47.5H0.2v47.5H47.8 M48,0H0v-48h48V0L48,0z"/>
+			</g>
+		</g>
+	</g>
+</symbol>
+<symbol  id="material_x5F_system_x5F_icon_x5F_keylines" viewBox="0 -48 48 48">
+	<g class="st3">
+		<defs>
+			<rect id="SVGID_3_" x="0" y="-48" class="st3" width="48" height="48"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<line class="st4" x1="24" y1="0" x2="24" y2="-48"/>
+		<line class="st4" x1="48" y1="-24" x2="0" y2="-24"/>
+		<line class="st4" x1="48" y1="-16" x2="0" y2="-16"/>
+		<line class="st4" x1="48" y1="-32" x2="0" y2="-32"/>
+		<line class="st4" x1="32" y1="-48" x2="32" y2="0"/>
+		<line class="st4" x1="16" y1="-48" x2="16" y2="0"/>
+		<line class="st4" x1="47.7" y1="-0.3" x2="0.2" y2="-47.8"/>
+		<line class="st4" x1="0.2" y1="-0.3" x2="47.7" y2="-47.8"/>
+		<path class="st4" d="M24-14c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34-18.5,29.5-14,24-14z"/>
+		<path class="st4" d="M24-4C12.9-4,4-12.9,4-24c0-11.1,8.9-20,20-20c11.1,0,20,8.9,20,20C44-12.9,35.1-4,24-4z"/>
+		<path class="st4" d="M38-6H10c-2.2,0-4-1.8-4-4v-28c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42-7.8,40.2-6,38-6z"/>
+		<path class="st4" d="M40-8H8c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4l0,24C44-9.8,42.2-8,40-8z"/>
+		<path class="st4" d="M40-40v32c0,2.2-1.8,4-4,4H12C9.8-4,8-5.8,8-8v-32c0-2.2,1.8-4,4-4h24C38.2-44,40-42.2,40-40z"/>
+		<g class="st5">
+			<path d="M47.7-0.3v-47.5H0.2v47.5H47.7 M48,0H0v-48h48V0L48,0z"/>
+		</g>
+	</g>
+</symbol>
+<g id="label">
+</g>
+<g id="border">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_border"  width="48" height="48" y="-48" transform="matrix(0.5 0 0 -0.5 3.916831e-04 5.698877e-05)" style="overflow:visible;"/>
+</g>
+<g id="icon">
+	<g>
+		<path class="st0" d="M0,0h24v24H0V0z"/>
+		<path class="st11" d="M9.4,16.6L4.8,12l4.6-4.6L8,6l-6,6l6,6L9.4,16.6z M14.6,16.6l4.6-4.6l-4.6-4.6L16,6l6,6l-6,6L14.6,16.6z"/>
+	</g>
+</g>
+<g id="grid" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_grid"  width="48" height="48" id="XMLID_70_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.139775e-04 -2.620241e-04)" style="display:inline;overflow:visible;opacity:0.15;"/>
+</g>
+<g id="keylines" class="st20">
+
+		<use xlink:href="#material_x5F_system_x5F_icon_x5F_keylines"  width="48" height="48" id="XMLID_50_" x="0" y="-48" transform="matrix(0.5 0 0 -0.5 1.709663e-04 -2.924798e-04)" style="display:inline;overflow:visible;"/>
+</g>
+</svg>
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 e7c0cddbd9..b88c61eddf 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
@@ -18,6 +18,7 @@
 import {
     Component,
     OnChanges,
+    SimpleChange,
     SimpleChanges,
     Input,
     Output,
@@ -28,7 +29,7 @@ import {
     ContentChild,
     Optional
 } from '@angular/core';
-import { DataTableAdapter, DataRow, DataColumn, DataSorting, DataRowEvent, ObjectDataTableAdapter } from '../../data/index';
+import { DataTableAdapter, DataRow, DataColumn, DataSorting, DataRowEvent, ObjectDataTableAdapter, ObjectDataRow } from '../../data/index';
 import { DataCellEvent } from './data-cell.event';
 import { DataRowActionEvent } from './data-row-action.event';
 import { DataColumnListComponent } from 'ng2-alfresco-core';
@@ -48,6 +49,9 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
     @Input()
     data: DataTableAdapter;
 
+    @Input()
+    rows: any[] = [];
+
     @Input()
     multiselect: boolean = false;
 
@@ -96,10 +100,25 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
     }
 
     ngOnChanges(changes: SimpleChanges) {
-        if (changes['data'] && changes['data'].currentValue) {
+        if (this.isPropertyChanged(changes['data'])) {
             this.loadTable();
             return;
         }
+
+        if (this.isPropertyChanged(changes['rows'])) {
+            if (this.data) {
+                this.data.setRows(this.convertToRowsData(changes['rows'].currentValue));
+            }
+            return;
+        }
+    }
+
+    isPropertyChanged(property: SimpleChange): boolean {
+        return property && property.currentValue ? true : false;
+    }
+
+    convertToRowsData(rows: any []): ObjectDataRow[] {
+        return rows.map(row => new ObjectDataRow(row));
     }
 
     loadTable() {
@@ -110,7 +129,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
         }
 
         if (!this.data) {
-            this.data = new ObjectDataTableAdapter([], schema);
+            this.data = new ObjectDataTableAdapter(this.rows, schema);
         } else {
             this.setHtmlColumnConfigurationOnObjectAdapter(schema);
         }
diff --git a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts
index d1eb3cd771..cab70d8f9c 100644
--- a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts
@@ -111,9 +111,25 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
             }
         }
 
+        if (col.type === 'image') {
+
+            if (col.key === 'icon') {
+
+                let icon = this.getImagePath(row.getValue('icon'));
+                if (icon) {
+                    return icon;
+                }
+                return this.getImagePath('ft_ic_miscellaneous.svg');
+            }
+        }
+
         return value;
     }
 
+    getImagePath(id: string): any {
+        return require('./../assets/images/' + id);
+    }
+
     getSorting(): DataSorting {
         return this._sorting;
     }

From e63802ef4f59875fb77ef10d79a76e9382b77913 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Thu, 18 May 2017 16:29:54 +0100
Subject: [PATCH 41/72] form renderer fixes (#1882)

- provide support for showing generated documents in Display Value widget
---
 .../src/components/widgets/core/form-field-types.ts  |  1 +
 .../widgets/display-value/display-value.widget.html  |  5 +++++
 .../widgets/display-value/display-value.widget.ts    | 12 ++++++++++++
 3 files changed, 18 insertions(+)

diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-types.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-types.ts
index 9d0e23f5be..920fd8e42e 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-types.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-types.ts
@@ -34,6 +34,7 @@ export class FormFieldTypes {
     static NUMBER: string = 'integer';
     static DATE: string = 'date';
     static AMOUNT: string = 'amount';
+    static DOCUMENT: string = 'document';
 
     static READONLY_TYPES: string[] = [
         FormFieldTypes.HYPERLINK,
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html
index cc370722a9..6b8cb636d6 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html
@@ -51,6 +51,11 @@
             </div>
         </div>
     </div>
+    <div *ngSwitchCase="'document'">
+        <div *ngIf="hasFile">
+            <activiti-content [id]="id" [showDocumentContent]="true"></activiti-content>
+        </div>
+    </div>
     <div *ngSwitchDefault
          class="mdl-textfield mdl-js-textfield text-widget is-disabled is-dirty is-upgraded">
         <label [attr.for]="field.id">{{field.name}}</label>
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 44e1e84ca1..c60846d69d 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
@@ -98,6 +98,18 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit {
                                 this.hasFile = false;
                             }
                             break;
+                        case FormFieldTypes.DOCUMENT:
+                            console.log('document');
+                            const file = this.field.value;
+                            if (file) {
+                                this.value = decodeURI(file.name);
+                                this.id = file.id;
+                                this.hasFile = true;
+                            } else {
+                                this.value = null;
+                                this.hasFile = false;
+                            }
+                            break;
                         case FormFieldTypes.TYPEAHEAD:
                             this.loadRestFieldValue();
                             break;

From b79ee13d11e3ffdad7a443838c93f96c8408ac2a Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Fri, 19 May 2017 16:06:27 +0100
Subject: [PATCH 42/72] [ADF-641] fix upload issues with various file types
 (#1887)

* fix upload issues with various file types

- removes file type check as most browsers leave this field empty
- allows uploading all types of files

* remove obsolete tests
---
 .../upload-drag-area.component.spec.ts        | 20 ------------
 .../components/upload-drag-area.component.ts  | 32 +++----------------
 2 files changed, 5 insertions(+), 47 deletions(-)

diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.spec.ts b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.spec.ts
index 0d38cee01f..f117f261b3 100644
--- a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.spec.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.spec.ts
@@ -65,26 +65,6 @@ describe('UploadDragAreaComponent', () => {
         TestBed.resetTestingModule();
     });
 
-    it('should show an folder non supported error in console when the file type is empty', () => {
-        component.showNotificationBar = false;
-        spyOn(logService, 'error');
-
-        let fileFake = new File([''], 'folder-fake', {type: ''});
-        component.onFilesDropped([fileFake]);
-
-        expect(logService.error).toHaveBeenCalledWith('FILE_UPLOAD.MESSAGES.FOLDER_NOT_SUPPORTED');
-    });
-
-    it('should show an folder non supported error in the notification bar when the file type is empty', () => {
-        component.showErrorNotificationBar = jasmine.createSpy('_showErrorNotificationBar');
-        component.showNotificationBar = true;
-
-        let fileFake = new File([''], 'folder-fake', {type: ''});
-        component.onFilesDropped([fileFake]);
-
-        expect(component.showErrorNotificationBar).toHaveBeenCalledWith('FILE_UPLOAD.MESSAGES.FOLDER_NOT_SUPPORTED');
-    });
-
     it('should upload the list of files dropped', () => {
         component.currentFolderPath = '/root-fake-/sites-fake/folder-fake';
         component.onSuccess = null;
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 70763a0ee8..f46b7957f7 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
@@ -97,37 +97,15 @@ export class UploadDragAreaComponent {
      */
     onFilesDropped(files: File[], rootId?: string, directory?: string): void {
         if (files.length) {
-            if (this.checkValidity(files)) {
-                this.uploadService.addToQueue(files);
-                this.uploadService.uploadFilesInTheQueue(rootId || this.rootFolderId, directory || this.currentFolderPath, this.onSuccess);
-                let latestFilesAdded = this.uploadService.getQueue();
-                if (this.showNotificationBar) {
-                    this.showUndoNotificationBar(latestFilesAdded);
-                }
-            } else {
-                let errorMessage: any;
-                errorMessage = this.translateService.get('FILE_UPLOAD.MESSAGES.FOLDER_NOT_SUPPORTED');
-                if (this.showNotificationBar) {
-                    this.showErrorNotificationBar(errorMessage.value);
-                } else {
-                    this.logService.error(errorMessage.value);
-                }
+            this.uploadService.addToQueue(files);
+            this.uploadService.uploadFilesInTheQueue(rootId || this.rootFolderId, directory || this.currentFolderPath, this.onSuccess);
+            let latestFilesAdded = this.uploadService.getQueue();
+            if (this.showNotificationBar) {
+                this.showUndoNotificationBar(latestFilesAdded);
             }
         }
     }
 
-    /**
-     * Check il the file is valid or not
-     * @param files
-     * @returns {boolean}
-     */
-    checkValidity(files: File[]): boolean {
-        if (files.length && files[0].type === '') {
-            return false;
-        }
-        return true;
-    }
-
     /**
      * Called when the file are dropped in the drag area
      * @param item - FileEntity

From e8889a5adb7e800f37d80cd5bf80a6975d72b5ae Mon Sep 17 00:00:00 2001
From: Vito <vito.albano@alfresco.com>
Date: Fri, 19 May 2017 09:47:15 -0700
Subject: [PATCH 43/72] [ADF-147] Add input mask to Text Widget on Form (#1885)

* ADF-147 create directive to apply input mask
* ADF-147 - created directive for calculate input mask
* ADF-147 added input mask for text element
---
 ng2-components/ng2-activiti-form/index.ts     |   5 +-
 ng2-components/ng2-activiti-form/package.json |   1 -
 .../activiti-start-form.component.spec.ts     |   4 +-
 .../form-field/form-field.component.spec.ts   |   3 +-
 .../container/container.widget.spec.ts        |   3 +-
 .../src/components/widgets/index.ts           |   6 +
 .../widgets/tabs/tabs.widget.spec.ts          |   3 +-
 .../widgets/text/text-mask.component.ts       | 223 ++++++++++++++++++
 .../components/widgets/text/text.widget.html  |   1 +
 .../widgets/text/text.widget.spec.ts          | 164 ++++++++++++-
 .../components/widgets/text/text.widget.ts    |  14 +-
 11 files changed, 417 insertions(+), 10 deletions(-)
 create mode 100644 ng2-components/ng2-activiti-form/src/components/widgets/text/text-mask.component.ts

diff --git a/ng2-components/ng2-activiti-form/index.ts b/ng2-components/ng2-activiti-form/index.ts
index b20bf4efb1..8ee90c9dd8 100644
--- a/ng2-components/ng2-activiti-form/index.ts
+++ b/ng2-components/ng2-activiti-form/index.ts
@@ -30,7 +30,7 @@ import { WidgetVisibilityService } from './src/services/widget-visibility.servic
 import { ActivitiAlfrescoContentService } from './src/services/activiti-alfresco.service';
 import { FormRenderingService } from './src/services/form-rendering.service';
 import { HttpModule } from '@angular/http';
-import { WIDGET_DIRECTIVES } from './src/components/widgets/index';
+import { WIDGET_DIRECTIVES, MASK_DIRECTIVE } from './src/components/widgets/index';
 
 export * from './src/components/activiti-form.component';
 export * from './src/components/activiti-content.component';
@@ -67,7 +67,8 @@ export const ACTIVITI_FORM_PROVIDERS: any[] = [
         HttpModule
     ],
     declarations: [
-        ...ACTIVITI_FORM_DIRECTIVES
+        ...ACTIVITI_FORM_DIRECTIVES,
+        ...MASK_DIRECTIVE
     ],
     entryComponents: [
         ...WIDGET_DIRECTIVES
diff --git a/ng2-components/ng2-activiti-form/package.json b/ng2-components/ng2-activiti-form/package.json
index 2886e31b79..3dc28649b7 100644
--- a/ng2-components/ng2-activiti-form/package.json
+++ b/ng2-components/ng2-activiti-form/package.json
@@ -42,7 +42,6 @@
     "@angular/platform-browser": "~4.0.0",
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
-
     "@angular/material": "2.0.0-beta.1",
     "alfresco-js-api": "~1.4.0",
     "core-js": "2.4.1",
diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.spec.ts b/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.spec.ts
index 7036dcd298..9cf614e1eb 100644
--- a/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.spec.ts
@@ -23,6 +23,7 @@ import { ActivitiStartForm } from './activiti-start-form.component';
 import { FormFieldComponent } from './form-field/form-field.component';
 import { ActivitiContent } from './activiti-content.component';
 import { WIDGET_DIRECTIVES } from './widgets/index';
+import { MASK_DIRECTIVE } from './widgets/index';
 import { FormService } from './../services/form.service';
 import { EcmModelService } from './../services/ecm-model.service';
 import { WidgetVisibilityService } from './../services/widget-visibility.service';
@@ -47,7 +48,8 @@ describe('ActivitiStartForm', () => {
                 ActivitiStartForm,
                 FormFieldComponent,
                 ActivitiContent,
-                ...WIDGET_DIRECTIVES
+                ...WIDGET_DIRECTIVES,
+                ...MASK_DIRECTIVE
             ],
             providers: [
                 { provide: AlfrescoTranslationService, useClass: TranslationMock },
diff --git a/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.spec.ts b/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.spec.ts
index 675f875fd3..2a3df2f17f 100644
--- a/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.spec.ts
@@ -21,6 +21,7 @@ import { FormFieldComponent } from './form-field.component';
 import { FormRenderingService } from './../../services/form-rendering.service';
 import { FormModel, FormFieldModel, FormFieldTypes } from './../widgets/core/index';
 import { TextWidget } from './../widgets/text/text.widget';
+import { InputMaskDirective } from './../widgets/text/text-mask.component';
 import { CheckboxWidget } from './../widgets/checkbox/checkbox.widget';
 import { WidgetVisibilityService } from './../../services/widget-visibility.service';
 
@@ -36,7 +37,7 @@ describe('FormFieldComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
                 imports: [CoreModule],
-                declarations: [FormFieldComponent, TextWidget, CheckboxWidget],
+                declarations: [FormFieldComponent, TextWidget, CheckboxWidget, InputMaskDirective],
                 providers: [
                     FormRenderingService,
                     WidgetVisibilityService
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts
index 130d6d5417..f50f11a51a 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts
@@ -23,6 +23,7 @@ import { FormFieldModel } from './../core/form-field.model';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
 import { WIDGET_DIRECTIVES } from '../index';
+import { MASK_DIRECTIVE } from '../index';
 import { FormFieldComponent } from './../../form-field/form-field.component';
 import { ActivitiContent } from './../../activiti-content.component';
 import { fakeFormJson } from '../../../services/assets/widget-visibility.service.mock';
@@ -133,7 +134,7 @@ describe('ContainerWidget', () => {
         beforeEach(async(() => {
             TestBed.configureTestingModule({
                 imports: [CoreModule],
-                declarations: [FormFieldComponent, ActivitiContent, WIDGET_DIRECTIVES]
+                declarations: [FormFieldComponent, ActivitiContent, WIDGET_DIRECTIVES, MASK_DIRECTIVE]
             }).compileComponents().then(() => {
                 fixture = TestBed.createComponent(ContainerWidget);
                 containerWidgetComponent = fixture.componentInstance;
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/index.ts b/ng2-components/ng2-activiti-form/src/components/widgets/index.ts
index fdc59cff0f..d537524388 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/index.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/index.ts
@@ -41,6 +41,7 @@ import { DropdownEditorComponent } from './dynamic-table/editors/dropdown/dropdo
 import { BooleanEditorComponent } from './dynamic-table/editors/boolean/boolean.editor';
 import { TextEditorComponent } from './dynamic-table/editors/text/text.editor';
 import { RowEditorComponent } from './dynamic-table/editors/row.editor';
+import { InputMaskDirective } from './text/text-mask.component';
 
 // core
 export * from './widget.component';
@@ -76,6 +77,7 @@ export * from './dynamic-table/editors/date/date.editor';
 export * from './dynamic-table/editors/dropdown/dropdown.editor';
 export * from './dynamic-table/editors/boolean/boolean.editor';
 export * from './dynamic-table/editors/text/text.editor';
+export * from './text/text-mask.component';
 
 export const WIDGET_DIRECTIVES: any[] = [
     UnknownWidget,
@@ -105,3 +107,7 @@ export const WIDGET_DIRECTIVES: any[] = [
     TextEditorComponent,
     RowEditorComponent
 ];
+
+export const MASK_DIRECTIVE: any[] = [
+    InputMaskDirective
+];
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.spec.ts
index 1ffd67bebf..40d5f9b819 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.spec.ts
@@ -22,6 +22,7 @@ import { fakeFormJson } from '../../../services/assets/widget-visibility.service
 import { TabsWidget } from './tabs.widget';
 import { TabModel } from '../core/tab.model';
 import { WIDGET_DIRECTIVES } from '../index';
+import { MASK_DIRECTIVE } from '../index';
 import { FormFieldComponent } from './../../form-field/form-field.component';
 import { ActivitiContent } from './../../activiti-content.component';
 import { CoreModule } from 'ng2-alfresco-core';
@@ -104,7 +105,7 @@ describe('TabsWidget', () => {
         beforeEach(async(() => {
             TestBed.configureTestingModule({
                 imports: [CoreModule],
-                declarations: [FormFieldComponent, ActivitiContent, WIDGET_DIRECTIVES]
+                declarations: [FormFieldComponent, ActivitiContent, WIDGET_DIRECTIVES, MASK_DIRECTIVE]
             }).compileComponents().then(() => {
                 fixture = TestBed.createComponent(TabsWidget);
                 tabWidgetComponent = fixture.componentInstance;
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/text/text-mask.component.ts b/ng2-components/ng2-activiti-form/src/components/widgets/text/text-mask.component.ts
new file mode 100644
index 0000000000..faf6128b3a
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/text/text-mask.component.ts
@@ -0,0 +1,223 @@
+/*!
+ * @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.
+ */
+
+import {
+    Directive,
+    ElementRef,
+    Renderer,
+    HostListener,
+    Input,
+    OnChanges,
+    SimpleChanges,
+    forwardRef
+} from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+
+export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => InputMaskDirective),
+    multi: true
+};
+
+@Directive({
+    selector: '[textMask]',
+    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
+})
+export class InputMaskDirective implements OnChanges, ControlValueAccessor {
+
+    @Input('textMask') inputMask: {
+        mask: '',
+        isReversed: false
+    };
+
+    private translationMask = {
+        '0': { pattern: /\d/ },
+        '9': { pattern: /\d/, optional: true },
+        '#': { pattern: /\d/, recursive: true },
+        'A': { pattern: /[a-zA-Z0-9]/ },
+        'S': { pattern: /[a-zA-Z]/ }
+    };
+
+    private byPassKeys = [9, 16, 17, 18, 36, 37, 38, 39, 40, 91];
+    private value;
+    private invalidCharacters = [];
+
+    constructor(private el: ElementRef, private render: Renderer) {
+    }
+
+    _onChange = (_: any) => {
+    }
+
+    _onTouched = () => {
+    }
+
+    @HostListener('input', ['$event'])
+    @HostListener('keyup', ['$event']) onTextInput(event: KeyboardEvent) {
+        if (this.inputMask && this.inputMask.mask) {
+            this.maskValue(this.el.nativeElement.value, this.el.nativeElement.selectionStart,
+                this.inputMask.mask, this.inputMask.isReversed, event.keyCode);
+        }
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['inputMask'] && changes['inputMask'].currentValue['mask']) {
+            this.inputMask = changes['inputMask'].currentValue;
+        }
+    }
+
+    writeValue(value: any) {
+        this.el.nativeElement.value = value;
+    }
+
+    registerOnChange(fn: any) {
+        this._onChange = fn;
+    }
+
+    registerOnTouched(fn: () => any): void {
+        this._onTouched = fn;
+    }
+
+    private maskValue(actualValue, startCaret, maskToApply, isMaskReversed, keyCode) {
+        if (this.byPassKeys.indexOf(keyCode) === -1) {
+            let value = this.getMasked(false, actualValue, maskToApply, isMaskReversed);
+            let calculatedCaret = this.calculateCaretPosition(startCaret, actualValue, keyCode);
+            this.render.setElementAttribute(this.el.nativeElement, 'value', value);
+            this.el.nativeElement.value = value;
+            this.setValue(value);
+            this._onChange(value);
+            this.setCaretPosition(calculatedCaret);
+        }
+    }
+
+    private setCaretPosition(caretPosition) {
+        this.el.nativeElement.moveStart = caretPosition;
+        this.el.nativeElement.moveEnd = caretPosition;
+    }
+
+    calculateCaretPosition(caretPosition, newValue, keyCode) {
+        let newValueLength = newValue.length;
+        let oldValue = this.getValue() || '';
+        let oldValueLength = oldValue.length;
+
+        if (keyCode === 8 && oldValue !== newValue) {
+            caretPosition = caretPosition - (newValue.slice(0, caretPosition).length - oldValue.slice(0, caretPosition).length);
+        } else if (oldValue !== newValue) {
+            if (caretPosition >= oldValueLength) {
+                caretPosition = newValueLength;
+            } else {
+                caretPosition = caretPosition + (newValue.slice(0, caretPosition).length - oldValue.slice(0, caretPosition).length);
+            }
+        }
+        return caretPosition;
+    }
+
+    getMasked(skipMaskChars, val, mask, isReversed = false) {
+        let buf = [],
+            value = val,
+            maskIndex = 0,
+            maskLen = mask.length,
+            valueIndex = 0,
+            valueLength = value.length,
+            offset = 1,
+            addMethod = 'push',
+            resetPos = -1,
+            lastMaskChar,
+            lastUntranslatedMaskChar,
+            check;
+
+        if (isReversed) {
+            addMethod = 'unshift';
+            offset = -1;
+            lastMaskChar = 0;
+            maskIndex = maskLen - 1;
+            valueIndex = valueLength - 1;
+        } else {
+            lastMaskChar = maskLen - 1;
+        }
+        check = this.isToCheck(isReversed, maskIndex, maskLen, valueIndex, valueLength);
+        while (check) {
+            let maskDigit = mask.charAt(maskIndex),
+                valDigit = value.charAt(valueIndex),
+                translation = this.translationMask[maskDigit];
+
+            if (translation) {
+                if (valDigit.match(translation.pattern)) {
+                    buf[addMethod](valDigit);
+                    if (translation.recursive) {
+                        if (resetPos === -1) {
+                            resetPos = maskIndex;
+                        } else if (maskIndex === lastMaskChar) {
+                            maskIndex = resetPos - offset;
+                        }
+                        if (lastMaskChar === resetPos) {
+                            maskIndex -= offset;
+                        }
+                    }
+                    maskIndex += offset;
+                } else if (valDigit === lastUntranslatedMaskChar) {
+                    lastUntranslatedMaskChar = undefined;
+                } else if (translation.optional) {
+                    maskIndex += offset;
+                    valueIndex -= offset;
+                } else {
+                    this.invalidCharacters.push({
+                        index: valueIndex,
+                        digit: valDigit,
+                        translated: translation.pattern
+                    });
+                }
+                valueIndex += offset;
+            } else {
+                if (!skipMaskChars) {
+                    buf[addMethod](maskDigit);
+                }
+                if (valDigit === maskDigit) {
+                    valueIndex += offset;
+                } else {
+                    lastUntranslatedMaskChar = maskDigit;
+                }
+                maskIndex += offset;
+            }
+            check = this.isToCheck(isReversed, maskIndex, maskLen, valueIndex, valueLength);
+        }
+
+        let lastMaskCharDigit = mask.charAt(lastMaskChar);
+        if (maskLen === valueLength + 1 && !this.translationMask[lastMaskCharDigit]) {
+            buf.push(lastMaskCharDigit);
+        }
+
+        return buf.join('');
+    }
+
+    private isToCheck(isReversed, maskIndex, maskLen, valueIndex, valueLength) {
+        let check = false;
+        if (isReversed) {
+            check = (maskIndex > -1) && (valueIndex > -1);
+        } else {
+            check = (maskIndex < maskLen) && (valueIndex < valueLength);
+        }
+        return check;
+    }
+
+    private setValue(value) {
+        this.value = value;
+    }
+
+    private getValue() {
+        return this.value;
+    }
+}
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html
index 7f78f0af84..5efc1d0c0b 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html
@@ -9,6 +9,7 @@
            [(ngModel)]="field.value"
            (ngModelChange)="onFieldChanged(field)"
            [disabled]="field.readOnly"
+           [textMask]="{mask: mask, isReversed: isMaskReversed}"
            placeholder="{{field.placeholder}}">
     <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
 </div>
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts
index 5edea9002c..209f3bffca 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts
@@ -16,6 +16,12 @@
  */
 
 import { TextWidget } from './text.widget';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { CoreModule } from 'ng2-alfresco-core';
+import { InputMaskDirective } from './text-mask.component';
+import { FormFieldModel } from '../core/form-field.model';
+import { FormModel } from '../core/form.model';
+import { FormFieldTypes } from '../core/form-field-types';
 
 describe('TextWidget', () => {
 
@@ -25,11 +31,167 @@ describe('TextWidget', () => {
     beforeEach(() => {
         widget = new TextWidget();
 
-        componentHandler =  jasmine.createSpyObj('componentHandler', [
+        componentHandler = jasmine.createSpyObj('componentHandler', [
             'upgradeAllRegistered'
         ]);
 
         window['componentHandler'] = componentHandler;
     });
 
+    describe('when template is ready', () => {
+        let textWidget: TextWidget;
+        let fixture: ComponentFixture<TextWidget>;
+        let element: HTMLInputElement;
+        let componentHandler;
+
+        beforeEach(async(() => {
+            componentHandler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered', 'upgradeElement']);
+            window['componentHandler'] = componentHandler;
+        }));
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                imports: [CoreModule],
+                declarations: [TextWidget, InputMaskDirective]
+            }).compileComponents().then(() => {
+                fixture = TestBed.createComponent(TextWidget);
+                textWidget = fixture.componentInstance;
+                element = fixture.nativeElement;
+            });
+        }));
+
+        afterEach(() => {
+            fixture.destroy();
+            TestBed.resetTestingModule();
+        });
+
+        describe('and mask is configured on text element', () => {
+
+            let inputElement: HTMLInputElement;
+
+            beforeEach(() => {
+                textWidget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+                    id: 'text-id',
+                    name: 'text-name',
+                    value: '',
+                    params: { inputMask: '##-##0,00%' },
+                    type: FormFieldTypes.TEXT,
+                    readOnly: false
+                });
+
+                fixture.detectChanges();
+                inputElement = <HTMLInputElement>element.querySelector('#text-id');
+            });
+
+            it('should show text widget', () => {
+                expect(element.querySelector('#text-id')).toBeDefined();
+                expect(element.querySelector('#text-id')).not.toBeNull();
+            });
+
+            it('should prevent text to be written if is not allowed by the mask on keyUp event', async(() => {
+                expect(element.querySelector('#text-id')).not.toBeNull();
+
+                inputElement.value = 'F';
+                textWidget.field.value = 'F';
+                let event: any = new Event('keyup');
+                event.keyCode = '70';
+                inputElement.dispatchEvent(event);
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    inputElement = <HTMLInputElement>element.querySelector('#text-id');
+                    expect(inputElement.value).toBe('');
+                });
+            }));
+
+            it('should prevent text to be written if is not allowed by the mask on input event', async(() => {
+                expect(element.querySelector('#text-id')).not.toBeNull();
+
+                inputElement.value = 'F';
+                textWidget.field.value = 'F';
+                inputElement.dispatchEvent(new Event('input'));
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    inputElement = <HTMLInputElement>element.querySelector('#text-id');
+                    expect(inputElement.value).toBe('');
+                });
+            }));
+
+            it('should allow masked configured value on keyUp event', async(() => {
+                expect(element.querySelector('#text-id')).not.toBeNull();
+
+                inputElement.value = '1';
+                textWidget.field.value = '1';
+                let event: any = new Event('keyup');
+                event.keyCode = '49';
+                inputElement.dispatchEvent(event);
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    let inputElement: HTMLInputElement = <HTMLInputElement>element.querySelector('#text-id');
+                    expect(inputElement.value).toBe('1');
+                });
+            }));
+
+            it('should autofill masked configured value on keyUp event', async(() => {
+                expect(element.querySelector('#text-id')).not.toBeNull();
+
+                inputElement.value = '12345678';
+                textWidget.field.value = '12345678';
+                let event: any = new Event('keyup');
+                event.keyCode = '49';
+                inputElement.dispatchEvent(event);
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    let inputElement: HTMLInputElement = <HTMLInputElement>element.querySelector('#text-id');
+                    expect(inputElement.value).toBe('12-345,67%');
+                });
+            }));
+        });
+
+        describe('when the mask is reversed ', () => {
+
+            let inputElement: HTMLInputElement;
+
+            beforeEach(() => {
+                textWidget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+                    id: 'text-id',
+                    name: 'text-name',
+                    value: '',
+                    params: { existingColspan: 1, maxColspan: 2, inputMask: "#.##0,00%", inputMaskReversed: true },
+                    type: FormFieldTypes.TEXT,
+                    readOnly: false
+                });
+
+                fixture.detectChanges();
+                inputElement = <HTMLInputElement>element.querySelector('#text-id');
+            });
+
+            afterEach(() => {
+                fixture.destroy();
+                TestBed.resetTestingModule();
+            });
+
+            it('should be able to apply the mask reversed', async(() => {
+                expect(element.querySelector('#text-id')).not.toBeNull();
+
+                inputElement.value = '1234';
+                textWidget.field.value = '1234';
+                let event: any = new Event('keyup');
+                event.keyCode = '49';
+                inputElement.dispatchEvent(event);
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    let inputElement: HTMLInputElement = <HTMLInputElement>element.querySelector('#text-id');
+                    expect(inputElement.value).toBe('12,34%');
+                });
+            }));
+        });
+    });
+
 });
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 309ed71135..e093a143b5 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
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
 
 @Component({
@@ -23,5 +23,15 @@ import { WidgetComponent } from './../widget.component';
     templateUrl: './text.widget.html',
     styleUrls: ['./text.widget.css']
 })
-export class TextWidget extends WidgetComponent {
+export class TextWidget extends WidgetComponent implements OnInit {
+
+    private mask;
+    private isMaskReversed;
+
+    ngOnInit() {
+        if (this.field.params && this.field.params['inputMask']) {
+            this.mask = this.field.params['inputMask'];
+            this.isMaskReversed = this.field.params['inputMaskReversed'] ? this.field.params['inputMaskReversed'] : false;
+        }
+    }
 }

From 38a04d24fc879bd22744403bbaff0b9302764086 Mon Sep 17 00:00:00 2001
From: Vito <vito.albano@alfresco.com>
Date: Fri, 19 May 2017 09:56:35 -0700
Subject: [PATCH 44/72] [ADF-647] Fix retrieving value for dropdown (#1888)

* [ADF-647] Fix retrieving value for dropdown
---
 .../widgets/core/form-field.model.spec.ts     | 24 ++++++
 .../widgets/core/form-field.model.ts          |  8 +-
 .../display-value.widget.spec.ts              | 80 +++++++++++++++----
 .../display-value/display-value.widget.ts     |  3 +-
 4 files changed, 94 insertions(+), 21 deletions(-)

diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.spec.ts
index 45b47162a5..0a9fbaf1a4 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.spec.ts
@@ -332,4 +332,28 @@ describe('FormFieldModel', () => {
         });
     });
 
+    it('should be able to check if the field has options available', () =>{
+        let form = new FormModel();
+        let field = new FormFieldModel(form, {
+            id: 'dropdown-happy',
+            type: FormFieldTypes.DROPDOWN,
+            options: [
+                { id: 'opt1', name: 'Option 1' },
+                { id: 'opt2', name: 'Option 2' }
+            ]
+        });
+
+        expect(field.hasOptions()).toBeTruthy();
+    });
+
+    it('should return false if field has no options', () =>{
+        let form = new FormModel();
+        let field = new FormFieldModel(form, {
+            id: 'dropdown-sad',
+            type: FormFieldTypes.DROPDOWN
+        });
+
+        expect(field.hasOptions()).toBeFalsy();
+    });
+
 });
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts
index 6a20425aee..7b55bef94a 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts
@@ -244,8 +244,8 @@ export class FormFieldModel extends FormWidgetModel {
         }
 
         /*
-        This is needed due to Activiti displaying/editing dates in d-M-YYYY format
-        but storing on server in ISO8601 format (i.e. 2013-02-04T22:44:30.652Z)
+         This is needed due to Activiti displaying/editing dates in d-M-YYYY format
+         but storing on server in ISO8601 format (i.e. 2013-02-04T22:44:30.652Z)
          */
         if (json.type === FormFieldTypes.DATE) {
             if (value) {
@@ -355,4 +355,8 @@ export class FormFieldModel extends FormWidgetModel {
         let option: FormFieldOption = this.options.find(opt => opt.id === this.value);
         return option ? option.name : null;
     }
+
+    hasOptions() {
+        return this.options && this.options.length > 0;
+    }
 }
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 17af6953c6..cefe81373f 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
@@ -50,7 +50,7 @@ describe('DisplayValueWidget', () => {
 
     it('should take field value on init', () => {
         let value = '<value>';
-        widget.field = new FormFieldModel(null, {value: value});
+        widget.field = new FormFieldModel(null, { value: value });
         widget.field.params = null;
         widget.ngOnInit();
         expect(widget.value).toBe(value);
@@ -150,7 +150,7 @@ describe('DisplayValueWidget', () => {
         widget.field = new FormFieldModel(null, {
             type: FormFieldTypes.DISPLAY_VALUE,
             value: [
-                {name: 'file1'}
+                { name: 'file1' }
             ],
             params: {
                 field: {
@@ -238,8 +238,8 @@ describe('DisplayValueWidget', () => {
             restUrl: null,
             value: '2',
             options: [
-                {id: '1', name: 'option 1'},
-                {id: '2', name: 'option 2'}
+                { id: '1', name: 'option 1' },
+                { id: '2', name: 'option 2' }
             ],
             params: {
                 field: {
@@ -257,8 +257,8 @@ describe('DisplayValueWidget', () => {
             restUrl: null,
             value: '100',
             options: [
-                {id: '1', name: 'option 1'},
-                {id: '2', name: 'option 2'}
+                { id: '1', name: 'option 1' },
+                { id: '2', name: 'option 2' }
             ],
             params: {
                 field: {
@@ -306,22 +306,22 @@ describe('DisplayValueWidget', () => {
         spyOn(formService, 'getRestFieldValues').and.returnValue(
             Observable.create(observer => {
                 observer.next([
-                    {id: '1', name: 'option 1'},
-                    {id: '2', name: 'option 2'}
+                    { id: '1', name: 'option 1' },
+                    { id: '2', name: 'option 2' }
                 ]);
                 observer.complete();
             })
         );
 
-        let form = new FormModel({taskId: '<id>'});
+        let form = new FormModel({ taskId: '<id>' });
 
         widget.field = new FormFieldModel(form, {
             type: FormFieldTypes.DISPLAY_VALUE,
             restUrl: '<url>',
             value: '2',
             options: [
-                {id: '1', name: 'option 1'},
-                {id: '2', name: 'option 2'}
+                { id: '1', name: 'option 1' },
+                { id: '2', name: 'option 2' }
             ],
             params: {
                 field: {
@@ -338,14 +338,14 @@ describe('DisplayValueWidget', () => {
         spyOn(formService, 'getRestFieldValues').and.returnValue(
             Observable.create(observer => {
                 observer.next([
-                    {id: '1', name: 'option 1'},
-                    {id: '2', name: 'option 2'}
+                    { id: '1', name: 'option 1' },
+                    { id: '2', name: 'option 2' }
                 ]);
                 observer.complete();
             })
         );
 
-        let form = new FormModel({taskId: '<id>'});
+        let form = new FormModel({ taskId: '<id>' });
 
         widget.field = new FormFieldModel(form, {
             type: FormFieldTypes.DISPLAY_VALUE,
@@ -370,7 +370,7 @@ describe('DisplayValueWidget', () => {
             })
         );
 
-        let form = new FormModel({taskId: '<id>'});
+        let form = new FormModel({ taskId: '<id>' });
 
         widget.field = new FormFieldModel(form, {
             type: FormFieldTypes.DISPLAY_VALUE,
@@ -393,7 +393,7 @@ describe('DisplayValueWidget', () => {
             Observable.throw(error)
         );
 
-        let form = new FormModel({taskId: '<id>'});
+        let form = new FormModel({ taskId: '<id>' });
 
         widget.field = new FormFieldModel(form, {
             type: FormFieldTypes.DISPLAY_VALUE,
@@ -628,7 +628,7 @@ describe('DisplayValueWidget', () => {
                     FormService,
                     WidgetVisibilityService
                 ],
-                schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
+                schemas: [CUSTOM_ELEMENTS_SCHEMA]
             }).compileComponents().then(() => {
                 fixture = TestBed.createComponent(DisplayValueWidget);
                 widgetUI = fixture.componentInstance;
@@ -686,5 +686,51 @@ describe('DisplayValueWidget', () => {
                     expect(elWidget.checked).toBeFalsy();
                 });
         }));
+
+        it('should show the dropdown value taken from options when field has options', async(() => {
+            widgetUI.field = new FormFieldModel(null, {
+                id: 'fake-dropdown-id',
+                type: FormFieldTypes.DISPLAY_VALUE,
+                value: '1',
+                options: [
+                    { id: '1', name: 'Option 1' },
+                    { id: '2', name: 'Option 2' }
+                ],
+                params: {
+                    field: {
+                        type: FormFieldTypes.DROPDOWN
+                    }
+                }
+            });
+
+            fixture.whenStable()
+                .then(() => {
+                    fixture.detectChanges();
+                    let elWidget: any = element.querySelector('#fake-dropdown-id');
+                    expect(elWidget).toBeDefined();
+                    expect(elWidget.value).toBe('Option 1');
+                });
+        }));
+
+        it('should show the dropdown value taken from value when field has no options', async(() => {
+            widgetUI.field = new FormFieldModel(null, {
+                id: 'fake-dropdown-id',
+                type: FormFieldTypes.DISPLAY_VALUE,
+                value: 'FAKE',
+                params: {
+                    field: {
+                        type: FormFieldTypes.DROPDOWN
+                    }
+                }
+            });
+
+            fixture.whenStable()
+                .then(() => {
+                    fixture.detectChanges();
+                    let elWidget: any = element.querySelector('#fake-dropdown-id');
+                    expect(elWidget).toBeDefined();
+                    expect(elWidget.value).toBe('FAKE');
+                });
+        }));
     });
 });
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 c60846d69d..4251972a2a 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
@@ -99,7 +99,6 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit {
                             }
                             break;
                         case FormFieldTypes.DOCUMENT:
-                            console.log('document');
                             const file = this.field.value;
                             if (file) {
                                 this.value = decodeURI(file.name);
@@ -117,7 +116,7 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit {
                             if (this.field.restUrl) {
                                 this.loadRestFieldValue();
                             } else {
-                                this.value = this.field.getOptionName();
+                                this.value = this.field.hasOptions() ? this.field.getOptionName() : this.value;
                             }
                             break;
                         case FormFieldTypes.RADIO_BUTTONS:

From d5f90a59f438658c54a03cbef8f33918bba80d48 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Mon, 22 May 2017 09:09:00 +0100
Subject: [PATCH 45/72] List all components in readme (#1889)

---
 ng2-components/README.md | 63 ++++++++++++++++++++++++++++++----------
 1 file changed, 48 insertions(+), 15 deletions(-)

diff --git a/ng2-components/README.md b/ng2-components/README.md
index b2a84c07cd..bbe8a3959a 100644
--- a/ng2-components/README.md
+++ b/ng2-components/README.md
@@ -32,29 +32,62 @@
 ## Base components
 
 - [Core library](ng2-alfresco-core/README.md)
+- [alfresco-viewer](ng2-alfresco-viewer/README.md)
+- [adf-accordion-group](ng2-alfresco-core/README.md)
+- [adf-accordion](ng2-alfresco-core/README.md)
+- [context-menu](ng2-alfresco-core/README.md)
  * Material Design elements
  * Context Menu component
 
 ## ECM components
 
-- [DataTable](ng2-alfresco-datatable/README.md)
-- [DocumentList](ng2-alfresco-documentlist/README.md)
-- [Login](ng2-alfresco-login/README.md)
-- [Search](ng2-alfresco-search/README.md)
-- [Social](ng2-alfresco-social/README.md)
-- [Tag list and controls](ng2-alfresco-tag/README.md)
-- [User Info](ng2-alfresco-userinfo/README.md)
-- [Upload](ng2-alfresco-upload/README.md)
-- [Viewer](ng2-alfresco-viewer/README.md)
-- [Webscript Viewer](ng2-alfresco-webscript/README.md)
+- [alfresco-webscript-get](ng2-alfresco-webscript/README.md)
+- [alfresco-pagination](ng2-alfresco-datatable/README.md)
+- [alfresco-datatable](ng2-alfresco-datatable/README.md)
+- [alfresco-login](ng2-alfresco-login/README.md)
+- [alfresco-tag-node-actions-list](ng2-alfresco-tag/README.md)
+- [alfresco-tag-list](ng2-alfresco-tag/README.md)
+- [alfresco-tag-node-list](ng2-alfresco-tag/README.md)
+- [alfresco-document-list](ng2-alfresco-documentlist/README.md)
+- [alfresco-document-menu-action](ng2-alfresco-documentlist/README.md)
+- [alfresco-document-list-breadcrumb](ng2-alfresco-documentlist/README.md)
+- [adf-rating](ng2-alfresco-social/README.md)
+- [adf-like](ng2-alfresco-social/README.md)
+- [alfresco-upload-drag-area](ng2-alfresco-upload/README.md)
+- [alfresco-upload-button](ng2-alfresco-upload/README.md)
+- [alfresco-file-uploading-list](ng2-alfresco-upload/README.md)
+- [alfresco-search](ng2-alfresco-search/README.md)
+- [alfresco-search-control](ng2-alfresco-search/README.md)
+- [alfresco-search-autocomplete](ng2-alfresco-search/README.md)
+- [ng2-alfresco-userinfo](ng2-alfresco-userinfo/README.md)
 
 ## BPM components
 
-- [Analytics](ng2-activiti-analytics/README.md)
-- [Diagrams](ng2-activiti-diagrams/README.md)
-- [TaskList](ng2-activiti-tasklist/README.md)
-- [ProcessList](ng2-activiti-processlist/README.md)
-- [Form](ng2-activiti-form/README.md)
+- [activiti-analytics](ng2-activiti-analytics/README.md)
+- [activiti-analytics-generator](ng2-activiti-analytics/README.md)
+- [activiti-form](ng2-activiti-form/README.md)
+- [activiti-content](ng2-activiti-form/README.md)
+- [activiti-start-form](ng2-activiti-form/README.md)
+- [activiti-process-instance-filters](ng2-activiti-processlist/README.md)
+- [activiti-process-instance-list](ng2-activiti-processlist/README.md)
+- [activiti-process-instance-details](ng2-activiti-processlist/README.md)
+- [activiti-start-process](ng2-activiti-processlist/README.md)
+- [activiti-apps](ng2-activiti-tasklist/README.md)
+- [activiti-tasklist](ng2-activiti-tasklist/README.md)
+- [activiti-checklist](ng2-activiti-tasklist/README.md)
+- [adf-task-attachment-list](ng2-activiti-tasklist/README.md)
+- [activiti-people](ng2-activiti-tasklist/README.md)
+- [activiti-comments](ng2-activiti-tasklist/README.md)
+- [activiti-task-header](ng2-activiti-tasklist/README.md)
+- [activiti-task-details](ng2-activiti-tasklist/README.md)
+- [activiti-start-task](ng2-activiti-tasklist/README.md)
+- [activiti-filters](ng2-activiti-tasklist/README.md)
+- [activiti-people-search](ng2-activiti-tasklist/README.md)
+- [activiti-process-instance-header](ng2-activiti-processlist/README.md)
+- [activiti-process-instance-tasks](ng2-activiti-processlist/README.md)
+- [activiti-process-instance-comments](ng2-activiti-processlist/README.md)
+- [activiti-process-instance-variables](ng2-activiti-processlist/README.md)
+- [activiti-diagram](ng2-activiti-diagrams/README.md)
 
 You can browse all the components at the following address:
 

From 075ee8a538ac43d3448a593e6f3c19a2d5a4a983 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Mon, 22 May 2017 09:57:10 +0100
Subject: [PATCH 46/72] relative pointing (#1879)

readme modify
start.sh and nom-build-all refactoring
change travis conf
update version of zone.js (fixes console error)
karma conf remove dist
add alias build
override tsconfig components build
---
 .gitignore                                    |   1 +
 .travis.yml                                   |  29 ++--
 appveyor.yml                                  |   7 +-
 demo-shell-ng2/.gitignore                     |   3 +
 .../activiti/activiti-demo.component.html     |   8 +-
 demo-shell-ng2/config/karma.conf.js           |   2 +
 demo-shell-ng2/config/webpack.common.js       |  15 +-
 demo-shell-ng2/config/webpack.dev.js          |  52 ++++---
 demo-shell-ng2/config/webpack.prod.js         |  14 ++
 demo-shell-ng2/config/webpack.test.js         |   1 +
 demo-shell-ng2/package.json                   |  23 ++-
 demo-shell-ng2/tsconfig.json                  |  32 ++++-
 ng2-components/config/webpack.common.js       |  38 +++--
 ng2-components/config/webpack.test.js         |  12 +-
 .../ng2-activiti-analytics/karma.conf.js      |   2 -
 .../ng2-activiti-analytics/tsconfig.json      |  22 ++-
 .../ng2-activiti-diagrams/karma.conf.js       |   2 -
 .../ng2-activiti-diagrams/tsconfig.json       |  22 ++-
 .../ng2-activiti-form/karma.conf.js           |   2 -
 .../ng2-activiti-form/tsconfig.json           |  22 ++-
 .../ng2-activiti-processlist/karma.conf.js    |   2 -
 .../ng2-activiti-processlist/tsconfig.json    |  22 ++-
 .../ng2-activiti-tasklist/karma.conf.js       |   2 -
 .../ng2-activiti-tasklist/tsconfig.json       |  22 ++-
 .../ng2-alfresco-core/karma.conf.js           |   2 -
 ng2-components/ng2-alfresco-core/package.json |   1 +
 .../ng2-alfresco-core/tsconfig.json           |  22 ++-
 .../ng2-alfresco-datatable/karma.conf.js      |   2 -
 .../ng2-alfresco-datatable/tsconfig.json      |  22 ++-
 .../ng2-alfresco-documentlist/karma.conf.js   |   2 -
 .../ng2-alfresco-documentlist/tsconfig.json   |  22 ++-
 .../ng2-alfresco-login/karma.conf.js          |   2 -
 .../ng2-alfresco-login/tsconfig.json          |  22 ++-
 .../ng2-alfresco-search/karma.conf.js         |   2 -
 .../ng2-alfresco-search/tsconfig.json         |  22 ++-
 .../ng2-alfresco-social/karma.conf.js         |   2 -
 .../ng2-alfresco-social/tsconfig.json         |  22 ++-
 ng2-components/ng2-alfresco-tag/karma.conf.js |   2 -
 ng2-components/ng2-alfresco-tag/tsconfig.json |  22 ++-
 .../ng2-alfresco-upload/karma.conf.js         |   2 -
 .../ng2-alfresco-upload/tsconfig.json         |  22 ++-
 .../ng2-alfresco-userinfo/karma.conf.js       |   2 -
 .../ng2-alfresco-userinfo/tsconfig.json       |  22 ++-
 .../ng2-alfresco-viewer/karma.conf.js         |   7 +-
 .../components/pdfViewer.component.spec.ts    | 132 +++++++++++-------
 .../ng2-alfresco-viewer/tsconfig.json         |  22 ++-
 .../ng2-alfresco-webscript/karma.conf.js      |   2 -
 .../ng2-alfresco-webscript/tsconfig.json      |   2 +-
 ng2-components/package-base.json              |   4 +-
 ng2-components/package.json                   |   6 +-
 scripts/README.md                             | 118 +++++++++++++---
 scripts/npm-build-all.sh                      |  20 ++-
 scripts/npm-clean.sh                          |  43 ++++--
 scripts/npm-publish.sh                        |  17 +++
 scripts/start.sh                              | 126 +++++++++--------
 55 files changed, 815 insertions(+), 258 deletions(-)

diff --git a/.gitignore b/.gitignore
index d2eb351acc..e427910ca0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,4 @@ src/environments/
 /ng2-components/ng2-example-webpack/
 /ng2-components/config/coverage/
 *.npmrc
+/demo-shell-ng2/ng2-components/
diff --git a/.travis.yml b/.travis.yml
index 6dfa73d91f..5fa7fadaf3 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -13,17 +13,26 @@ env:
     - MODULE=ng2-components
     - MODULE=ng2-demo-shell
 
+install:
+    - if ([ "$MODULE" == "ng2-components" ]); then
+        if ([ "$TRAVIS_BRANCH" = "master" ]); then
+            (./scripts/npm-build-all.sh  || exit 1;);
+        else
+            (./scripts/npm-build-all.sh  -gitjsapi development || exit 1;);
+        fi
+      fi
+
 script:
-  - if ([ "$MODULE" == "ng2-components" ]); then
-          if ([ "$TRAVIS_BRANCH" = "master" ]); then
-            (./scripts/npm-build-all.sh -t || exit 1;);
-          else
-            (./scripts/npm-build-all.sh -t -gitjsapi development|| exit 1;);
-          fi
-    fi
-  - if ([ "$MODULE" == "ng2-demo-shell" ]); then
-        (cd demo-shell-ng2 && npm install && npm run test || exit 1;);
-    fi
+    - if ([ "$MODULE" == "ng2-components" ]); then
+            (./scripts/npm-build-all.sh -si -sb -t || exit 1;);
+      fi
+    - if ([ "$MODULE" == "ng2-demo-shell" ]); then
+       if ([ "$TRAVIS_BRANCH" = "master" ]); then
+            (./scripts/start.sh -t -ss || exit 1;);
+       else
+            (./scripts/start.sh -dev -t -ss -gitjsapi development || exit 1;);
+       fi
+      fi
 
 # Send coverage data to Coveralls
 after_success:
diff --git a/appveyor.yml b/appveyor.yml
index 2ffd0d6662..e67a197745 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -23,7 +23,12 @@ install:
               else
                 (cd scripts && sh npm-build-all.sh -t -gitjsapi development|| exit 1)
     )
-  - if %COMPONENT_NAME% EQU ng2-demo-shell (cd demo-shell-ng2 && npm install && npm run test || exit 1)
+  - if %COMPONENT_NAME% EQU g2-demo-shell (
+              if %APPVEYOR_REPO_BRANCH EQU master
+                (cd scripts && sh start.sh -t -ss || exit 1)
+              else
+                (cd scripts && sh start.sh -d -t -ss -gitjsapi development|| exit 1)
+    )
 
 # Don't actually build.
 build: off
diff --git a/demo-shell-ng2/.gitignore b/demo-shell-ng2/.gitignore
index 5cb7530c4a..67093b31a5 100644
--- a/demo-shell-ng2/.gitignore
+++ b/demo-shell-ng2/.gitignore
@@ -1,8 +1,11 @@
 typings/
 node_modules/
 bower_components/
+ng2-components/
 app/**/*.js
 app/**/*.js.map
+app/**/*.d.ts
+
 !app/js/Polyline.js
 .idea
 versions.json
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
index 943a2cacdc..9162e56a70 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
@@ -72,10 +72,10 @@
                         </activiti-task-details>
                         <hr>
                         <h5>Attachments</h5>
-                        <adf-task-attachment-list *ngIf="currentTaskId"
-                          [taskId]="currentTaskId"
-                          (attachmentClick)="onAttachmentClick($event)">
-                        </adf-task-attachment-list>
+                        <!--<adf-task-attachment-list *ngIf="currentTaskId"-->
+                          <!--[taskId]="currentTaskId"-->
+                          <!--(attachmentClick)="onAttachmentClick($event)">-->
+                        <!--</adf-task-attachment-list>-->
                     </div>
                 </div>
             </div>
diff --git a/demo-shell-ng2/config/karma.conf.js b/demo-shell-ng2/config/karma.conf.js
index ae013cbe5e..c7bf96fe26 100644
--- a/demo-shell-ng2/config/karma.conf.js
+++ b/demo-shell-ng2/config/karma.conf.js
@@ -7,6 +7,8 @@ module.exports = function (config) {
         frameworks: ['jasmine'],
 
         files: [
+            './node_modules/hammerjs/hammer.js',
+
             { pattern: './config/karma-test-shim.js', watched: false }
         ],
 
diff --git a/demo-shell-ng2/config/webpack.common.js b/demo-shell-ng2/config/webpack.common.js
index 4c2374ddb9..02e4627a26 100644
--- a/demo-shell-ng2/config/webpack.common.js
+++ b/demo-shell-ng2/config/webpack.common.js
@@ -63,7 +63,7 @@ module.exports = {
             },
             {
                 test: /\.ts$/,
-                include: [helpers.root('app')],
+                include: [helpers.root('app'), helpers.root('../ng2-components')],
                 loader: [
                     'ts-loader',
                     'angular2-template-loader'
@@ -77,7 +77,7 @@ module.exports = {
             },
             {
                 test: /\.css$/,
-                exclude: helpers.root('app'),
+                exclude: [helpers.root('app'), helpers.root('../ng2-components')],
                 loader: ExtractTextPlugin.extract({
                     fallback: 'style-loader',
                     use: 'css-loader?sourceMap'
@@ -85,7 +85,7 @@ module.exports = {
             },
             {
                 test: /\.css$/,
-                include: helpers.root('app'),
+                include: [helpers.root('app'), helpers.root('../ng2-components')],
                 loader: 'raw-loader'
             },
             {
@@ -157,6 +157,15 @@ module.exports = {
         })
     ],
 
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
     node: {
         fs: 'empty'
     }
diff --git a/demo-shell-ng2/config/webpack.dev.js b/demo-shell-ng2/config/webpack.dev.js
index a0192ecaed..9b3824a5af 100644
--- a/demo-shell-ng2/config/webpack.dev.js
+++ b/demo-shell-ng2/config/webpack.dev.js
@@ -1,15 +1,13 @@
+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 path = require('path');
 
 module.exports = webpackMerge(commonConfig, {
-    devtool: 'cheap-module-eval-source-map',
 
-    resolve: {
-        extensions: ['.ts', '.js'],
-        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
-    },
+    devtool: 'cheap-module-eval-source-map',
 
     output: {
         path: helpers.root('dist'),
@@ -17,16 +15,38 @@ module.exports = webpackMerge(commonConfig, {
         chunkFilename: '[id].chunk.js'
     },
 
-    plugins: [
-        new ExtractTextPlugin('[name].css')
-    ],
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-datatable$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-datatable/index.ts'),
+            "ng2-activiti-form/stencils/runtime.ng1$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-form/stencils/runtime.ng1'),
+            "ng2-activiti-form/stencils/runtime.adf$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-form/stencils/runtime.adf'),
+            "ng2-activiti-diagrams$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-diagrams/index.ts'),
+            "ng2-activiti-analytics$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-analytics/index.ts'),
+            "ng2-activiti-form$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-form/index.ts'),
+            "ng2-activiti-tasklist$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-tasklist/index.ts'),
+            "ng2-activiti-processlist$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-processlist/index.ts'),
+            "ng2-alfresco-documentlist$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-documentlist/index.ts'),
+            "ng2-alfresco-login$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-login/index.ts'),
+            "ng2-alfresco-search$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-search/index.ts'),
+            "ng2-alfresco-social$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-social/index.ts'),
+            "ng2-alfresco-tag$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-tag/index.ts'),
+            "ng2-alfresco-upload$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-upload/index.ts'),
+            "ng2-alfresco-viewer$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-viewer/index.ts'),
+            "ng2-alfresco-webscript$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-webscript/index.ts'),
+            "ng2-alfresco-userinfo$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-userinfo/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
 
-    devServer: {
-        contentBase: helpers.root('dist'),
-        compress: true,
-        port: 3000,
-        historyApiFallback: true,
-        host: '0.0.0.0',
-        inline: true
-    }
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
 });
diff --git a/demo-shell-ng2/config/webpack.prod.js b/demo-shell-ng2/config/webpack.prod.js
index d39bcc9dc8..d2a903ea77 100644
--- a/demo-shell-ng2/config/webpack.prod.js
+++ b/demo-shell-ng2/config/webpack.prod.js
@@ -7,6 +7,7 @@ const helpers = require('./helpers');
 const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 
 module.exports = webpackMerge(commonConfig, {
+
     devtool: 'source-map',
 
     output: {
@@ -21,6 +22,19 @@ module.exports = webpackMerge(commonConfig, {
         modules: [helpers.root('node_modules')]
     },
 
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            }
+        ]
+    },
+
     plugins: [
         new webpack.NoEmitOnErrorsPlugin(),
         new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
diff --git a/demo-shell-ng2/config/webpack.test.js b/demo-shell-ng2/config/webpack.test.js
index 1da37cd34d..c03156628c 100644
--- a/demo-shell-ng2/config/webpack.test.js
+++ b/demo-shell-ng2/config/webpack.test.js
@@ -2,6 +2,7 @@ const webpack = require('webpack');
 const helpers = require('./helpers');
 
 module.exports = {
+
     devtool: 'inline-source-map',
 
     resolve: {
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 420281958a..caf1ae5aae 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -4,16 +4,17 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
-    "build:dev": "rimraf dist && webpack --config config/webpack.dev.js --progress --profile --bail",
-    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
-    "start": "npm run server-versions && npm run webpack-dev-server --progress -config config/webpack.prod.js --content-base ./",
-    "start:dev": "npm run server-versions && npm run webpack-dev-server --progress -config config/webpack.dev.js --content-base ./",
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "npm run server-versions && wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run server-versions && npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run server-versions && npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
     "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'",
     "server-versions": "rimraf versions.json && npm list --depth=0 --json=true --prod=true > versions.json  || exit 0",
     "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "node node_modules/webpack/bin/webpack.js",
     "aws": "node app.js"
   },
   "repository": {
@@ -63,13 +64,11 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
     "@angular/compiler-cli": "~4.0.0",
-
     "@angular/material": "2.0.0-beta.1",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.9",
     "rxjs": "5.1.0",
     "zone.js": "0.8.4",
-
     "dialog-polyfill": "^0.4.7",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
@@ -83,7 +82,6 @@
     "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",
@@ -103,8 +101,9 @@
     "ng2-alfresco-webscript": "1.4.0"
   },
   "devDependencies": {
-    "@types/jasmine": "2.5.41",
-    "@types/node": "^7.0.5",
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
     "angular2-template-loader": "^0.6.2",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "0.26.1",
@@ -114,8 +113,8 @@
     "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-coverage": "^1.1.1",
     "karma-jasmine": "^1.1.0",
     "karma-jasmine-ajax": "0.1.13",
     "karma-jasmine-html-reporter": "0.2.0",
@@ -124,13 +123,13 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.2",
     "null-loader": "^0.1.1",
-    "to-string-loader": "^1.1.4",
     "raw-loader": "^0.5.1",
     "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",
+    "to-string-loader": "^1.1.4",
     "ts-loader": "^2.0.0",
     "tslint": "^4.4.2",
     "tslint-loader": "^3.3.0",
diff --git a/demo-shell-ng2/tsconfig.json b/demo-shell-ng2/tsconfig.json
index da9e50181f..875b81f937 100644
--- a/demo-shell-ng2/tsconfig.json
+++ b/demo-shell-ng2/tsconfig.json
@@ -6,15 +6,33 @@
         "sourceMap": true,
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
-        "lib": [ "es2015", "dom" ],
-        "noImplicitAny": false,
-        "suppressImplicitAnyIndexErrors": true,
         "skipLibCheck": true,
-        "declaration": true
+        "noLib": false,
+        "allowUnreachableCode": false,
+        "allowUnusedLabels": false,
+        "noImplicitAny": false,
+        "noImplicitReturns": false,
+        "noImplicitUseStrict": false,
+        "noFallthroughCasesInSwitch": true,
+        "removeComments": true,
+        "declaration": true,
+        "outDir": "./dist",
+        "lib": [
+            "es2015",
+            "dom"
+        ],
+        "typeRoots": [
+            "./node_modules/@types"
+        ],
+        "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
+        "demo",
         "node_modules",
-        "dist",
-        "demo"
-    ]
+        "dist"
+    ],
+    "angularCompilerOptions": {
+        "strictMetadataEmit": false,
+        "skipTemplateCodegen": true
+    }
 }
diff --git a/ng2-components/config/webpack.common.js b/ng2-components/config/webpack.common.js
index 95cd33177e..67fd8b9440 100644
--- a/ng2-components/config/webpack.common.js
+++ b/ng2-components/config/webpack.common.js
@@ -5,6 +5,8 @@ const path = require('path');
 
 module.exports = {
 
+    devtool: 'cheap-module-source-map',
+
     resolveLoader: {
         alias: {
             "file-multi-loader": path.resolve(__dirname, "./custom-loaders/file-loader-multi"),
@@ -55,7 +57,12 @@ module.exports = {
             },
             {
                 test: /\.ts$/,
-                use: ['ts-loader', 'angular2-template-loader'],
+                use: ['ts-loader?' + JSON.stringify({
+                    "compilerOptions": {
+                        "typeRoots": [
+                            "../node_modules/@types"
+                        ]}
+                }), 'angular2-template-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
             {
@@ -67,7 +74,7 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            }, {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
@@ -75,7 +82,7 @@ module.exports = {
                     emitErrors: true,
                     licenseFile: path.resolve(__dirname, './assets/license_header.txt')
                 },
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/],
             },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
@@ -96,11 +103,26 @@ module.exports = {
     },
 
     resolve: {
+        alias: {
+            "ng2-alfresco-core": path.resolve(__dirname, '../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-datatable": path.resolve(__dirname, '../ng2-alfresco-datatable/index.ts'),
+            "ng2-activiti-diagrams": path.resolve(__dirname, '../ng2-activiti-diagrams/index.ts'),
+            "ng2-activiti-analytics":path.resolve(__dirname, '../ng2-activiti-analytics/index.ts'),
+            "ng2-activiti-form":path.resolve(__dirname, '../ng2-activiti-form/index.ts'),
+            "ng2-activiti-tasklist": path.resolve(__dirname, '../ng2-activiti-tasklist/index.ts'),
+            "ng2-activiti-processlist": path.resolve(__dirname, '../ng2-activiti-processlist/index.ts'),
+            "ng2-alfresco-documentlist": path.resolve(__dirname, '../ng2-alfresco-documentlist/index.ts'),
+            "ng2-alfresco-login": path.resolve(__dirname, '../ng2-alfresco-login/index.ts'),
+            "ng2-alfresco-search": path.resolve(__dirname, '../ng2-alfresco-search/index.ts'),
+            "ng2-alfresco-social": path.resolve(__dirname, '../ng2-alfresco-social/index.ts'),
+            "ng2-alfresco-tag": path.resolve(__dirname, '../ng2-alfresco-tag/index.ts'),
+            "ng2-alfresco-upload": path.resolve(__dirname, '../ng2-alfresco-upload/index.ts'),
+            "ng2-alfresco-viewer": path.resolve(__dirname, '../ng2-alfresco-viewer/index.ts'),
+            "ng2-alfresco-webscript": path.resolve(__dirname, '../ng2-alfresco-webscript/index.ts'),
+            "ng2-alfresco-userinfo": path.resolve(__dirname, '../ng2-alfresco-userinfo/index.ts')
+        },
         extensions: ['.ts', '.js'],
-        symlinks: false,
-        modules: [
-            '../ng2-components', 'node_modules'
-        ]
+            modules: [helpers.root('node_modules')]
     },
 
     plugins: [
@@ -115,8 +137,6 @@ module.exports = {
         )
     ],
 
-    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
index 486fed8c15..b446f486c7 100644
--- a/ng2-components/config/webpack.test.js
+++ b/ng2-components/config/webpack.test.js
@@ -7,12 +7,6 @@ module.exports = {
 
     devtool: 'inline-source-map',
 
-    resolve: {
-        extensions: ['.ts', '.js'],
-        symlinks: false,
-        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
-    },
-
     module: {
         rules: [
             {
@@ -58,6 +52,12 @@ module.exports = {
         ]
     },
 
+    resolve: {
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
     plugins: [
         new webpack.NoEmitOnErrorsPlugin(),
 
diff --git a/ng2-components/ng2-activiti-analytics/karma.conf.js b/ng2-components/ng2-activiti-analytics/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-activiti-analytics/karma.conf.js
+++ b/ng2-components/ng2-activiti-analytics/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-activiti-analytics/tsconfig.json b/ng2-components/ng2-activiti-analytics/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-activiti-analytics/tsconfig.json
+++ b/ng2-components/ng2-activiti-analytics/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-activiti-diagrams/karma.conf.js b/ng2-components/ng2-activiti-diagrams/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-activiti-diagrams/karma.conf.js
+++ b/ng2-components/ng2-activiti-diagrams/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-activiti-diagrams/tsconfig.json b/ng2-components/ng2-activiti-diagrams/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-activiti-diagrams/tsconfig.json
+++ b/ng2-components/ng2-activiti-diagrams/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-activiti-form/karma.conf.js b/ng2-components/ng2-activiti-form/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-activiti-form/karma.conf.js
+++ b/ng2-components/ng2-activiti-form/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-activiti-form/tsconfig.json b/ng2-components/ng2-activiti-form/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-activiti-form/tsconfig.json
+++ b/ng2-components/ng2-activiti-form/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-activiti-processlist/karma.conf.js b/ng2-components/ng2-activiti-processlist/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-activiti-processlist/karma.conf.js
+++ b/ng2-components/ng2-activiti-processlist/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-activiti-processlist/tsconfig.json b/ng2-components/ng2-activiti-processlist/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-activiti-processlist/tsconfig.json
+++ b/ng2-components/ng2-activiti-processlist/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-activiti-tasklist/karma.conf.js b/ng2-components/ng2-activiti-tasklist/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-activiti-tasklist/karma.conf.js
+++ b/ng2-components/ng2-activiti-tasklist/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-activiti-tasklist/tsconfig.json b/ng2-components/ng2-activiti-tasklist/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-activiti-tasklist/tsconfig.json
+++ b/ng2-components/ng2-activiti-tasklist/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-alfresco-core/karma.conf.js b/ng2-components/ng2-alfresco-core/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-alfresco-core/karma.conf.js
+++ b/ng2-components/ng2-alfresco-core/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-alfresco-core/package.json b/ng2-components/ng2-alfresco-core/package.json
index 10649392d9..7f08e15059 100644
--- a/ng2-components/ng2-alfresco-core/package.json
+++ b/ng2-components/ng2-alfresco-core/package.json
@@ -5,6 +5,7 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
     "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
diff --git a/ng2-components/ng2-alfresco-core/tsconfig.json b/ng2-components/ng2-alfresco-core/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-alfresco-core/tsconfig.json
+++ b/ng2-components/ng2-alfresco-core/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-alfresco-datatable/karma.conf.js b/ng2-components/ng2-alfresco-datatable/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-alfresco-datatable/karma.conf.js
+++ b/ng2-components/ng2-alfresco-datatable/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-alfresco-datatable/tsconfig.json b/ng2-components/ng2-alfresco-datatable/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-alfresco-datatable/tsconfig.json
+++ b/ng2-components/ng2-alfresco-datatable/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-alfresco-documentlist/karma.conf.js b/ng2-components/ng2-alfresco-documentlist/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-alfresco-documentlist/karma.conf.js
+++ b/ng2-components/ng2-alfresco-documentlist/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-alfresco-documentlist/tsconfig.json b/ng2-components/ng2-alfresco-documentlist/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-alfresco-documentlist/tsconfig.json
+++ b/ng2-components/ng2-alfresco-documentlist/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-alfresco-login/karma.conf.js b/ng2-components/ng2-alfresco-login/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-alfresco-login/karma.conf.js
+++ b/ng2-components/ng2-alfresco-login/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-alfresco-login/tsconfig.json b/ng2-components/ng2-alfresco-login/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-alfresco-login/tsconfig.json
+++ b/ng2-components/ng2-alfresco-login/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-alfresco-search/karma.conf.js b/ng2-components/ng2-alfresco-search/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-alfresco-search/karma.conf.js
+++ b/ng2-components/ng2-alfresco-search/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-alfresco-search/tsconfig.json b/ng2-components/ng2-alfresco-search/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-alfresco-search/tsconfig.json
+++ b/ng2-components/ng2-alfresco-search/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-alfresco-social/karma.conf.js b/ng2-components/ng2-alfresco-social/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-alfresco-social/karma.conf.js
+++ b/ng2-components/ng2-alfresco-social/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-alfresco-social/tsconfig.json b/ng2-components/ng2-alfresco-social/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-alfresco-social/tsconfig.json
+++ b/ng2-components/ng2-alfresco-social/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-alfresco-tag/karma.conf.js b/ng2-components/ng2-alfresco-tag/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-alfresco-tag/karma.conf.js
+++ b/ng2-components/ng2-alfresco-tag/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-alfresco-tag/tsconfig.json b/ng2-components/ng2-alfresco-tag/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-alfresco-tag/tsconfig.json
+++ b/ng2-components/ng2-alfresco-tag/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-alfresco-upload/karma.conf.js b/ng2-components/ng2-alfresco-upload/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-alfresco-upload/karma.conf.js
+++ b/ng2-components/ng2-alfresco-upload/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-alfresco-upload/tsconfig.json b/ng2-components/ng2-alfresco-upload/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-alfresco-upload/tsconfig.json
+++ b/ng2-components/ng2-alfresco-upload/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-alfresco-userinfo/karma.conf.js b/ng2-components/ng2-alfresco-userinfo/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-alfresco-userinfo/karma.conf.js
+++ b/ng2-components/ng2-alfresco-userinfo/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-alfresco-userinfo/tsconfig.json b/ng2-components/ng2-alfresco-userinfo/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-alfresco-userinfo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-userinfo/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-alfresco-viewer/karma.conf.js b/ng2-components/ng2-alfresco-viewer/karma.conf.js
index f2a4bff546..349c3853d3 100644
--- a/ng2-components/ng2-alfresco-viewer/karma.conf.js
+++ b/ng2-components/ng2-alfresco-viewer/karma.conf.js
@@ -21,9 +21,14 @@ module.exports = function (config) {
       {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
+      {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: 'karma-test-shim.js', watched: false},
-      {pattern: './dist/**/*.*', included: false, served: true, watched: false},
       {pattern: './src/**/*.*', included: false, served: true, watched: false}
+
     ],
 
     webpack: webpackConfig,
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 92ab3c45a5..42ff3d4f69 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
@@ -185,19 +185,25 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
         it('Total number of pages should be loaded', (done) => {
             component.ngOnChanges(null).then(() => {
                 fixture.detectChanges();
-                expect(component.totalPages).toEqual(6);
-                done();
+                fixture.whenStable().then(() => {
+
+                    expect(component.totalPages).toEqual(6);
+                    done();
+                });
             });
         }, 5000);
 
         it('right arrow should move to the next page', (done) => {
             component.ngOnChanges(null).then(() => {
                 fixture.detectChanges();
-                expect(component.displayPage).toBe(1);
-                EventMock.keyDown(39);
-                fixture.detectChanges();
-                expect(component.displayPage).toBe(2);
-                done();
+                fixture.whenStable().then(() => {
+                    expect(component.displayPage).toBe(1);
+                    EventMock.keyDown(39);
+                    fixture.detectChanges();
+                    expect(component.displayPage).toBe(2);
+                    done();
+                });
+
             });
         }, 5000);
 
@@ -206,24 +212,30 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
 
             component.ngOnChanges(null).then(() => {
                 fixture.detectChanges();
-                expect(component.displayPage).toBe(1);
-                nextPageButton.click();
-                fixture.detectChanges();
-                expect(component.displayPage).toBe(2);
-                done();
+                fixture.whenStable().then(() => {
+
+                    expect(component.displayPage).toBe(1);
+                    nextPageButton.click();
+                    fixture.detectChanges();
+                    expect(component.displayPage).toBe(2);
+                    done();
+                });
             });
         });
 
         it('left arrow should move to the previous page', (done) => {
             component.ngOnChanges(null).then(() => {
                 fixture.detectChanges();
-                expect(component.displayPage).toBe(1);
-                EventMock.keyDown(39);
-                EventMock.keyDown(39);
-                EventMock.keyDown(37);
-                fixture.detectChanges();
-                expect(component.displayPage).toBe(2);
-                done();
+                fixture.whenStable().then(() => {
+
+                    expect(component.displayPage).toBe(1);
+                    EventMock.keyDown(39);
+                    EventMock.keyDown(39);
+                    EventMock.keyDown(37);
+                    fixture.detectChanges();
+                    expect(component.displayPage).toBe(2);
+                    done();
+                });
             });
         });
 
@@ -233,35 +245,44 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
 
             component.ngOnChanges(null).then(() => {
                 fixture.detectChanges();
-                expect(component.displayPage).toBe(1);
-                nextPageButton.click();
-                nextPageButton.click();
-                previousPageButton.click();
-                fixture.detectChanges();
-                expect(component.displayPage).toBe(2);
-                done();
+                fixture.whenStable().then(() => {
+
+                    expect(component.displayPage).toBe(1);
+                    nextPageButton.click();
+                    nextPageButton.click();
+                    previousPageButton.click();
+                    fixture.detectChanges();
+                    expect(component.displayPage).toBe(2);
+                    done();
+                });
             });
         });
 
         it('previous page should not move to the previous page if is page 1', (done) => {
             component.ngOnChanges(null).then(() => {
                 fixture.detectChanges();
-                expect(component.displayPage).toBe(1);
-                component.previousPage();
-                fixture.detectChanges();
-                expect(component.displayPage).toBe(1);
-                done();
+                fixture.whenStable().then(() => {
+
+                    expect(component.displayPage).toBe(1);
+                    component.previousPage();
+                    fixture.detectChanges();
+                    expect(component.displayPage).toBe(1);
+                    done();
+                });
             });
         });
 
         it('Input page should move to the inserted page', (done) => {
             component.ngOnChanges(null).then(() => {
                 fixture.detectChanges();
-                expect(component.displayPage).toBe(1);
-                component.inputPage('2');
-                fixture.detectChanges();
-                expect(component.displayPage).toBe(2);
-                done();
+                fixture.whenStable().then(() => {
+
+                    expect(component.displayPage).toBe(1);
+                    component.inputPage('2');
+                    fixture.detectChanges();
+                    expect(component.displayPage).toBe(2);
+                    done();
+                });
             });
         });
 
@@ -314,39 +335,50 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
     });
 
     describe('Resize interaction', () => {
+
         beforeEach(() => {
             component.urlFile = require('../assets/fake-test-file.pdf');
+            fixture.detectChanges();
             component.inputPage('1');
         });
+
         it('resize event should trigger setScaleUpdatePages', (done) => {
             component.ngOnChanges(null).then(() => {
                 fixture.detectChanges();
-                spyOn(component, 'onResize');
-                EventMock.resizeMobileView();
-                expect(component.onResize).toHaveBeenCalled();
-                done();
+                fixture.whenStable().then(() => {
+
+                    spyOn(component, 'onResize');
+                    EventMock.resizeMobileView();
+                    expect(component.onResize).toHaveBeenCalled();
+                    done();
+                });
             });
         });
     });
 
     describe('scroll interaction', () => {
+
         beforeEach(() => {
             component.urlFile = require('../assets/fake-test-file.pdf');
             fixture.detectChanges();
         });
+
         it('scroll page should return the current page', (done) => {
             component.ngOnChanges(null).then(() => {
                 fixture.detectChanges();
-                expect(component.displayPage).toBe(1);
-                component.inputPage('2');
-                fixture.detectChanges();
-                expect(component.displayPage).toBe(2);
-                let documentContainer = element.querySelector('#viewer-pdf-container');
-                documentContainer.scrollTop = 100000;
-                component.watchScroll(documentContainer);
-                fixture.detectChanges();
-                expect(component.displayPage).toBe(6);
-                done();
+                fixture.whenStable().then(() => {
+
+                    expect(component.displayPage).toBe(1);
+                    component.inputPage('2');
+                    fixture.detectChanges();
+                    expect(component.displayPage).toBe(2);
+                    let documentContainer = element.querySelector('#viewer-pdf-container');
+                    documentContainer.scrollTop = 100000;
+                    component.watchScroll(documentContainer);
+                    fixture.detectChanges();
+                    expect(component.displayPage).toBe(6);
+                    done();
+                });
             });
         });
     });
diff --git a/ng2-components/ng2-alfresco-viewer/tsconfig.json b/ng2-components/ng2-alfresco-viewer/tsconfig.json
index 156810e6af..ba1ef9cea2 100644
--- a/ng2-components/ng2-alfresco-viewer/tsconfig.json
+++ b/ng2-components/ng2-alfresco-viewer/tsconfig.json
@@ -17,12 +17,32 @@
         "removeComments": true,
         "declaration": true,
         "outDir": "./dist",
+        "baseUrl" :  "./",
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
+            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+        },
         "lib": [
             "es2015",
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/ng2-alfresco-webscript/karma.conf.js b/ng2-components/ng2-alfresco-webscript/karma.conf.js
index 9001db1c10..8c0e83bd7e 100644
--- a/ng2-components/ng2-alfresco-webscript/karma.conf.js
+++ b/ng2-components/ng2-alfresco-webscript/karma.conf.js
@@ -24,8 +24,6 @@ module.exports = function (config) {
       {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}
     ],
 
diff --git a/ng2-components/ng2-alfresco-webscript/tsconfig.json b/ng2-components/ng2-alfresco-webscript/tsconfig.json
index 156810e6af..875b81f937 100644
--- a/ng2-components/ng2-alfresco-webscript/tsconfig.json
+++ b/ng2-components/ng2-alfresco-webscript/tsconfig.json
@@ -22,7 +22,7 @@
             "dom"
         ],
         "typeRoots": [
-            "../node_modules/@types"
+            "./node_modules/@types"
         ],
         "suppressImplicitAnyIndexErrors": true
     },
diff --git a/ng2-components/package-base.json b/ng2-components/package-base.json
index 50bb86ead2..6db34dfdc1 100644
--- a/ng2-components/package-base.json
+++ b/ng2-components/package-base.json
@@ -7,8 +7,8 @@
         "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 --reporters mocha,coverage --single-run",
-        "test-browser": "karma start karma.conf.js --reporters kjhtml",
+        "test": "node node_modules/karma/bin/karma start --reporters mocha,coverage --single-run --component .",
+        "test-browser": "node node_modules/karma/bin/karma start karma.conf.js --reporters kjhtml",
         "tslint": "",
         "prepublish": "",
         "tsc": "",
diff --git a/ng2-components/package.json b/ng2-components/package.json
index 86142a1e7a..ee2f3adc7b 100644
--- a/ng2-components/package.json
+++ b/ng2-components/package.json
@@ -5,12 +5,12 @@
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf node_modules",
+    "rimraf": "rimraf",
     "build": "webpack --config config/webpack.build.js --progress --profile --bail",
-    "test": "karma start --reporters mocha,coverage --single-run",
-    "test-browser": "karma start karma.conf.js --reporters kjhtml",
+    "test": "node node_modules/karma/bin/karma start --reporters mocha,coverage --single-run --component .",
+    "test-browser": "node node_modules/karma/bin/karma start karma.conf.js --reporters kjhtml",
     "coverage": "",
     "prepublish": "",
-    "rimraf": "rimraf",
     "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",
     "tslint": "",
     "tsc": "",
diff --git a/scripts/README.md b/scripts/README.md
index a6f4771596..2364589cf3 100644
--- a/scripts/README.md
+++ b/scripts/README.md
@@ -1,5 +1,12 @@
 ## Running a demo project
 
+
+- [Quick examples](#quick-examples)
+- [start.sh Demo shell script](#start.sh)
+- [Ng2 components framework alfresco build](#npm-build-all.sh)
+- [Clean components and Demo](#npm-clean.sh)
+
+
 The Alfresco application development framework comes with a demo project that you can run to get a
 feel for what's available.
 
@@ -10,22 +17,63 @@ feel for what's available.
  cd scripts
 ```
 
-* Start the demo and Install all the dependencies (*Note. do it this way only the first time, and be aware, it will take some time*)
+# Quick examples if you want develop the ADF framework
+
+* Start the demo shell using the JS-API from the development branch and the local component in the ng2-components folder
 
 ```sh
-./start.sh -install or -i
+./start.sh -dev -t -gitjsapi development
 ```
 
-* Start the demo (*the standard way of starting the demo after first initialization*):
+* Build the ng2-components folder using the JS-API from the development branch 
 
 ```sh
-./start.sh
+./npm-build-all.sh -gitjsapi development
+```
+
+* Build the ng2-components folder using the JS-API from the development branch and run the test on it
+
+```sh
+./npm-build-all.sh -t -gitjsapi development
+```
+
+# start.sh
+
+***start.sh*** script provide a easy way to deal with the npm command and the correct sequence to run the task on demo-shell during develop phases.
+
+## Options
+
+The default behaviour of the ***start.sh*** script always run the install and the start of the demo shell on the port 3000, anyway with some of the options below this behaviour can be changed 
+All the commands before can be used in combination
+
+| Option | Description |
+| --- | --- |
+| -h or --help    | show the help  |
+| -u or --update  | run the update of the node_modules packages on the demo shell  |
+| -c or --clean   | clean the demo shell folder before to start it  |
+| -t or --test    | run the test on the demo-shell  |
+| -r or --registry    |  Start the demo using an alternative npm registry  |
+| -v or --version    | Instead to use the version defined in the pacakge.json . Download from npm and Install a different version of the ng2-components (this option is not compatible with -dev)  |
+| -si or --skipinstall    | skip the install of the node_modules  |
+| -ss or --skipstart    | skip the start of the demo shell and oly build it providing a dist folder in the relative demo-shell-ng2 folder  |
+| -dev or --develop    | Start the demo in development mode building the relative folder ng2-components with all the components and pointing to those components instead to the ng2-components present in the node_modules folder |
+| -dist     | Start the demo shell using a light server and the files builded in the dist folder, particular useful to test the final result of the project |
+| -gitjsapi   | if you want start the demo shell using an alfresco-js-api referenced by commit-ish version of the JS-API |
+| -vjsapi   | Instead to use the version defined in the pacakge.json . Download from npm and Install a different version of JS-API  |
+
+
+## Examples
+
+* Start the demo and Install all the dependencies 
+
+```sh
+./start.sh 
 ```
 
 * Start the demo, install all the dependencies, and remove the previous version of the npm packages (*Note. do this only after big changes*):
 
 ```sh
-./start.sh -c -i
+./start.sh -c 
 ```
 
 * Start the demo using an alternative npm registry 
@@ -40,7 +88,7 @@ feel for what's available.
 ./start.sh -update or -u
 ```
 
-* Install a different version of the ng2-components specified in the package.json his option is not compatible with -d
+* Instead to use the version defined in the pacakge.json . Download from npm and Install a different version of the ng2-components (this option is not compatible with -dev)  |
 
 ```sh
 ./start.sh -version or -v COMPONENTS_VERSION
@@ -51,10 +99,10 @@ feel for what's available.
 * Start the demo in development mode building the relative folder ng2-components with all the components and pointing to this component instead to the node_modules one
 
 ```sh
-./start.sh -develop or -d
+./start.sh -develop or -dev
 ```
 
-* Start the demo start the demo shell in dist mode
+* Start the demo shell using a light server using the files builded in the dist folder
 
 ```sh
 ./start.sh -dist
@@ -77,28 +125,54 @@ feel for what's available.
 
 ```
 
+* If you want run the Demo shell test
+
+```sh
+./start.sh -t
+
+```
+
+# npm-build-all.sh
+
+***npm-build-all.sh*** this script provide a easy way to deal with the npm command and the correct sequence to build the ng2-components
+
+## Options
+
+The default behaviour of the ***npm-build-all.sh*** install node_modules and build all the components
+
+
+| Option | Description |
+| --- | --- |
+| -h or --help    | show the help  |
+| -t or --test    | If you want run the test:  |
+| -c or --clean   | clean the ng2_components folders before to start from all the temp builds file as node_modules  |
+| -gitjsapi   | if you want start the demo shell using an alfresco-js-api referenced by commit-ish version of the JS-API |
+| -si or --skipinstall    | skip the install of the node_modules  |
+| -sb or --skipbuild    | skip the creation of the bundles files and skip the  errors and lint check inside the components |
+
+      
 * If you want to build all your local component:
 
 ```sh
-./npm-buid-all.sh
+./npm-build-all.sh
 ```
 
 * If you want to build all your local component and run the test:
 
 ```sh
-./npm-buid-all.sh -t or -test
+./npm-build-all.sh -t or -test
 ```
 
 * If you want clean the ng2-components folder node_modules before to build
 
 ```sh
-./npm-buid-all.sh -c
+./npm-build-all.sh -c
 ```
 
 * If you want build to build all the components against a commit-ish version of the JS-API
 
 ```sh
- ./npm-buid-all.sh -gitjsapi commit-ish
+ ./npm-build-all.sh -gitjsapi commit-ish
 
  ./npm-build-all.sh -gitjsapi development
  
@@ -108,15 +182,13 @@ feel for what's available.
 * If you want avoid initial build and run only all the test
 
 ```sh
-./npm-buid-all.sh -s -t
+./npm-build-all.sh -s -t
 ```
 
-* If you want test in less time (high memoery consumign less detail)
+* If you want skip initial install node_modules
 
 ```sh
-./npm-buid-all.sh -ft //test and build
-
-./npm-buid-all.sh -s -ft //only test
+./npm-build-all.sh -si
 ```
 
 * If you want clean all your local component and the demo shell:
@@ -126,3 +198,15 @@ feel for what's available.
 ```
 
 For development environment configuration please refer to [project docs](../demo-shell-ng2/README.md).
+
+
+# npm-clean.sh
+
+***npm-clean.sh*** clean all the projects folder : ng2-components, ng2-components/*.*/demo and  demo-shell-ng2.
+
+## Options
+
+| Option | Description |
+| --- | --- |
+| -h or --help    | show the help  |
+| -sd or --skipDemo   | skip the demo folder clean |
diff --git a/scripts/npm-build-all.sh b/scripts/npm-build-all.sh
index d78262f55e..dcb2da8f6b 100755
--- a/scripts/npm-build-all.sh
+++ b/scripts/npm-build-all.sh
@@ -5,6 +5,7 @@ eval RUN_TEST=false
 eval EXEC_FAST_TEST=false
 eval EXEC_CLEAN=false
 eval EXEC_BUILD=true
+eval EXEC_INSTALL=true
 eval EXEC_GIT_NPM_INSTALL_JSAPI=false
 eval GIT_ISH=""
 
@@ -29,10 +30,11 @@ eval projects=( "ng2-alfresco-core"
 show_help() {
     echo "Usage: npm-build-all.sh"
     echo ""
-    echo "-e or -exclude  exclude initial build"
     echo "-t or -test build all your local component and run also the test on them"
-    echo "-ft or -fast test build all your local component and run also the test in one single karmatestshim (high memory consuming and less details)"
     echo "-c or -clean the node_modules folder before to start the build"
+    echo "-si or -skipinstall skip the install node_modules folder before to start the build"
+    echo "-sb or skip build"
+    echo "-ft or -fast test build all your local component and run also the test in one single karma-test-shim (high memory consuming and less details)"
     echo "-gitjsapi to build all the components against a commit-ish version of the JS-API"
 }
 
@@ -62,15 +64,19 @@ exclude_build(){
     EXEC_BUILD=false
 }
 
+exec_install(){
+    EXEC_INSTALL=false
+}
+
 while [[ $1 == -* ]]; do
     case "$1" in
       -h|--help|-\?) show_help; exit 0;;
       -t|--test)  enable_test; shift;;
       -ft|--fasttest)  enable_fast_test; shift;;
       -gitjsapi)  enable_js_api_git_link $2; shift 2;;
-      -v|--version)  install_version_pacakge $2; shift 2;;
       -c|--clean)  clean; shift;;
-      -s|--skipbuild)  exclude_build; shift;;
+      -si|--skipinstall)  exec_install; shift;;
+      -sb|--skipbuild)  exclude_build; shift;;
       -*) echo "invalid option: $1" 1>&2; show_help; exit 1;;
     esac
 done
@@ -87,8 +93,10 @@ echo "====== Regenerate global ng2-components package.json ====="
 npm install package-json-merge
 npm run pkg-build
 
-echo "====== Install ng2-components dependencies ====="
-npm install
+if $EXEC_INSTALL == true; then
+    echo "====== Install ng2-components dependencies ====="
+    npm install
+fi
 
 if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
   echo "====== Use the alfresco JS-API  '$GIT_ISH'====="
diff --git a/scripts/npm-clean.sh b/scripts/npm-clean.sh
index 9293465cda..94327ba20a 100755
--- a/scripts/npm-clean.sh
+++ b/scripts/npm-clean.sh
@@ -2,6 +2,14 @@
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
+eval EXEC_CLEAN_DEMO=true
+
+show_help() {
+    echo "Usage: npm-clean.sh"
+    echo ""
+    echo "-sd or -skipDemo skip the clean of the demo folder of any components"
+}
+
 eval projects=( "ng2-activiti-diagrams"
       "ng2-activiti-analytics"
       "ng2-activiti-form"
@@ -20,25 +28,42 @@ eval projects=( "ng2-activiti-diagrams"
       "ng2-alfresco-webscript"
       "ng2-alfresco-userinfo" )
 
-npm install rimraf
+clea_demo() {
+    EXEC_CLEAN_DEMO=false
+}
+
+while [[ $1  == -* ]]; do
+    case "$1" in
+      -h|--help|-\?) show_help; exit 0;;
+      -sd|--skipDemo) update; shift;;
+      -*) shift;;
+    esac
+done
 
 for PACKAGE in ${projects[@]}
 do
-  echo "====== clean component: ${PACKAGE} ====="
-  cd "$DIR/../ng2-components/${PACKAGE}"
-  npm run clean
-
-  if [ -d "$DIR/../ng2-components/${PACKAGE}/demo" ]; then
-    echo "====== clean component demo: ${PACKAGE} ====="
-    cd "$DIR/../ng2-components/${PACKAGE}/demo"
+    echo "====== clean component: ${PACKAGE} ====="
+    cd "$DIR/../ng2-components/${PACKAGE}"
+    npm install rimraf
     npm run clean
-  fi
+
+    if $EXEC_CLEAN_DEMO == true; then
+       if [ -d "$DIR/../ng2-components/${PACKAGE}/demo" ]; then
+        echo "====== clean component demo: ${PACKAGE} ====="
+        cd "$DIR/../ng2-components/${PACKAGE}/demo"
+        npm install rimraf
+        npm run clean
+       fi
+    fi
 done
 
 cd "$DIR/../demo-shell-ng2"
+npm install rimraf
 npm run clean
 
+
 cd "$DIR/../ng2-components"
+npm install rimraf
 npm run clean
 
 cd ${DIR}
diff --git a/scripts/npm-publish.sh b/scripts/npm-publish.sh
index 9395024b80..ae964258a8 100755
--- a/scripts/npm-publish.sh
+++ b/scripts/npm-publish.sh
@@ -7,6 +7,8 @@ eval EXEC_CHANGE_REGISTRY=false
 eval NPM_REGISTRY=false
 eval TOKEN_REGISTRY=""
 eval OPTIONS=""
+eval EXEC_GIT_NPM_INSTALL_JSAPI=false
+eval GIT_ISH=""
 
 cd "$DIR/../demo-shell-ng2"
 
@@ -17,6 +19,7 @@ show_help() {
     echo "-r or -registry to publish in an alternative npm registry -registry 'http://npm.local.me:8080/' "
     echo "-token auth token for publish in the npm registry"
     echo "-t or -tag to add a tag when publish a package"
+    echo "-gitjsapi to build all the components against a commit-ish version of the JS-API"
 }
 
 enable_force(){
@@ -38,6 +41,11 @@ get_token_registry(){
     fi
 }
 
+enable_js_api_git_link() {
+    GIT_ISH='git://github.com/Alfresco/alfresco-js-api.git#'$1
+    EXEC_GIT_NPM_INSTALL_JSAPI=true
+}
+
 add_tag(){
     eval TAG=$1
 
@@ -72,6 +80,7 @@ while [[ $1 == -* ]]; do
       -f|--force)  enable_force; shift;;
       -token) get_token_registry $2; shift 2;;
       -r|--registry) enable_change_registry $2; shift 2;;
+      -gitjsapi)  enable_js_api_git_link $2; shift 2;;
       -*) echo "invalid option: $1" 1>&2; show_help; exit 0;;
     esac
 done
@@ -102,6 +111,14 @@ do
   npm run clean
   npm install
 
+  if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
+    echo "====== Use the alfresco JS-API  '$GIT_ISH'====="
+    npm install $GIT_ISH
+    cd  "${DESTDIR}/node_modules/alfresco-js-api"
+    npm install
+    cd ${DESTDIR}
+  fi
+
   if $EXEC_CHANGE_REGISTRY == true; then
     change_registry
   fi
diff --git a/scripts/start.sh b/scripts/start.sh
index ea6e0a84d1..c7822d4e49 100755
--- a/scripts/start.sh
+++ b/scripts/start.sh
@@ -2,14 +2,16 @@
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
-eval EXEC_INSTALL=false
+eval EXEC_INSTALL=true
 eval EXEC_UPDATE=false
 eval EXEC_CLEAN=false
 eval EXEC_DEVELOP=false
 eval EXEC_VERSION=false
-eval ENABLE_DIST=false
+eval EXEC_DIST=false
 eval EXEC_GIT_NPM_INSTALL_JSAPI=false
 eval EXEC_VERSION_JSAPI=false
+eval EXEC_START=true
+eval EXEC_TEST=false
 eval JSAPI_VERSION=""
 eval NG2_COMPONENTS_VERSION=""
 eval GIT_ISH=""
@@ -35,19 +37,21 @@ eval projects=( "ng2-alfresco-core"
 show_help() {
     echo "Usage: start.sh"
     echo ""
-    echo "-d or -develop start the demo shell using the relative ng2-components folder to link the components"
-    echo "-dist start the demo shell in dist mode"
-    echo "-i or -install start the demo shell and install the dependencies"
+    echo "-ss or -skipstart build only the demo shell without start"
+    echo "-si or -skipinstall start the demo shell and  skip the install the dependencies"
+    echo "-dev or -develop start the demo shell using the relative ng2-components folder to link the components"
+    echo "-dist create the disbuild the demo shell in dist mode"
+    echo "-t or -test execute test"
     echo "-u or -update start the demo shell and update the dependencies"
-    echo "-v or -version install different version of ng2_components from npm defined in the package.json this option is not compatible with -d"
     echo "-c or -clean  clean the demo shell and reinstall the dependencies"
     echo "-r or -registry to download the packages from an alternative npm registry example -registry 'http://npm.local.me:8080/' "
+    echo "-v or -version install different version of ng2_components from npm defined in the package.json this option is not compatible with -d"
     echo "-gitjsapi to build all the components against a commit-ish version of the JS-API"
     echo "-vjsapi install different version from npm of JS-API defined in the package.json"
 }
 
 install() {
-    EXEC_INSTALL=true
+    EXEC_INSTALL=false
 }
 
 update() {
@@ -59,7 +63,15 @@ develop() {
 }
 
 enable_dist() {
-    ENABLE_DIST=true
+    EXEC_DIST=true
+}
+
+disable_start() {
+    EXEC_START=false
+}
+
+enable_test() {
+    EXEC_TEST=false
 }
 
 enable_js_api_git_link() {
@@ -112,12 +124,14 @@ clean() {
 while [[ $1  == -* ]]; do
     case "$1" in
       -h|--help|-\?) show_help; exit 0;;
-      -i|--install) install; shift;;
       -u|--update) update; shift;;
       -c|--clean) clean; shift;;
-      -d|--develop) develop; shift;;
+      -t|--test) enable_test; shift;;
       -r|--registry)  change_registry $2; shift 2;;
-      -r|--version)  version_component $2; shift 2;;
+      -v|--version)  version_component $2; shift 2;;
+      -si|--skipinstall) install; shift;;
+      -ss|--skipstart)  disable_start; shift;;
+      -dev|--develop) develop; shift;;
       -dist)  enable_dist; shift;;
       -gitjsapi)  enable_js_api_git_link $2; shift 2;;
       -vjsapi)  version_js_api $2; shift 2;;
@@ -125,34 +139,28 @@ while [[ $1  == -* ]]; do
     esac
 done
 
+cd "$DIR/../demo-shell-ng2"
+
 if $EXEC_CLEAN == true; then
   echo "====== Clean Demo shell ====="
-  cd "$DIR/../demo-shell-ng2"
   npm install rimraf
   npm run clean
 fi
 
+if $EXEC_INSTALL == true; then
+  echo "====== Install Demo shell ====="
+  npm install
+fi
+
 if $EXEC_DEVELOP == true; then
-  echo "====== Build ng2-components folder====="
-  cd "$DIR/../scripts"
-  sh npm-build-all.sh
-fi
-
-if $EXEC_INSTALL == true; then
-  echo "====== Install Demo shell ====="
-  cd "$DIR/../demo-shell-ng2"
-  npm install
-fi
-
-if $EXEC_INSTALL == true; then
-  echo "====== Install Demo shell ====="
-  cd "$DIR/../demo-shell-ng2"
-  npm install
+   echo "====== Install node_modules ng2-components ====="
+   cd "$DIR/../ng2-components"
+   npm install
+   cd "$DIR/../demo-shell-ng2"
 fi
 
 if $EXEC_VERSION == true; then
-  echo "====== Install version "${NG2_COMPONENTS_VERSION}" of ng2-components ====="
-  cd "$DIR/../demo-shell-ng2"
+   echo "====== Install version "${NG2_COMPONENTS_VERSION}" of ng2-components ====="
 
     if [[ "${EXEC_DEVELOP}" == "" ]]
     then
@@ -169,46 +177,52 @@ fi
 if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
   echo "====== Use the alfresco JS-API  '$GIT_ISH'====="
   npm install $GIT_ISH
-  cd "$DIR/../ng2-components/node_modules/alfresco-js-api"
-  npm install
-  cd "$DIR/../ng2-components/"
-fi
-
-if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
-  echo "====== Use the alfresco JS-API  '$GIT_ISH'====="
-  npm install $GIT_ISH
-  cd "$DIR/../ng2-components/node_modules/alfresco-js-api"
+  cd "$DIR/../demo-shell-ng2/node_modules/alfresco-js-api"
   npm install
+  if $EXEC_DEVELOP == true; then
+   cd "$DIR/../ng2-components/"
+   npm install $GIT_ISH
+   cd "$DIR/../ng2-components/node_modules/alfresco-js-api"
+   npm install
+  fi
+  cd "$DIR/../demo-shell-ng2"
 fi
 
 if $EXEC_VERSION_JSAPI == true; then
   echo "====== Use the alfresco JS-API '$JSAPI_VERSION'====="
-  cd "$DIR/../demo-shell-ng2"
   npm install alfresco-js-api@${JSAPI_VERSION}
+  if $EXEC_DEVELOP == true; then
+   echo "====== Install node_modules ng2-components ====="
+   cd "$DIR/../ng2-components/"
+   npm install alfresco-js-api@${JSAPI_VERSION}
+  fi
+  cd "$DIR/../demo-shell-ng2"
 fi
 
-if $EXEC_DEVELOP == true; then
-  cd "$DIR/../demo-shell-ng2"
-    if $ENABLE_DIST == true; then
-        echo "====== Build and start dist Demo shell ====="
-        npm run build:dev
+if $EXEC_TEST == true; then
+  echo "====== Demo shell Test====="
+  npm run test
+fi
+
+if $EXEC_START == true; then
+    if $EXEC_DEVELOP == true; then
+        echo "====== Start Demo shell dev mode ====="
+        npm run start:dev
+    elif $EXEC_DIST == true; then
+        echo "====== Start Demo shell dist mode ====="
         npm run start:dist
     else
         echo "====== Start Demo shell ====="
-        npm run start:dev
+        npm run start
     fi
 else
-  cd "$DIR/../demo-shell-ng2"
-
-  if $ENABLE_DIST == true; then
-    echo "====== Build and start dist Demo shell ====="
-    npm run build
-    npm run start:dist
-  else
-    echo "====== Start Demo shell dev mode====="
-    npm run start
-  fi
-
+    if $EXEC_DEVELOP == true; then
+        echo "====== Build Demo shell dev mode ====="
+        npm run build:dev
+    else
+        echo "====== Build Demo shell ====="
+        npm run build
+    fi
 fi
 
 

From 59021ae9d296a5c1bdbc085d792f896e5877d1e6 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Mon, 22 May 2017 12:25:06 +0100
Subject: [PATCH 47/72] activiti-start-process should accept list of process
 variable in input (#1880)

---
 .../ng2-activiti-processlist/README.md        | 20 ++++++++++------
 .../activiti-start-process.component.spec.ts  | 24 ++++++++++++++++---
 .../activiti-start-process.component.ts       | 10 +++++---
 .../src/services/activiti-process.service.ts  |  6 ++++-
 4 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/ng2-components/ng2-activiti-processlist/README.md b/ng2-components/ng2-activiti-processlist/README.md
index 247132c2fd..7c9581e2c4 100644
--- a/ng2-components/ng2-activiti-processlist/README.md
+++ b/ng2-components/ng2-activiti-processlist/README.md
@@ -267,13 +267,13 @@ The AccordionComponent is exposed by the alfresco-core.
 
 ![how-create-accordion-menu](docs/assets/how-to-create-accordion-menu.png)
 
-### Start Process Button component
+### Start Process component
 
 Displays a button which in turn displays a dialog when clicked, allowing the user
 to specify some basic details needed to start a new process instance.
 
 ```html
-<activiti-start-process-instance></activiti-start-process-instance>
+<activiti-start-process appId="YOUR_APP_ID" ></activiti-start-process>
 ```
 
 #### Options
@@ -281,18 +281,24 @@ to specify some basic details needed to start a new process instance.
 
 | Name | Description |
 | --- | --- |
-| `appId` | Limit the list of processes which can be started to those contained in the specified app |
+| `appId` |  (required): Limit the list of processes which can be started to those contained in the specified app |
+| `variables` | Variables in input to the process [RestVariable]**](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api/docs/RestVariable.md)|
+
 
 #### Events
 
-No events are emitted by this component
+| Name | Description |
+| --- | --- |
+| `start` | The event is emitted when the process start |
+| `error` | The event is emitted when the start process fail |
+
 
 ### Process Details component
 
 This component displays detailed information on a specified process instance
 
 ```html
-<activiti-process-instance-details processInstanceId="123"></activiti-process-instance-details>
+<activiti-process-instance-details processInstanceId="YOUR_PROCESS_INSTANCE_ID"></activiti-process-instance-details>
 ```
 
 #### Options
@@ -337,7 +343,7 @@ This is a sub-component of the process details component, which renders some gen
 Lists both the active and completed tasks associated with a particular process instance
 
 ```html
-<activiti-process-instance-tasks processInstanceId="123" showRefreshButton="true"></activiti-process-instance-tasks>
+<activiti-process-instance-tasks processInstanceId="YOUR_PROCESS_INSTANCE_ID" showRefreshButton="true"></activiti-process-instance-tasks>
 ```
 
 #### Options
@@ -359,7 +365,7 @@ Lists both the active and completed tasks associated with a particular process i
 Displays comments associated with a particular process instances and allows the user to add new comments
 
 ```html
-<activiti-process-instance-comments processInstanceId="123"></activiti-process-instance-comments>
+<activiti-process-instance-comments processInstanceId="YOUR_PROCESS_INSTANCE_ID"></activiti-process-instance-comments>
 ```
 
 #### Options
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.spec.ts
index a91546cca7..ffd43c1e3a 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.spec.ts
@@ -26,6 +26,7 @@ import { TranslationMock } from './../assets/translation.service.mock';
 import { newProcess, fakeProcessDefs, fakeProcessDefWithForm, taskFormMock } from './../assets/activiti-start-process.component.mock';
 import { ActivitiStartProcessInstance } from './activiti-start-process.component';
 import { ActivitiProcessService } from '../services/activiti-process.service';
+import { RestVariable } from 'alfresco-js-api';
 
 describe('ActivitiStartProcessInstance', () => {
 
@@ -201,7 +202,24 @@ describe('ActivitiStartProcessInstance', () => {
             component.onProcessDefChange('my:process1');
             component.startProcess();
             fixture.whenStable().then(() => {
-                expect(startProcessSpy).toHaveBeenCalledWith('my:process1', 'My new process', undefined, undefined);
+                expect(startProcessSpy).toHaveBeenCalledWith('my:process1', 'My new process', undefined, undefined, undefined);
+            });
+        }));
+
+        it('should call service to start process with the variables setted', async(() => {
+            let inputProcessVariable = [];
+
+            let variable: any = {};
+            variable.name = 'nodeId';
+            variable.value ='id';
+
+            inputProcessVariable.push(variable);
+
+            component.variables = inputProcessVariable;
+            component.onProcessDefChange('my:process1');
+            component.startProcess();
+            fixture.whenStable().then(() => {
+                expect(startProcessSpy).toHaveBeenCalledWith('my:process1', 'My new process', undefined, undefined, inputProcessVariable);
             });
         }));
 
@@ -214,8 +232,8 @@ describe('ActivitiStartProcessInstance', () => {
             });
         }));
 
-        it('should throw start event error when process cannot be started', async(() => {
-            let errorSpy = spyOn(component.start, 'error');
+        it('should throw error event when process cannot be started', async(() => {
+            let errorSpy = spyOn(component.error, 'error');
             let error = { message: 'My error' };
             startProcessSpy = startProcessSpy.and.returnValue(Observable.throw(error));
             component.onProcessDefChange('my:process1');
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 35ff83ec9a..b9a051ce6e 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
@@ -21,6 +21,7 @@ import { ActivitiStartForm } from 'ng2-activiti-form';
 import { ProcessInstance } from './../models/process-instance.model';
 import { ProcessDefinitionRepresentation } from './../models/process-definition.model';
 import { ActivitiProcessService } from './../services/activiti-process.service';
+import { RestVariable } from 'alfresco-js-api';
 
 declare let componentHandler: any;
 declare let dialogPolyfill: any;
@@ -36,11 +37,14 @@ export class ActivitiStartProcessInstance implements OnChanges {
     appId: string;
 
     @Input()
-    showStartButton: boolean = true;
+    variables: RestVariable;
 
     @Output()
     start: EventEmitter<ProcessInstance> = new EventEmitter<ProcessInstance>();
 
+    @Output()
+    error: EventEmitter<ProcessInstance> = new EventEmitter<ProcessInstance>();
+
     @ViewChild(ActivitiStartForm)
     startForm: ActivitiStartForm;
 
@@ -85,14 +89,14 @@ export class ActivitiStartProcessInstance implements OnChanges {
         if (this.currentProcessDef.id && this.name) {
             this.resetErrorMessage();
             let formValues = this.startForm ? this.startForm.form.values : undefined;
-            this.activitiProcess.startProcess(this.currentProcessDef.id, this.name, outcome, formValues).subscribe(
+            this.activitiProcess.startProcess(this.currentProcessDef.id, this.name, outcome, formValues, this.variables).subscribe(
                 (res) => {
                     this.name = '';
                     this.start.emit(res);
                 },
                 (err) => {
                     this.errorMessageId = 'START_PROCESS.ERROR.START';
-                    this.start.error(err);
+                    this.error.error(err);
                 }
             );
         }
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 fedb836f1c..9bfdb3bf5e 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
@@ -18,6 +18,7 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
+import { RestVariable } from 'alfresco-js-api';
 import { ProcessInstance, ProcessDefinitionRepresentation } from '../models/index';
 import { ProcessFilterRequestRepresentation } from '../models/process-instance-filter.model';
 import { ProcessInstanceVariable } from './../models/process-instance-variable.model';
@@ -277,7 +278,7 @@ export class ActivitiProcessService {
             .catch(err => this.handleError(err));
     }
 
-    startProcess(processDefinitionId: string, name: string, outcome?: string, startFormValues?: any): Observable<ProcessInstance> {
+    startProcess(processDefinitionId: string, name: string, outcome?: string, startFormValues?: any, variables?: RestVariable): Observable<ProcessInstance> {
         let startRequest: any = {
             name: name,
             processDefinitionId: processDefinitionId
@@ -288,6 +289,9 @@ export class ActivitiProcessService {
         if (startFormValues) {
             startRequest.values = startFormValues;
         }
+        if (variables) {
+            startRequest.variables = variables;
+        }
         return Observable.fromPromise(
             this.apiService.getInstance().activiti.processApi.startNewProcessInstance(startRequest)
             )

From 0e153c47ef1f98aaabdfee7de2e30db1b8f8be69 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Mon, 22 May 2017 14:02:58 +0100
Subject: [PATCH 48/72] group test (#1890)

---
 .travis.yml              | 12 ++++++----
 scripts/README.md        |  2 +-
 scripts/npm-build-all.sh | 49 ++++++++++++++++++++++++++++------------
 scripts/npm-publish.sh   |  9 ++++----
 4 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 5fa7fadaf3..c293925d1b 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -10,11 +10,12 @@ before_install:
 
 env:
   matrix:
-    - MODULE=ng2-components
+    - MODULE=ng2-components-alfresco
+    - MODULE=ng2-components-activiti
     - MODULE=ng2-demo-shell
 
 install:
-    - if ([ "$MODULE" == "ng2-components" ]); then
+    - if ([ "$MODULE" == "ng2-components-alfresco" -o  "$MODULE" == "ng2-components-activiti" ]); then
         if ([ "$TRAVIS_BRANCH" = "master" ]); then
             (./scripts/npm-build-all.sh  || exit 1;);
         else
@@ -23,8 +24,11 @@ install:
       fi
 
 script:
-    - if ([ "$MODULE" == "ng2-components" ]); then
-            (./scripts/npm-build-all.sh -si -sb -t || exit 1;);
+    - if ([ "$MODULE" == "ng2-components-activiti" ]); then
+            (./scripts/npm-build-all.sh -si -sb -t "ng2-activiti*" || exit 1;);
+      fi
+    - if ([ "$MODULE" == "ng2-components-alfresco" ]); then
+            (./scripts/npm-build-all.sh -si -sb -t "ng2-alfresco*" || exit 1;);
       fi
     - if ([ "$MODULE" == "ng2-demo-shell" ]); then
        if ([ "$TRAVIS_BRANCH" = "master" ]); then
diff --git a/scripts/README.md b/scripts/README.md
index 2364589cf3..1499321e95 100644
--- a/scripts/README.md
+++ b/scripts/README.md
@@ -144,7 +144,7 @@ The default behaviour of the ***npm-build-all.sh*** install node_modules and bui
 | Option | Description |
 | --- | --- |
 | -h or --help    | show the help  |
-| -t or --test    | If you want run the test:  |
+| -t or --test    | If you want run the test, this parameter accept also a wildecard to execute test for example -t "ng2-alfresco-core" |
 | -c or --clean   | clean the ng2_components folders before to start from all the temp builds file as node_modules  |
 | -gitjsapi   | if you want start the demo shell using an alfresco-js-api referenced by commit-ish version of the JS-API |
 | -si or --skipinstall    | skip the install of the node_modules  |
diff --git a/scripts/npm-build-all.sh b/scripts/npm-build-all.sh
index dcb2da8f6b..c5c390f39f 100755
--- a/scripts/npm-build-all.sh
+++ b/scripts/npm-build-all.sh
@@ -6,8 +6,10 @@ eval EXEC_FAST_TEST=false
 eval EXEC_CLEAN=false
 eval EXEC_BUILD=true
 eval EXEC_INSTALL=true
+eval EXEC_SINGLE_TEST=false
 eval EXEC_GIT_NPM_INSTALL_JSAPI=false
 eval GIT_ISH=""
+eval SINGLE_TEST=""
 
 eval projects=( "ng2-alfresco-core"
     "ng2-alfresco-datatable"
@@ -30,7 +32,7 @@ eval projects=( "ng2-alfresco-core"
 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 "-t or -test build all your local component and run also the test on them , this parameter accept also a wildecard to execute test for example -t "ng2-alfresco-core" "
     echo "-c or -clean the node_modules folder before to start the build"
     echo "-si or -skipinstall skip the install node_modules folder before to start the build"
     echo "-sb or skip build"
@@ -39,6 +41,12 @@ show_help() {
 }
 
 enable_test(){
+    if [[ ! -z $1 ]]; then
+        if [[  $1 != "-"* ]]; then
+            EXEC_SINGLE_TEST=true
+            SINGLE_TEST=$1
+        fi
+    fi
     RUN_TEST=true
 }
 
@@ -71,7 +79,12 @@ exec_install(){
 while [[ $1 == -* ]]; do
     case "$1" in
       -h|--help|-\?) show_help; exit 0;;
-      -t|--test)  enable_test; shift;;
+      -t|--test)  enable_test $2;
+                       shift;
+                       if $EXEC_SINGLE_TEST == true; then
+                        shift;
+                       fi
+                       ;;
       -ft|--fasttest)  enable_fast_test; shift;;
       -gitjsapi)  enable_js_api_git_link $2; shift 2;;
       -c|--clean)  clean; shift;;
@@ -89,11 +102,10 @@ if $EXEC_CLEAN == true; then
   npm run clean
 fi
 
-echo "====== Regenerate global ng2-components package.json ====="
-npm install package-json-merge
-npm run pkg-build
-
 if $EXEC_INSTALL == true; then
+    echo "====== Regenerate global ng2-components package.json ====="
+    npm install package-json-merge
+    npm run pkg-build
     echo "====== Install ng2-components dependencies ====="
     npm install
 fi
@@ -116,11 +128,20 @@ if $EXEC_FAST_TEST == true; then
     npm run test || exit 1
 fi
 
-for PACKAGE in ${projects[@]}
-do
-  DESTDIR="$DIR/../ng2-components/"
-  cd $DESTDIR
-  if $RUN_TEST == true; then
-      test_project $PACKAGE
-  fi
-done
+
+if $RUN_TEST == true; then
+    for PACKAGE in ${projects[@]}
+    do
+      DESTDIR="$DIR/../ng2-components/"
+      cd $DESTDIR
+      if $EXEC_SINGLE_TEST == true; then
+        if [[ $PACKAGE == $SINGLE_TEST ]]; then
+            test_project $SINGLE_TEST
+        fi
+      else
+        test_project $PACKAGE
+      fi
+    done
+fi
+
+
diff --git a/scripts/npm-publish.sh b/scripts/npm-publish.sh
index ae964258a8..927e9ad92f 100755
--- a/scripts/npm-publish.sh
+++ b/scripts/npm-publish.sh
@@ -106,6 +106,11 @@ do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
   echo "====== MOVE DIR: ${DESTDIR} ===== "
   cd ${DESTDIR}
+
+  if $EXEC_CHANGE_REGISTRY == true; then
+    change_registry
+  fi
+
   echo "====== INSTALL AND CLEAN ${PACKAGE} ===== "
   npm install rimraf
   npm run clean
@@ -119,10 +124,6 @@ do
     cd ${DESTDIR}
   fi
 
-  if $EXEC_CHANGE_REGISTRY == true; then
-    change_registry
-  fi
-
   echo "====== PUBLISHING: ${DESTDIR} ===== npm publish ${OPTIONS}"
   npm publish ${OPTIONS} || exit 1
 

From ef5bb6333ccf81ad1dcb453198f1f0af853bcd3e Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Mon, 22 May 2017 15:46:28 +0100
Subject: [PATCH 49/72] change order publish script install and dev js api

---
 scripts/npm-publish.sh | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/scripts/npm-publish.sh b/scripts/npm-publish.sh
index 927e9ad92f..46e866ac0f 100755
--- a/scripts/npm-publish.sh
+++ b/scripts/npm-publish.sh
@@ -114,7 +114,6 @@ do
   echo "====== INSTALL AND CLEAN ${PACKAGE} ===== "
   npm install rimraf
   npm run clean
-  npm install
 
   if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
     echo "====== Use the alfresco JS-API  '$GIT_ISH'====="
@@ -124,6 +123,8 @@ do
     cd ${DESTDIR}
   fi
 
+  npm install
+
   echo "====== PUBLISHING: ${DESTDIR} ===== npm publish ${OPTIONS}"
   npm publish ${OPTIONS} || exit 1
 

From da18a21e7c3ea123a61a4e6ecb7f0b0d298f67e6 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Mon, 22 May 2017 15:46:54 +0100
Subject: [PATCH 50/72] [ADF-551] sorting for document list (#1891)

* table cell component

- table cell component with performance improvements

* permissions and sorting fixes

- fixed ability to set default sorting
- fixed permission evaluation
- new: context menu now also works with permissions
- disabled tags column in demo shell due to performance implications

* fix unit tests

* fix tsconfig for unit testing
---
 .../app/components/files/files.component.html |  3 ++
 demo-shell-ng2/tsconfig.json                  |  3 --
 .../ng2-activiti-analytics/tsconfig.json      |  3 --
 .../ng2-activiti-diagrams/tsconfig.json       |  3 --
 .../ng2-activiti-form/tsconfig.json           |  3 --
 .../ng2-activiti-processlist/tsconfig.json    |  3 --
 .../ng2-activiti-tasklist/tsconfig.json       |  3 --
 .../context-menu-holder.component.ts          | 14 +++++-
 .../ng2-alfresco-core/tsconfig.json           |  3 --
 .../ng2-alfresco-datatable/index.ts           |  2 +
 .../datatable/datatable-cell.component.ts     | 48 +++++++++++++++++++
 .../datatable/datatable.component.html        |  6 +--
 .../datatable/datatable.component.spec.ts     |  6 ++-
 .../datatable/datatable.component.ts          |  2 +-
 .../src/components/datatable/index.ts         |  1 +
 .../ng2-alfresco-datatable/tsconfig.json      |  3 --
 .../content-action.component.ts               |  6 ++-
 .../content-column-list.component.spec.ts     |  2 +
 .../content-column.component.spec.ts          |  2 +
 .../document-list.component.spec.ts           |  4 +-
 .../src/components/document-list.component.ts | 48 ++++++++-----------
 .../src/data/share-datatable-adapter.ts       |  4 +-
 .../src/models/content-action.model.ts        |  5 +-
 .../ng2-alfresco-documentlist/tsconfig.json   |  3 --
 .../ng2-alfresco-login/tsconfig.json          |  3 --
 .../ng2-alfresco-search/tsconfig.json         |  3 --
 .../ng2-alfresco-social/tsconfig.json         |  3 --
 ng2-components/ng2-alfresco-tag/tsconfig.json |  3 --
 .../ng2-alfresco-upload/tsconfig.json         |  3 --
 .../ng2-alfresco-userinfo/tsconfig.json       |  3 --
 .../ng2-alfresco-viewer/tsconfig.json         |  3 --
 .../ng2-alfresco-webscript/tsconfig.json      |  3 --
 32 files changed, 112 insertions(+), 92 deletions(-)
 create mode 100644 ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable-cell.component.ts

diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html
index e07602fd09..5787f84ba3 100644
--- a/demo-shell-ng2/app/components/files/files.component.html
+++ b/demo-shell-ng2/app/components/files/files.component.html
@@ -45,6 +45,8 @@
                     -->
 
                 </data-column>
+                <!-- Notes: has performance problems due to multiple files/folders causing separate HTTP calls to get tags -->
+                <!--
                 <data-column
                     title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
                     key="id"
@@ -53,6 +55,7 @@
                         <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
                     </template>
                 </data-column>
+                -->
                 <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
                         key="createdByUser.displayName"
diff --git a/demo-shell-ng2/tsconfig.json b/demo-shell-ng2/tsconfig.json
index 875b81f937..dbb645722f 100644
--- a/demo-shell-ng2/tsconfig.json
+++ b/demo-shell-ng2/tsconfig.json
@@ -21,9 +21,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-activiti-analytics/tsconfig.json b/ng2-components/ng2-activiti-analytics/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-activiti-analytics/tsconfig.json
+++ b/ng2-components/ng2-activiti-analytics/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-activiti-diagrams/tsconfig.json b/ng2-components/ng2-activiti-diagrams/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-activiti-diagrams/tsconfig.json
+++ b/ng2-components/ng2-activiti-diagrams/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-activiti-form/tsconfig.json b/ng2-components/ng2-activiti-form/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-activiti-form/tsconfig.json
+++ b/ng2-components/ng2-activiti-form/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-activiti-processlist/tsconfig.json b/ng2-components/ng2-activiti-processlist/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-activiti-processlist/tsconfig.json
+++ b/ng2-components/ng2-activiti-processlist/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-activiti-tasklist/tsconfig.json b/ng2-components/ng2-activiti-tasklist/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-activiti-tasklist/tsconfig.json
+++ b/ng2-components/ng2-activiti-tasklist/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.ts b/ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.ts
index 1f0fb4e02a..e69a1e05fb 100644
--- a/ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.ts
@@ -52,7 +52,10 @@ import { ContextMenuService } from './context-menu.service';
     template: `
         <div [ngStyle]="locationCss" class="menu-container">
             <ul class="context-menu">
-                <li (click)="link.subject.next(link)" class="mdl-menu__item link" *ngFor="let link of links">
+                <li *ngFor="let link of links"
+                    class="mdl-menu__item link"
+                    (click)="onMenuItemClick($event, link)"
+                    [attr.disabled]="link.model?.disabled || undefined">
                     {{link.title || link.model?.title}}
                 </li>
             </ul>
@@ -82,6 +85,15 @@ export class ContextMenuHolderComponent {
         this.isShown = false;
     }
 
+    onMenuItemClick(event: Event, menuItem: any): void {
+        if (menuItem && menuItem.model && menuItem.model.disabled) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            return;
+        }
+        menuItem.subject.next(menuItem);
+    }
+
     showMenu(e, links) {
         this.isShown = true;
         this.links = links;
diff --git a/ng2-components/ng2-alfresco-core/tsconfig.json b/ng2-components/ng2-alfresco-core/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-alfresco-core/tsconfig.json
+++ b/ng2-components/ng2-alfresco-core/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-alfresco-datatable/index.ts b/ng2-components/ng2-alfresco-datatable/index.ts
index 6e3c447446..4ebed2eb97 100644
--- a/ng2-components/ng2-alfresco-datatable/index.ts
+++ b/ng2-components/ng2-alfresco-datatable/index.ts
@@ -27,9 +27,11 @@ export * from './src/components/datatable/data-row-action.event';
 import { DataTableComponent } from './src/components/datatable/datatable.component';
 import { NoContentTemplateComponent } from './src/components/datatable/no-content-template.component';
 import { PaginationComponent } from './src/components/pagination/pagination.component';
+import { DataTableCellComponent } from './src/components/datatable/datatable-cell.component';
 
 export const ALFRESCO_DATATABLE_DIRECTIVES: [any] = [
     DataTableComponent,
+    DataTableCellComponent,
     NoContentTemplateComponent,
     PaginationComponent
 ];
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable-cell.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable-cell.component.ts
new file mode 100644
index 0000000000..d03020274c
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable-cell.component.ts
@@ -0,0 +1,48 @@
+/*!
+ * @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.
+ */
+
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { DataTableAdapter, DataColumn, DataRow } from '../../data/index';
+
+@Component({
+    selector: 'alfresco-datatable-cell',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: '<ng-container>{{value}}</ng-container>'
+})
+export class DataTableCellComponent {
+
+    @Input()
+    data: DataTableAdapter;
+
+    @Input()
+    column: DataColumn;
+
+    @Input()
+    row: DataRow;
+
+    @Input()
+    value: any;
+
+    constructor() { }
+
+    ngOnInit() {
+        if (this.column && this.column.key && this.row && this.data) {
+            this.value = this.data.getValue(this.row, this.column);
+        }
+    }
+
+}
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
index db3f470479..b3894ed078 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@@ -70,10 +70,10 @@
                             (error)="onImageLoadingError($event)">
                     </div>
                     <div *ngSwitchCase="'date'" class="cell-value" [attr.data-automation-id]="'date_' + data.getValue(row, col)">
-                        {{data.getValue(row, col)}}
+                        <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
                     </div>
                     <div *ngSwitchCase="'text'" class="cell-value" [attr.data-automation-id]="'text_' + data.getValue(row, col)">
-                        {{data.getValue(row, col)}}
+                        <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
                     </div>
                     <span *ngSwitchDefault class="cell-value">
                     <!-- empty cell for unknown column type -->
@@ -95,7 +95,7 @@
             </button>
             <ul alfresco-mdl-menu class="mdl-menu--bottom-right"
                 [attr.for]="'action_menu_' + idx">
-                <li class="mdl-menu__item" [attr.disabled]="action.disabled"
+                <li class="mdl-menu__item" [attr.disabled]="action.disabled || undefined"
                     [attr.data-automation-id]="action.title"
                     *ngFor="let action of getRowActions(row)"
                     (click)="onExecuteRowAction(row, action)">
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 1211e0f2ce..d6694b778f 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
@@ -20,6 +20,7 @@ import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
 import { MdCheckboxChange } from '@angular/material';
 import { DataTableComponent } from './datatable.component';
+import { DataTableCellComponent } from './datatable-cell.component';
 import {
     DataRow,
     DataColumn,
@@ -40,7 +41,10 @@ describe('DataTable', () => {
             imports: [
                 CoreModule.forRoot()
             ],
-            declarations: [DataTableComponent]
+            declarations: [
+                DataTableCellComponent,
+                DataTableComponent
+            ]
         }).compileComponents();
     }));
 
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 b88c61eddf..d9130df2b2 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
@@ -258,7 +258,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
     }
 
     onExecuteRowAction(row: DataRow, action: any) {
-        if (action.disabled) {
+        if (action.disabled || action.disabled) {
             event.stopPropagation();
         } else {
             this.executeRowAction.emit(new DataRowActionEvent(row, action));
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/index.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/index.ts
index 37153cd18f..0e872f6241 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/index.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/index.ts
@@ -17,3 +17,4 @@
 
 export * from './datatable.component';
 export * from './no-content-template.component';
+export * from './datatable-cell.component';
diff --git a/ng2-components/ng2-alfresco-datatable/tsconfig.json b/ng2-components/ng2-alfresco-datatable/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-alfresco-datatable/tsconfig.json
+++ b/ng2-components/ng2-alfresco-datatable/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.ts
index 07cf03f0d0..017e295c59 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.ts
@@ -47,6 +47,9 @@ export class ContentActionComponent implements OnInit, OnChanges {
     @Input()
     disableWithNoPermission: boolean;
 
+    @Input()
+    disabled: boolean = false;
+
     @Output()
     execute = new EventEmitter();
 
@@ -68,7 +71,8 @@ export class ContentActionComponent implements OnInit, OnChanges {
             icon: this.icon,
             permission: this.permission,
             disableWithNoPermission: this.disableWithNoPermission,
-            target: this.target
+            target: this.target,
+            disabled: this.disabled
         });
 
         if (this.handler) {
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts
index 3cccfcebc2..8827f8d124 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts
@@ -30,6 +30,8 @@ describe('ContentColumnList', () => {
         let service = new DocumentListServiceMock();
         documentList = new DocumentListComponent(service, null, null, null);
         columnList = new ContentColumnListComponent(documentList);
+
+        documentList.ngOnInit();
     });
 
     it('should register column within parent document list', () => {
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts
index e06c860619..1f8d05e04c 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts
@@ -29,6 +29,8 @@ describe('ContentColumn', () => {
         let service = new DocumentListServiceMock();
         documentList = new DocumentListComponent(service, null, null, null);
         columnList = new ContentColumnListComponent(documentList);
+
+        documentList.ngOnInit();
     });
 
     it('should register model within parent column list', () => {
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
index 0a89e5daed..31db4c803e 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
@@ -157,11 +157,11 @@ describe('DocumentList', () => {
 
         let actions = documentList.getNodeActions(new FolderNode());
         expect(actions.length).toBe(1);
-        expect(actions[0]).toBe(folderMenu);
+        expect(actions[0].target).toBe(folderMenu.target);
 
         actions = documentList.getNodeActions(new FileNode());
         expect(actions.length).toBe(1);
-        expect(actions[0]).toBe(documentMenu);
+        expect(actions[0].target).toBe(documentMenu.target);
     });
 
     it('should disable the action if there is no permission for the file and disableWithNoPermission true', () => {
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 0917888c41..5416dd916e 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
@@ -28,7 +28,8 @@ import {
     ObjectDataColumn,
     DataCellEvent,
     DataRowActionEvent,
-    DataColumn
+    DataColumn,
+    DataSorting
 } from 'ng2-alfresco-datatable';
 import { DocumentListService } from './../services/document-list.service';
 import { ContentActionModel } from './../models/content-action.model';
@@ -156,8 +157,6 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
                 private translateService: AlfrescoTranslationService,
                 private el: ElementRef) {
 
-        this.data = new ShareDataTableAdapter(this.documentListService);
-
         if (translateService) {
             translateService.addTranslationFolder('ng2-alfresco-documentlist', 'node_modules/ng2-alfresco-documentlist/src');
         }
@@ -186,6 +185,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
     }
 
     ngOnInit() {
+        this.data = new ShareDataTableAdapter(this.documentListService, null, this.getDefaultSorting());
         this.data.thumbnails = this.thumbnails;
         this.contextActionHandler.subscribe(val => this.contextActionCallback(val));
 
@@ -200,7 +200,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
         }
 
         if (!this.data) {
-            this.data = new ShareDataTableAdapter(this.documentListService, schema);
+            this.data = new ShareDataTableAdapter(this.documentListService, schema, this.getDefaultSorting());
         } else if (schema && schema.length > 0) {
             this.data.setColumns(schema);
         }
@@ -209,18 +209,6 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
         if (!columns || columns.length === 0) {
             this.setupDefaultColumns();
         }
-
-        // TODO: commented out as Permissions feature (Context Menus and Row Actions) breaks all component functionality
-        /*
-        if (this.sorting) {
-            const [ key, direction ] = this.sorting;
-
-            this.data.setSorting({
-                key,
-                direction: direction || 'asc'
-            });
-        }
-        */
     }
 
     ngOnChanges(changes: SimpleChanges) {
@@ -294,28 +282,21 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
 
             if (target) {
                 let ltarget = target.toLowerCase();
-                let actionWithPermission = this.checkPermissions(node);
-
-                let actionsByTarget = actionWithPermission.filter(entry => {
+                let actionsByTarget = this.actions.filter(entry => {
                     return entry.target.toLowerCase() === ltarget;
+                }).map(action => new ContentActionModel(action));
+
+                actionsByTarget.forEach((action) => {
+                    this.checkPermission(node, action);
                 });
 
-                let cloneActions = Object.create(actionsByTarget);
-                return cloneActions;
+                return actionsByTarget;
             }
         }
 
         return [];
     }
 
-    checkPermissions(node: MinimalNodeEntity): ContentActionModel[] {
-        let actionsPermission: ContentActionModel[] = [];
-        this.actions.forEach((action) => {
-            actionsPermission.push(this.checkPermission(node, action));
-        });
-        return actionsPermission;
-    }
-
     checkPermission(node: any, action: ContentActionModel): ContentActionModel {
         if (action.permission) {
             if (this.hasPermissions(node)) {
@@ -562,4 +543,13 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
             this.navigationMode = DocumentListComponent.SINGLE_CLICK_NAVIGATION;
         }
     }
+
+    private getDefaultSorting(): DataSorting {
+        let defaultSorting: DataSorting;
+        if (this.sorting) {
+            const [ key, direction ] = this.sorting;
+            defaultSorting = new DataSorting(key, direction);
+        }
+        return defaultSorting;
+    }
 }
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 47a6982c8c..4daad2b849 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,9 +41,11 @@ export class ShareDataTableAdapter implements DataTableAdapter {
     selectedRow: DataRow;
 
     constructor(private documentListService: DocumentListService,
-                schema: DataColumn[] = []) {
+                schema: DataColumn[] = [],
+                sorting?: DataSorting) {
         this.rows = [];
         this.columns = schema || [];
+        this.sorting = sorting;
     }
 
     getRows(): Array<DataRow> {
diff --git a/ng2-components/ng2-alfresco-documentlist/src/models/content-action.model.ts b/ng2-components/ng2-alfresco-documentlist/src/models/content-action.model.ts
index e8523bf156..46a293b021 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/models/content-action.model.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/models/content-action.model.ts
@@ -21,8 +21,8 @@ export class ContentActionModel {
     handler: ContentActionHandler;
     target: string;
     permission: string;
-    disableWithNoPermission: boolean;
-    disabled: boolean;
+    disableWithNoPermission: boolean = false;
+    disabled: boolean = false;
 
     constructor(obj?: any) {
         if (obj) {
@@ -32,6 +32,7 @@ export class ContentActionModel {
             this.target = obj.target;
             this.permission = obj.permission;
             this.disableWithNoPermission = obj.disableWithNoPermission;
+            this.disabled = obj.disabled;
         }
     }
 }
diff --git a/ng2-components/ng2-alfresco-documentlist/tsconfig.json b/ng2-components/ng2-alfresco-documentlist/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-alfresco-documentlist/tsconfig.json
+++ b/ng2-components/ng2-alfresco-documentlist/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-alfresco-login/tsconfig.json b/ng2-components/ng2-alfresco-login/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-alfresco-login/tsconfig.json
+++ b/ng2-components/ng2-alfresco-login/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-alfresco-search/tsconfig.json b/ng2-components/ng2-alfresco-search/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-alfresco-search/tsconfig.json
+++ b/ng2-components/ng2-alfresco-search/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-alfresco-social/tsconfig.json b/ng2-components/ng2-alfresco-social/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-alfresco-social/tsconfig.json
+++ b/ng2-components/ng2-alfresco-social/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-alfresco-tag/tsconfig.json b/ng2-components/ng2-alfresco-tag/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-alfresco-tag/tsconfig.json
+++ b/ng2-components/ng2-alfresco-tag/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-alfresco-upload/tsconfig.json b/ng2-components/ng2-alfresco-upload/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-alfresco-upload/tsconfig.json
+++ b/ng2-components/ng2-alfresco-upload/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-alfresco-userinfo/tsconfig.json b/ng2-components/ng2-alfresco-userinfo/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-alfresco-userinfo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-userinfo/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-alfresco-viewer/tsconfig.json b/ng2-components/ng2-alfresco-viewer/tsconfig.json
index ba1ef9cea2..42e2a54cc8 100644
--- a/ng2-components/ng2-alfresco-viewer/tsconfig.json
+++ b/ng2-components/ng2-alfresco-viewer/tsconfig.json
@@ -41,9 +41,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
diff --git a/ng2-components/ng2-alfresco-webscript/tsconfig.json b/ng2-components/ng2-alfresco-webscript/tsconfig.json
index 875b81f937..dbb645722f 100644
--- a/ng2-components/ng2-alfresco-webscript/tsconfig.json
+++ b/ng2-components/ng2-alfresco-webscript/tsconfig.json
@@ -21,9 +21,6 @@
             "es2015",
             "dom"
         ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ],
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [

From 811e1b3783527f61d4600daa3597ce643a439758 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Mon, 22 May 2017 16:36:54 +0100
Subject: [PATCH 51/72] invert clean and registry

---
 scripts/npm-publish.sh | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scripts/npm-publish.sh b/scripts/npm-publish.sh
index 46e866ac0f..6a7f96f4f2 100755
--- a/scripts/npm-publish.sh
+++ b/scripts/npm-publish.sh
@@ -107,14 +107,14 @@ do
   echo "====== MOVE DIR: ${DESTDIR} ===== "
   cd ${DESTDIR}
 
-  if $EXEC_CHANGE_REGISTRY == true; then
-    change_registry
-  fi
-
   echo "====== INSTALL AND CLEAN ${PACKAGE} ===== "
   npm install rimraf
   npm run clean
 
+  if $EXEC_CHANGE_REGISTRY == true; then
+    change_registry
+  fi
+
   if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
     echo "====== Use the alfresco JS-API  '$GIT_ISH'====="
     npm install $GIT_ISH

From 246180925e869e26d17bcb15dc5e3d48e5fc5ac3 Mon Sep 17 00:00:00 2001
From: Vito <vito.albano@alfresco.com>
Date: Mon, 22 May 2017 09:12:06 -0700
Subject: [PATCH 52/72] [ADF-509] - fixed settings window dimension (#1892)

* [ADF-509] - fixed settings window dimension

* [ADF-509] - Changed fixed pixel dimension with percentage values
---
 demo-shell-ng2/app/components/setting/setting.component.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/demo-shell-ng2/app/components/setting/setting.component.css b/demo-shell-ng2/app/components/setting/setting.component.css
index 91992ec4aa..abbadd4496 100644
--- a/demo-shell-ng2/app/components/setting/setting.component.css
+++ b/demo-shell-ng2/app/components/setting/setting.component.css
@@ -1,6 +1,6 @@
 .setting-card.mdl-card {
-    width: 320px;
-    height: 320px;
+    width: 100%;
+    height: 100%;
 }
 
 .setting-card > .mdl-card__title {
@@ -30,6 +30,6 @@
     display: table-row;
 }
 
-.adf-setting-input-padding{
+.adf-setting-input-padding {
     padding-top: 0px !important;
 }

From 84d04151719c332926b0bee74f124b2485249f24 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Mon, 22 May 2017 19:03:38 +0100
Subject: [PATCH 53/72] example to not overlay mode viewer (#1893)

---
 .../app/components/files/files.component.css           |  4 ++++
 .../app/components/files/files.component.html          | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/demo-shell-ng2/app/components/files/files.component.css b/demo-shell-ng2/app/components/files/files.component.css
index cb4cb685aa..73ec99ca5d 100644
--- a/demo-shell-ng2/app/components/files/files.component.css
+++ b/demo-shell-ng2/app/components/files/files.component.css
@@ -15,3 +15,7 @@
 .error-message--text {
     color: #d50000;
 }
+
+.adf-not-overlay-viewer {
+    height:900px;
+}
diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html
index 5787f84ba3..731a2e309f 100644
--- a/demo-shell-ng2/app/components/files/files.component.html
+++ b/demo-shell-ng2/app/components/files/files.component.html
@@ -199,5 +199,15 @@
         </extension-viewer>
 
     </alfresco-viewer>
+
+    <!-- Comment the viewer above and uncomment that one below if you want test the overlay false viewer-->
+
+    <!--<div *ngIf="fileShowed" class="adf-not-overlay-viewer">-->
+        <!--<alfresco-viewer [(showViewer)]="fileShowed"-->
+                         <!--[fileNodeId]="fileNodeId"-->
+                         <!--[overlayMode]="false">-->
+        <!--</alfresco-viewer>-->
+    <!--</div>-->
+
 </div>
 

From c5f0196e717497810dc0fc90f7a874d8788ff80f Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Mon, 22 May 2017 19:04:07 +0100
Subject: [PATCH 54/72] cahnge label permission button (#1894)

---
 demo-shell-ng2/app/components/files/files.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html
index 731a2e309f..7dfc786476 100644
--- a/demo-shell-ng2/app/components/files/files.component.html
+++ b/demo-shell-ng2/app/components/files/files.component.html
@@ -144,7 +144,7 @@
     </section>
 
     <section>
-        <md-slide-toggle [(ngModel)]="disableWithNoPermission">Disable when user has no permissions</md-slide-toggle>
+        <md-slide-toggle [(ngModel)]="disableWithNoPermission">Disable upload button when user has no permissions</md-slide-toggle>
     </section>
 
     <h5>Upload</h5>

From f9b8e8efc838b3e5c406e9903d3b12ef23dafc8e Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Tue, 23 May 2017 10:34:41 +0100
Subject: [PATCH 55/72] fix tag publish

---
 scripts/npm-publish.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/npm-publish.sh b/scripts/npm-publish.sh
index 6a7f96f4f2..fe10c3f3c8 100755
--- a/scripts/npm-publish.sh
+++ b/scripts/npm-publish.sh
@@ -56,7 +56,7 @@ add_tag(){
     fi
 
     echo "====== TAG WILL BE ADDED DURING THE PUBLISH: ${TAG} ====="
-    OPTIONS="$OPTIONS -tag $1"
+    OPTIONS="$OPTIONS --tag $1"
 }
 
 change_registry(){

From 6acb8e128f715db89a314d0f96426083ecf56987 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Tue, 23 May 2017 13:51:00 +0100
Subject: [PATCH 56/72] fix demo shell references to components

- fix an issue with demo shell not checking changed code inside the local component folders
---
 demo-shell-ng2/tsconfig.json | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/demo-shell-ng2/tsconfig.json b/demo-shell-ng2/tsconfig.json
index dbb645722f..ab2146c0a8 100644
--- a/demo-shell-ng2/tsconfig.json
+++ b/demo-shell-ng2/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -21,6 +22,24 @@
             "es2015",
             "dom"
         ],
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-components/ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-components/ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-components/ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-components/ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-components/ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-components/ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-components/ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-components/ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-components/ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-components/ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-components/ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-components/ng2-alfresco-tag/"],
+            "ng2-alfresco-upload": ["../ng2-components/ng2-alfresco-upload/"],
+            "ng2-alfresco-viewer": ["../ng2-components/ng2-alfresco-viewer/"],
+            "ng2-alfresco-webscript": ["../ng2-components/ng2-alfresco-webscript/"],
+            "ng2-alfresco-userinfo": ["../ng2-components/ng2-alfresco-userinfo/"]
+        },
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [

From 4a753e6aa3b36c49a5360c7b98999188ef331edc Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Tue, 23 May 2017 12:02:15 +0100
Subject: [PATCH 57/72] update version script modify

---
 scripts/update-version.sh | 56 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 7 deletions(-)

diff --git a/scripts/update-version.sh b/scripts/update-version.sh
index c9417b29e6..5b152c417c 100755
--- a/scripts/update-version.sh
+++ b/scripts/update-version.sh
@@ -1,12 +1,34 @@
 #!/usr/bin/env bash
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+eval JS_API=true
 
-set -ex
+show_help() {
+    echo "Usage: update-version.sh"
+    echo ""
+    echo "-sj or -sjsapi  don't update js-api version"
+    echo "-v or -version  version to update"
+}
 
-cd `dirname $0`
+skip_js() {
+    echo "====== Skip JS-API change version $1 ====="
+    JS_API=false
+}
+
+version_change() {
+    echo "====== New version $1 ====="
+    VERSION=$1
+}
+
+while [[ $1  == -* ]]; do
+    case "$1" in
+      -h|--help|-\?) show_help; exit 0;;
+      -v|version) version_change $2; shift 2;;
+      -sj|sjsapi) skip_js; shift;;
+      -*) shift;;
+    esac
+done
 
-VERSION=$1
 
 if [[ "${VERSION}" == "" ]]
 then
@@ -30,14 +52,24 @@ for PACKAGE in \
   ng2-alfresco-viewer \
   ng2-alfresco-webscript \
   ng2-alfresco-userinfo \
-  ng2-alfresco-social \
-  alfresco-js-api
+  ng2-alfresco-social
 do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
   echo "====== UPDATE PACKAGE VERSION of ${PACKAGE} to ${VERSION} version in all the package.json ======"
   find ././../ -type f -maxdepth 4 -name package.json -print0 | xargs -0 sed -i '' "s/\"${PACKAGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGE}\": \"${VERSION}\"/g"
 done
 
+
+if $JS_API == true; then
+    for PACKAGE in \
+      alfresco-js-api
+    do
+      DESTDIR="$DIR/../ng2-components/${PACKAGE}"
+      echo "====== UPDATE PACKAGE VERSION of ${PACKAGE} to ${VERSION} version in all the package.json ======"
+      find ././../ -type f -maxdepth 4 -name package.json -print0 | xargs -0 sed -i '' "s/\"${PACKAGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGE}\": \"${VERSION}\"/g"
+    done
+fi
+
 for PACKAGE in \
   ng2-activiti-diagrams \
   ng2-activiti-analytics \
@@ -81,14 +113,24 @@ for PACKAGE in \
   ng2-alfresco-viewer \
   ng2-alfresco-webscript \
   ng2-alfresco-userinfo \
-  ng2-alfresco-social \
-  alfresco-js-api
+  ng2-alfresco-social
 do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
   echo "====== UPDATE PACKAGE VERSION of ${PACKAGE} to ~${VERSION} version in all the package.json ======"
   find ././../ -type f -maxdepth 4 -name package.json -print0 | xargs -0 sed -i '' "s/\"${PACKAGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGE}\": \"~${VERSION}\"/g"
 done
 
+
+if $JS_API == true; then
+    for PACKAGE in \
+      alfresco-js-api
+    do
+        DESTDIR="$DIR/../ng2-components/${PACKAGE}"
+        echo "====== UPDATE PACKAGE VERSION of ${PACKAGE} to ~${VERSION} version in all the package.json ======"
+        find ././../ -type f -maxdepth 4 -name package.json -print0 | xargs -0 sed -i '' "s/\"${PACKAGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGE}\": \"~${VERSION}\"/g"
+    done
+fi
+
 for PACKAGE in \
   ng2-activiti-diagrams \
   ng2-activiti-analytics \

From 92ceb0b867da41da2ffff2d09ed13700663e7b56 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Tue, 23 May 2017 12:42:27 +0100
Subject: [PATCH 58/72] update version folder

---
 scripts/update-version.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/update-version.sh b/scripts/update-version.sh
index 5b152c417c..4359916223 100755
--- a/scripts/update-version.sh
+++ b/scripts/update-version.sh
@@ -3,6 +3,8 @@
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 eval JS_API=true
 
+cd `dirname $0`
+
 show_help() {
     echo "Usage: update-version.sh"
     echo ""
@@ -54,7 +56,6 @@ for PACKAGE in \
   ng2-alfresco-userinfo \
   ng2-alfresco-social
 do
-  DESTDIR="$DIR/../ng2-components/${PACKAGE}"
   echo "====== UPDATE PACKAGE VERSION of ${PACKAGE} to ${VERSION} version in all the package.json ======"
   find ././../ -type f -maxdepth 4 -name package.json -print0 | xargs -0 sed -i '' "s/\"${PACKAGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGE}\": \"${VERSION}\"/g"
 done
@@ -64,7 +65,6 @@ if $JS_API == true; then
     for PACKAGE in \
       alfresco-js-api
     do
-      DESTDIR="$DIR/../ng2-components/${PACKAGE}"
       echo "====== UPDATE PACKAGE VERSION of ${PACKAGE} to ${VERSION} version in all the package.json ======"
       find ././../ -type f -maxdepth 4 -name package.json -print0 | xargs -0 sed -i '' "s/\"${PACKAGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGE}\": \"${VERSION}\"/g"
     done

From ee77a1c53f02f260d4edee949552fee31b97adbb Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Tue, 23 May 2017 12:59:37 +0100
Subject: [PATCH 59/72] set ex update version

---
 scripts/update-version.sh | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/scripts/update-version.sh b/scripts/update-version.sh
index 4359916223..d4cc32af47 100755
--- a/scripts/update-version.sh
+++ b/scripts/update-version.sh
@@ -3,6 +3,8 @@
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 eval JS_API=true
 
+set -ex
+
 cd `dirname $0`
 
 show_help() {

From 2ac6439bb44d7396ec23dd60de5941029cd61f57 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Tue, 23 May 2017 14:21:11 +0100
Subject: [PATCH 60/72] check bundles script

---
 scripts/README.md            | 12 +++++
 scripts/npm-check-bundles.sh | 88 ++++++++++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100755 scripts/npm-check-bundles.sh

diff --git a/scripts/README.md b/scripts/README.md
index 1499321e95..8d66781ed8 100644
--- a/scripts/README.md
+++ b/scripts/README.md
@@ -210,3 +210,15 @@ For development environment configuration please refer to [project docs](../demo
 | --- | --- |
 | -h or --help    | show the help  |
 | -sd or --skipDemo   | skip the demo folder clean |
+
+# npm-check-bundles.sh
+
+***npm-check-bundles.sh*** check the bundles in the package npm are present
+
+## Options
+
+| Option | Description |
+| --- | --- |
+| -h or --help    | show the help  |
+| -r or --registry   | against which register you want do this check |
+| -v or --version    | the version of the components to check |
diff --git a/scripts/npm-check-bundles.sh b/scripts/npm-check-bundles.sh
new file mode 100755
index 0000000000..ced47e5f66
--- /dev/null
+++ b/scripts/npm-check-bundles.sh
@@ -0,0 +1,88 @@
+#!/usr/bin/env bash
+
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+eval VERSION=""
+
+eval projects=( "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-social"
+    "ng2-alfresco-tag"
+    "ng2-alfresco-social"
+    "ng2-alfresco-upload"
+    "ng2-alfresco-viewer"
+    "ng2-alfresco-webscript"
+    "ng2-alfresco-userinfo" )
+
+show_help() {
+    echo "Usage: npm-check-bundles.sh"
+    echo "-r or -registry to check  -r 'http://npm.local.me:8080/' "
+    echo "-v or -version to check  -v 1.4.0 "
+    echo ""
+}
+
+change_registry() {
+    echo $1
+    npm set registry $1
+}
+
+set_npm_registry() {
+    npm set registry https://registry.npmjs.org/
+}
+
+version() {
+   VERSION=$1
+}
+
+error_out() {
+      printf '\033[%sm%s\033[m\n' "$@"
+      # usage color "31;5" "string"
+      # 0 default
+      # 5 blink, 1 strong, 4 underlined
+      # fg: 31 red,  32 green, 33 yellow, 34 blue, 35 purple, 36 cyan, 37 white
+      # bg: 40 black, 41 red, 44 blue, 45 purple
+      }
+
+while [[ $1 == -* ]]; do
+    case "$1" in
+      -h|--help|-\?) show_help; exit 0;;
+      -r)  change_registry $2; shift 2;;
+      -v|--version)  version $2; shift 2;;
+      -*) echo "invalid option: $1" 1>&2; show_help; exit 1;;
+    esac
+done
+
+rm -rf temp
+mkdir temp
+cd temp
+
+for PACKAGE in ${projects[@]}
+do
+ mkdir $PACKAGE
+ cd  $PACKAGE
+ npm pack $PACKAGE@$VERSION
+ tar zxf $PACKAGE-$VERSION.tgz
+ if [ ! -f package/bundles/$PACKAGE.js ]; then
+    error_out '31;1' "$PACKAGE bundles not found!" >&2
+    cd $DIR
+    rm -rf temp
+    exit 1
+ else
+     echo "bundles ok!"
+ fi
+ cd ..
+done
+
+cd $DIR
+rm -rf temp
+
+set_npm_registry
+

From 95d221933214e044bc1c71a57e9faa4bca6e588c Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Tue, 23 May 2017 15:55:39 +0100
Subject: [PATCH 61/72] update version script refactoring

---
 scripts/update-version.sh | 213 ++++++++++++++++++--------------------
 1 file changed, 101 insertions(+), 112 deletions(-)

diff --git a/scripts/update-version.sh b/scripts/update-version.sh
index d4cc32af47..e1903bb254 100755
--- a/scripts/update-version.sh
+++ b/scripts/update-version.sh
@@ -3,7 +3,23 @@
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 eval JS_API=true
 
-set -ex
+eval projects=( "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-social"
+    "ng2-alfresco-tag"
+    "ng2-alfresco-social"
+    "ng2-alfresco-upload"
+    "ng2-alfresco-viewer"
+    "ng2-alfresco-webscript"
+    "ng2-alfresco-userinfo" )
 
 cd `dirname $0`
 
@@ -24,6 +40,74 @@ version_change() {
     VERSION=$1
 }
 
+
+update_component_version() {
+   echo "====== UPDATE PACKAGE VERSION of ${PACKAGE} to ${VERSION} version in all the package.json ======"
+   DESTDIR="$DIR/../ng2-components/${1}"
+   sed -i '' "s/\"version\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"version\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
+}
+
+update_component_dependency_version(){
+   echo "====== UPDATE DEPENDENCY VERSION of ${1} to ${VERSION} in ${1}======"
+   DESTDIR="$DIR/../ng2-components/${1}"
+
+   for PACKAGETOCHANGE in ${projects[@]}
+   do
+       sed -i '' "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
+
+       echo "====== UPDATE DEPENDENCY VERSION of ${1} to ~${VERSION} in ${1}======"
+       sed -i '' "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/package.json
+
+       echo "====== UPDATE DEPENDENCY VERSION of ${1} to ${VERSION} in ${1} DEMO ======"
+       sed -i '' "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/demo/package.json
+
+       echo "====== UPDATE DEPENDENCY VERSION of ${1} to ~${VERSION} in ${1} DEMO ======"
+       sed -i '' "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/demo/package.json
+   done
+}
+
+update_component_js_version(){
+   echo "====== UPDATE DEPENDENCY VERSION of alfresco-js-api in ${1} to ${VERSION} in ${1}======"
+   DESTDIR="$DIR/../ng2-components/${1}"
+
+   PACKAGETOCHANGE="alfresco-js-api"
+   sed -i '' "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
+
+   echo "====== UPDATE DEPENDENCY VERSION of ${1} to ~${VERSION} in ${1}======"
+   sed -i '' "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/package.json
+
+   echo "====== UPDATE DEPENDENCY VERSION of ${1} to ${VERSION} in ${1} DEMO ======"
+   sed -i '' "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/demo/package.json
+
+   echo "====== UPDATE DEPENDENCY VERSION of ${1} to ~${VERSION} in ${1} DEMO ======"
+   sed -i '' "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/demo/package.json
+}
+
+update_demo_shell_dependency_version(){
+
+   for PACKAGETOCHANGE in ${projects[@]}
+   do
+    echo "====== UPDATE VERSION OF DEMO-SHELL to ${PACKAGETOCHANGE} version ${VERSION} ======"
+    DESTDIR="$DIR/../demo-shell-ng2/"
+    sed -i '' "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
+
+    echo "====== UPDATE DEPENDENCY VERSION of ${1} to ~${VERSION} in ${DESTDIR}======"
+    sed -i '' "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/package.json
+   done
+}
+
+update_demo_shell_js_version(){
+    echo "====== UPDATE VERSION OF DEMO-SHELL to  alfresco-js-api version ${VERSION} ======"
+    DESTDIR="$DIR/../demo-shell-ng2/"
+    PACKAGETOCHANGE="alfresco-js-api"
+
+    sed -i '' "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
+
+    echo "====== UPDATE DEPENDENCY VERSION of ${1} to ~${VERSION} in ${DESTDIR}======"
+    sed -i '' "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/package.json
+}
+
+
 while [[ $1  == -* ]]; do
     case "$1" in
       -h|--help|-\?) show_help; exit 0;;
@@ -40,122 +124,27 @@ then
   exit 1
 fi
 
-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-upload \
-  ng2-alfresco-viewer \
-  ng2-alfresco-webscript \
-  ng2-alfresco-userinfo \
-  ng2-alfresco-social
+cd "$DIR/../"
+
+echo "====== UPDATE COMPONENTS ======"
+
+for PACKAGE in ${projects[@]}
 do
-  echo "====== UPDATE PACKAGE VERSION of ${PACKAGE} to ${VERSION} version in all the package.json ======"
-  find ././../ -type f -maxdepth 4 -name package.json -print0 | xargs -0 sed -i '' "s/\"${PACKAGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGE}\": \"${VERSION}\"/g"
+   update_component_version $PACKAGE
+   update_component_dependency_version $PACKAGE
+
+   if $JS_API == true; then
+    update_component_js_version $PACKAGE
+   fi
 done
 
+echo "====== UPDATE DEMO SHELL ======"
+
+update_demo_shell_dependency_version
 
 if $JS_API == true; then
-    for PACKAGE in \
-      alfresco-js-api
-    do
-      echo "====== UPDATE PACKAGE VERSION of ${PACKAGE} to ${VERSION} version in all the package.json ======"
-      find ././../ -type f -maxdepth 4 -name package.json -print0 | xargs -0 sed -i '' "s/\"${PACKAGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGE}\": \"${VERSION}\"/g"
-    done
+    update_demo_shell_js_version
 fi
 
-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-upload \
-  ng2-alfresco-viewer \
-  ng2-alfresco-webscript \
-  ng2-alfresco-social \
-  ng2-alfresco-userinfo
-do
-  DESTDIR="$DIR/../ng2-components/${PACKAGE}"
-  echo "====== UPDATE VERSION OF ${PACKAGE} to ${VERSION} version ======"
-  sed -i '' "s/\"version\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"version\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
-done
-
-echo "====== UPDATE VERSION OF DEMO-SHELL to ${VERSION} version ======"
-
+DESTDIR="$DIR/../demo-shell-ng2/"
 sed -i '' "s/\"version\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"version\": \"${VERSION}\"/g"  ${DIR}/../demo-shell-ng2/package.json
-
-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-upload \
-  ng2-alfresco-viewer \
-  ng2-alfresco-webscript \
-  ng2-alfresco-userinfo \
-  ng2-alfresco-social
-do
-  DESTDIR="$DIR/../ng2-components/${PACKAGE}"
-  echo "====== UPDATE PACKAGE VERSION of ${PACKAGE} to ~${VERSION} version in all the package.json ======"
-  find ././../ -type f -maxdepth 4 -name package.json -print0 | xargs -0 sed -i '' "s/\"${PACKAGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGE}\": \"~${VERSION}\"/g"
-done
-
-
-if $JS_API == true; then
-    for PACKAGE in \
-      alfresco-js-api
-    do
-        DESTDIR="$DIR/../ng2-components/${PACKAGE}"
-        echo "====== UPDATE PACKAGE VERSION of ${PACKAGE} to ~${VERSION} version in all the package.json ======"
-        find ././../ -type f -maxdepth 4 -name package.json -print0 | xargs -0 sed -i '' "s/\"${PACKAGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGE}\": \"~${VERSION}\"/g"
-    done
-fi
-
-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-upload \
-  ng2-alfresco-viewer \
-  ng2-alfresco-webscript \
-  ng2-alfresco-social \
-  ng2-alfresco-userinfo
-do
-  DESTDIR="$DIR/../ng2-components/${PACKAGE}"
-  echo "====== UPDATE VERSION OF ${PACKAGE} to ~${VERSION} version ======"
-  sed -i '' "s/\"version\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"version\": \"~${VERSION}\"/g"  ${DESTDIR}/package.json
-done
-
-echo "====== UPDATE VERSION OF DEMO-SHELL to ${VERSION} version ======"
-
-sed -i '' "s/\"version\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"version\": \"~${VERSION}\"/g"  ${DIR}/../demo-shell-ng2/package.json

From ba9ac5c4690c58fd3e41be8a6cad6e84ae80134e Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Tue, 23 May 2017 16:59:18 +0100
Subject: [PATCH 62/72] gnu mode change version script for sed incompatibility

---
 scripts/update-version.sh | 82 ++++++++++++++++++++++++---------------
 1 file changed, 50 insertions(+), 32 deletions(-)

diff --git a/scripts/update-version.sh b/scripts/update-version.sh
index e1903bb254..bb87ab6881 100755
--- a/scripts/update-version.sh
+++ b/scripts/update-version.sh
@@ -2,6 +2,7 @@
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 eval JS_API=true
+eval GNU=false
 
 eval projects=( "ng2-alfresco-core"
     "ng2-alfresco-datatable"
@@ -28,6 +29,7 @@ show_help() {
     echo ""
     echo "-sj or -sjsapi  don't update js-api version"
     echo "-v or -version  version to update"
+    echo "-gnu for gnu"
 }
 
 skip_js() {
@@ -35,6 +37,11 @@ skip_js() {
     JS_API=false
 }
 
+gnu_mode() {
+    echo "====== GNU MODE ====="
+    GNU=true
+}
+
 version_change() {
     echo "====== New version $1 ====="
     VERSION=$1
@@ -44,55 +51,56 @@ version_change() {
 update_component_version() {
    echo "====== UPDATE PACKAGE VERSION of ${PACKAGE} to ${VERSION} version in all the package.json ======"
    DESTDIR="$DIR/../ng2-components/${1}"
-   sed -i '' "s/\"version\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"version\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
+   sed "${sedi[@]}" "s/\"version\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"version\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
 }
 
 update_component_dependency_version(){
-   echo "====== UPDATE DEPENDENCY VERSION of ${1} to ${VERSION} in ${1}======"
    DESTDIR="$DIR/../ng2-components/${1}"
 
-   for PACKAGETOCHANGE in ${projects[@]}
-   do
-       sed -i '' "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
+   for (( j=0; j<${projectslength}; j++ ));
+    do
+       echo "====== UPDATE DEPENDENCY VERSION of ${projects[$j]} to ~${VERSION} in ${1}======"
 
-       echo "====== UPDATE DEPENDENCY VERSION of ${1} to ~${VERSION} in ${1}======"
-       sed -i '' "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/package.json
+       sed "${sedi[@]}" "s/\"${projects[$j]}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${projects[$j]}\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
+       sed "${sedi[@]}" "s/\"${projects[$j]}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${projects[$j]}\": \"~${VERSION}\"/g"  ${DESTDIR}/package.json
 
-       echo "====== UPDATE DEPENDENCY VERSION of ${1} to ${VERSION} in ${1} DEMO ======"
-       sed -i '' "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/demo/package.json
+       if [[ "${1}" != "ng2-alfresco-core" ]]
+       then
+        echo "====== UPDATE DEPENDENCY VERSION of ${projects[$j]} to ~${VERSION} in ${1} DEMO ======"
+        sed "${sedi[@]}" "s/\"${projects[$j]}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${projects[$j]}\": \"${VERSION}\"/g"  ${DESTDIR}/demo/package.json
+        sed "${sedi[@]}" "s/\"${projects[$j]}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${projects[$j]}\": \"~${VERSION}\"/g"  ${DESTDIR}/demo/package.json
+       fi
 
-       echo "====== UPDATE DEPENDENCY VERSION of ${1} to ~${VERSION} in ${1} DEMO ======"
-       sed -i '' "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/demo/package.json
-   done
+     done
 }
 
 update_component_js_version(){
-   echo "====== UPDATE DEPENDENCY VERSION of alfresco-js-api in ${1} to ${VERSION} in ${1}======"
+   echo "====== UPDATE DEPENDENCY VERSION of alfresco-js-api in ${1} to ${VERSION} ======"
    DESTDIR="$DIR/../ng2-components/${1}"
 
    PACKAGETOCHANGE="alfresco-js-api"
-   sed -i '' "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
 
-   echo "====== UPDATE DEPENDENCY VERSION of ${1} to ~${VERSION} in ${1}======"
-   sed -i '' "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/package.json
+   echo "====== UPDATE DEPENDENCY VERSION of alfresco-js-api to ~${VERSION} in ${1}======"
 
-   echo "====== UPDATE DEPENDENCY VERSION of ${1} to ${VERSION} in ${1} DEMO ======"
-   sed -i '' "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/demo/package.json
+   sed "${sedi[@]}" "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
+   sed "${sedi[@]}" "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/package.json
 
-   echo "====== UPDATE DEPENDENCY VERSION of ${1} to ~${VERSION} in ${1} DEMO ======"
-   sed -i '' "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/demo/package.json
+   echo "====== UPDATE DEPENDENCY VERSION of alfresco-js-api to ${VERSION} in ${1} DEMO ======"
+
+   sed "${sedi[@]}" "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/demo/package.json
+   sed "${sedi[@]}" "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/demo/package.json
 }
 
 update_demo_shell_dependency_version(){
 
-   for PACKAGETOCHANGE in ${projects[@]}
-   do
-    echo "====== UPDATE VERSION OF DEMO-SHELL to ${PACKAGETOCHANGE} version ${VERSION} ======"
+   for (( k=0; j<${projectslength}; k++ ));
+    do
+    echo "====== UPDATE VERSION OF DEMO-SHELL to ${projects[$k]} version ${VERSION} ======"
     DESTDIR="$DIR/../demo-shell-ng2/"
-    sed -i '' "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
+    sed "${sedi[@]}" "s/\"${projects[$k]}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${projects[$k]}\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
 
     echo "====== UPDATE DEPENDENCY VERSION of ${1} to ~${VERSION} in ${DESTDIR}======"
-    sed -i '' "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/package.json
+    sed "${sedi[@]}" "s/\"${projects[$k]}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${projects[$k]}\": \"~${VERSION}\"/g"  ${DESTDIR}/package.json
    done
 }
 
@@ -101,10 +109,10 @@ update_demo_shell_js_version(){
     DESTDIR="$DIR/../demo-shell-ng2/"
     PACKAGETOCHANGE="alfresco-js-api"
 
-    sed -i '' "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
+    sed "${sedi[@]}" "s/\"${PACKAGETOCHANGE}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"${VERSION}\"/g"  ${DESTDIR}/package.json
 
     echo "====== UPDATE DEPENDENCY VERSION of ${1} to ~${VERSION} in ${DESTDIR}======"
-    sed -i '' "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/package.json
+    sed "${sedi[@]}" "s/\"${PACKAGETOCHANGE}\": \"~[0-9]\\.[0-9]\\.[0-9]\"/\"${PACKAGETOCHANGE}\": \"~${VERSION}\"/g"  ${DESTDIR}/package.json
 }
 
 
@@ -113,10 +121,16 @@ while [[ $1  == -* ]]; do
       -h|--help|-\?) show_help; exit 0;;
       -v|version) version_change $2; shift 2;;
       -sj|sjsapi) skip_js; shift;;
+      -gnu) gnu_mode; shift;;
       -*) shift;;
     esac
 done
 
+if $GNU; then
+ sedi='-i'
+else
+ sedi=('-i' '')
+fi
 
 if [[ "${VERSION}" == "" ]]
 then
@@ -128,13 +142,17 @@ cd "$DIR/../"
 
 echo "====== UPDATE COMPONENTS ======"
 
-for PACKAGE in ${projects[@]}
+projectslength=${#projects[@]}
+
+# use for loop to read all values and indexes
+for (( i=0; i<${projectslength}; i++ ));
 do
-   update_component_version $PACKAGE
-   update_component_dependency_version $PACKAGE
+   echo "====== UPDATE COMPONENT ${projects[$i]} ======"
+   update_component_version ${projects[$i]}
+   update_component_dependency_version ${projects[$i]}
 
    if $JS_API == true; then
-    update_component_js_version $PACKAGE
+    update_component_js_version ${projects[$i]}
    fi
 done
 
@@ -147,4 +165,4 @@ if $JS_API == true; then
 fi
 
 DESTDIR="$DIR/../demo-shell-ng2/"
-sed -i '' "s/\"version\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"version\": \"${VERSION}\"/g"  ${DIR}/../demo-shell-ng2/package.json
+sed "${sedi[@]}" "s/\"version\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"version\": \"${VERSION}\"/g"  ${DIR}/../demo-shell-ng2/package.json

From 545879f0903b97b3b126dcc8a4855d7098cde2ef Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Tue, 23 May 2017 17:16:26 +0100
Subject: [PATCH 63/72] appveyor split

---
 appveyor.yml | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/appveyor.yml b/appveyor.yml
index e67a197745..11d008ca18 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -9,7 +9,8 @@ environment:
   nodejs_version: "6"
 
   matrix:
-  - COMPONENT_NAME: ng2-components
+  - COMPONENT_NAME: ng2-components-activiti
+  - COMPONENT_NAME: ng2-components-alfresco
   - COMPONENT_NAME: ng2-demo-shell
 
 # Install scripts. (runs after repo cloning)
@@ -17,13 +18,19 @@ install:
   # Get the latest stable version of Node.js or io.js
   - ps: Install-Product node $env:nodejs_version
   # install module
-  - if %COMPONENT_NAME% EQU ng2-components (
+  - if %COMPONENT_NAME% EQU ng2-components-activiti (
               if %APPVEYOR_REPO_BRANCH EQU master
-                (cd scripts && sh npm-build-all.sh -t || exit 1)
+                (cd scripts && sh npm-build-all.sh -t "ng2-activiti*"  || exit 1)
               else
-                (cd scripts && sh npm-build-all.sh -t -gitjsapi development|| exit 1)
+                (cd scripts && sh npm-build-all.sh -t "ng2-activiti*" -gitjsapi development|| exit 1)
     )
-  - if %COMPONENT_NAME% EQU g2-demo-shell (
+  - if %COMPONENT_NAME% EQU ng2-components-alfresco (
+              if %APPVEYOR_REPO_BRANCH EQU master
+                (cd scripts && sh npm-build-all.sh -t "ng2-alfresco*"  || exit 1)
+              else
+                (cd scripts && sh npm-build-all.sh -t "ng2-alfresco*" -gitjsapi development|| exit 1)
+    )
+  - if %COMPONENT_NAME% EQU ng2-demo-shell (
               if %APPVEYOR_REPO_BRANCH EQU master
                 (cd scripts && sh start.sh -t -ss || exit 1)
               else

From 120db7e52cdc61f0cb0183744e69d3e36490b685 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Tue, 23 May 2017 19:18:55 +0100
Subject: [PATCH 64/72] fix prod build demo

---
 demo-shell-ng2/config/webpack.prod.js | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/demo-shell-ng2/config/webpack.prod.js b/demo-shell-ng2/config/webpack.prod.js
index d2a903ea77..a4b9bb3e44 100644
--- a/demo-shell-ng2/config/webpack.prod.js
+++ b/demo-shell-ng2/config/webpack.prod.js
@@ -22,19 +22,6 @@ module.exports = webpackMerge(commonConfig, {
         modules: [helpers.root('node_modules')]
     },
 
-    module: {
-        rules: [
-            {
-                test: /\.ts$/,
-                loader: [
-                    'ts-loader',
-                    'angular2-template-loader'
-                ],
-                exclude: [ /node_modules/, /public/, /resources/, /dist/]
-            }
-        ]
-    },
-
     plugins: [
         new webpack.NoEmitOnErrorsPlugin(),
         new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618

From 9f96f7ea829f25c567f2446f066bf0f43473bd19 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Wed, 24 May 2017 02:20:11 +0100
Subject: [PATCH 65/72] use correct -dev build options appveyor check for
 invalid options start.sh and npm-clean.sh

---
 appveyor.yml         | 2 +-
 scripts/npm-clean.sh | 2 +-
 scripts/start.sh     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/appveyor.yml b/appveyor.yml
index 11d008ca18..0b341ddceb 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -34,7 +34,7 @@ install:
               if %APPVEYOR_REPO_BRANCH EQU master
                 (cd scripts && sh start.sh -t -ss || exit 1)
               else
-                (cd scripts && sh start.sh -d -t -ss -gitjsapi development|| exit 1)
+                (cd scripts && sh start.sh -dev -t -ss -gitjsapi development|| exit 1)
     )
 
 # Don't actually build.
diff --git a/scripts/npm-clean.sh b/scripts/npm-clean.sh
index 94327ba20a..0ac53409cc 100755
--- a/scripts/npm-clean.sh
+++ b/scripts/npm-clean.sh
@@ -36,7 +36,7 @@ while [[ $1  == -* ]]; do
     case "$1" in
       -h|--help|-\?) show_help; exit 0;;
       -sd|--skipDemo) update; shift;;
-      -*) shift;;
+      -*) echo "invalid option: $1" 1>&2; show_help; exit 0;;
     esac
 done
 
diff --git a/scripts/start.sh b/scripts/start.sh
index c7822d4e49..b8ac0537fe 100755
--- a/scripts/start.sh
+++ b/scripts/start.sh
@@ -135,7 +135,7 @@ while [[ $1  == -* ]]; do
       -dist)  enable_dist; shift;;
       -gitjsapi)  enable_js_api_git_link $2; shift 2;;
       -vjsapi)  version_js_api $2; shift 2;;
-      -*) shift;;
+      -*) echo "invalid option: $1" 1>&2; show_help; exit 0;;
     esac
 done
 

From 10b310288a0bed66cf88f5917db951d22fac2094 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Wed, 24 May 2017 10:00:34 +0100
Subject: [PATCH 66/72] upgrade zone.js to fix stack trace errors in console

---
 demo-shell-ng2/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index caf1ae5aae..4dc68fe745 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -68,7 +68,7 @@
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.9",
     "rxjs": "5.1.0",
-    "zone.js": "0.8.4",
+    "zone.js": "0.8.11",
     "dialog-polyfill": "^0.4.7",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",

From 2b755d7ee4f9ab67f419335454ce21189c93fade Mon Sep 17 00:00:00 2001
From: Vito <vito.albano@alfresco.com>
Date: Wed, 24 May 2017 07:43:34 -0700
Subject: [PATCH 67/72] [ADF-673] - text widget value is not updated when the
 mask is not applied (#1900)

---
 .../widgets/text/text-mask.component.ts       |  2 ++
 .../widgets/text/text.widget.spec.ts          | 30 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/text/text-mask.component.ts b/ng2-components/ng2-activiti-form/src/components/widgets/text/text-mask.component.ts
index faf6128b3a..80d3683f65 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/text/text-mask.component.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/text/text-mask.component.ts
@@ -70,6 +70,8 @@ export class InputMaskDirective implements OnChanges, ControlValueAccessor {
         if (this.inputMask && this.inputMask.mask) {
             this.maskValue(this.el.nativeElement.value, this.el.nativeElement.selectionStart,
                 this.inputMask.mask, this.inputMask.isReversed, event.keyCode);
+        } else {
+            this._onChange(this.el.nativeElement.value);
         }
     }
 
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts
index 209f3bffca..b7e26cdc44 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts
@@ -65,6 +65,36 @@ describe('TextWidget', () => {
             TestBed.resetTestingModule();
         });
 
+        describe('and no mask is configured on text element', () => {
+
+            let inputElement: HTMLInputElement;
+
+            beforeEach(() => {
+                textWidget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+                    id: 'text-id',
+                    name: 'text-name',
+                    value: '',
+                    type: FormFieldTypes.TEXT,
+                    readOnly: false
+                });
+
+                fixture.detectChanges();
+                inputElement = <HTMLInputElement>element.querySelector('#text-id');
+            });
+
+            it('should raise ngModelChange event', async(() => {
+                inputElement.value = 'TEXT';
+                expect(textWidget.field.value).toBe('');
+                inputElement.dispatchEvent(new Event('input'));
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    expect(textWidget.field).not.toBeNull();
+                    expect(textWidget.field.value).not.toBeNull();
+                    expect(textWidget.field.value).toBe('TEXT');
+                });
+            }));
+        });
+
         describe('and mask is configured on text element', () => {
 
             let inputElement: HTMLInputElement;

From 0f66ce34725ad10e3efcd5a3202e4e7fd71414ab Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Wed, 24 May 2017 17:03:56 +0100
Subject: [PATCH 68/72] ADF-656 about component fix (#1899)

---
 demo-shell-ng2/app/components/about/about.component.ts | 2 +-
 demo-shell-ng2/config/webpack.common.js                | 3 +++
 demo-shell-ng2/package.json                            | 4 ++--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/demo-shell-ng2/app/components/about/about.component.ts b/demo-shell-ng2/app/components/about/about.component.ts
index a1766c5f30..f7706caff0 100644
--- a/demo-shell-ng2/app/components/about/about.component.ts
+++ b/demo-shell-ng2/app/components/about/about.component.ts
@@ -35,7 +35,7 @@ export class AboutComponent implements OnInit {
 
     ngOnInit() {
         this.http.get('/versions.json').subscribe(response => {
-            let regexp = new RegExp('^(ng2-activiti|ng2-alfresco|alfresco-)', 'g');
+            let regexp = new RegExp('^(ng2-activiti|ng2-alfresco|alfresco-)');
 
             let alfrescoPackages = Object.keys(response.json().dependencies).filter((val) => {
                 this.logService.log(val);
diff --git a/demo-shell-ng2/config/webpack.common.js b/demo-shell-ng2/config/webpack.common.js
index 02e4627a26..55e39787f8 100644
--- a/demo-shell-ng2/config/webpack.common.js
+++ b/demo-shell-ng2/config/webpack.common.js
@@ -149,6 +149,9 @@ module.exports = {
                 context: 'public',
                 from: '',
                 to: ''
+            },
+            {
+                from: 'versions.json'
             }
         ]),
 
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 4dc68fe745..355972cdb0 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -4,8 +4,8 @@
   "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
-    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "build": "npm run server-versions && rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "npm run server-versions && rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
     "start:dist": "npm run server-versions && wsrv -s dist/ -p 3000 -a 0.0.0.0",
     "start": "npm run server-versions && npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
     "start:dev": "npm run server-versions && npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",

From 5b4aad5d91a3f9a66deb2969ae2059c537abb4ab Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Wed, 24 May 2017 18:06:48 +0100
Subject: [PATCH 69/72] icon type for columns (#1902)

- new 'icon' type for columns to render internal icons
- enable attachment list in the demo shell
---
 .../activiti/activiti-demo.component.html     |  8 ++--
 .../adf-task-attachment-list.component.html   |  2 +-
 .../datatable/datatable.component.html        | 10 ++++-
 .../src/data/object-datatable-adapter.ts      | 41 +++++++++++++++----
 4 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
index 9162e56a70..943a2cacdc 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
@@ -72,10 +72,10 @@
                         </activiti-task-details>
                         <hr>
                         <h5>Attachments</h5>
-                        <!--<adf-task-attachment-list *ngIf="currentTaskId"-->
-                          <!--[taskId]="currentTaskId"-->
-                          <!--(attachmentClick)="onAttachmentClick($event)">-->
-                        <!--</adf-task-attachment-list>-->
+                        <adf-task-attachment-list *ngIf="currentTaskId"
+                          [taskId]="currentTaskId"
+                          (attachmentClick)="onAttachmentClick($event)">
+                        </adf-task-attachment-list>
                     </div>
                 </div>
             </div>
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html
index 74208ad2f7..8eaadbb56f 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html
@@ -5,7 +5,7 @@
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)">
     <data-columns>
-        <data-column key="icon" type="image" srTitle="Thumbnail" [sortable]="false"></data-column>
+        <data-column key="icon" type="icon" srTitle="Thumbnail" [sortable]="false"></data-column>
         <data-column key="name" type="text" title="Name" class="full-width ellipsis-cell" [sortable]="true"></data-column>
         <data-column key="created" type="date" format="shortDate" title="Date"></data-column>
     </data-columns>
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
index b3894ed078..1343f025bc 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@@ -65,8 +65,14 @@
                         <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
                         <img *ngIf="!isIconValue(row, col)"
                             class="image-cell"
-                            alt="{{iconAltTextKey(data.getValue(row, col))|translate}}"
-                            src="{{data.getValue(row, col)}}"
+                            alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
+                            src="{{ data.getValue(row, col) }}"
+                            (error)="onImageLoadingError($event)">
+                    </div>
+                    <div *ngSwitchCase="'icon'" class="cell-value">
+                        <img class="image-cell"
+                            alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
+                            src="{{ data.getValue(row, col) }}"
                             (error)="onImageLoadingError($event)">
                     </div>
                     <div *ngSwitchCase="'date'" class="cell-value" [attr.data-automation-id]="'date_' + data.getValue(row, col)">
diff --git a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts
index cab70d8f9c..0f8a513652 100644
--- a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts
@@ -25,6 +25,33 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
     private _sorting: DataSorting;
     private _rows: DataRow[];
     private _columns: DataColumn[];
+    private icons: string[] = [
+        'empty_doc_lib.svg',
+        'ft_ic_archive.svg',
+        'ft_ic_audio.svg',
+        'ft_ic_database.svg',
+        'ft_ic_document.svg',
+        'ft_ic_ebook.svg',
+        'ft_ic_folder.svg',
+        'ft_ic_folder_empty.svg',
+        'ft_ic_form.svg',
+        'ft_ic_google_docs.svg',
+        'ft_ic_google_drawings.svg',
+        'ft_ic_google_forms.svg',
+        'ft_ic_google_sheets.svg',
+        'ft_ic_google_slides.svg',
+        'ft_ic_miscellaneous.svg',
+        'ft_ic_ms_excel.svg',
+        'ft_ic_ms_powerpoint.svg',
+        'ft_ic_ms_word.svg',
+        'ft_ic_pdf.svg',
+        'ft_ic_presentation.svg',
+        'ft_ic_raster_image.svg',
+        'ft_ic_spreadsheet.svg',
+        'ft_ic_vector_image.svg',
+        'ft_ic_video.svg',
+        'ft_ic_website.svg'
+    ];
 
     selectedRow: DataRow;
 
@@ -111,16 +138,12 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
             }
         }
 
-        if (col.type === 'image') {
-
-            if (col.key === 'icon') {
-
-                let icon = this.getImagePath(row.getValue('icon'));
-                if (icon) {
-                    return icon;
-                }
-                return this.getImagePath('ft_ic_miscellaneous.svg');
+        if (col.type === 'icon') {
+            const iconName = row.getValue(col.key);
+            if (this.icons.indexOf(iconName) > -1) {
+                return this.getImagePath(iconName);
             }
+            return this.getImagePath('ft_ic_miscellaneous.svg');
         }
 
         return value;

From e376b34341d3942ac943cd82cf44b7fb310f658c Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Thu, 25 May 2017 00:51:09 +0100
Subject: [PATCH 70/72] update version library demo folders (#1901)

* update version library demo folders

* fix demo dependency

* fix upload demo and check permissions

* fix images webpack resolution

* fix update versions script
---
 demo-shell-ng2/config/webpack.common.js       |  2 +-
 ng2-components/config/webpack.common.js       |  4 +-
 .../config/webpack.common.js                  |  4 +-
 .../ng2-activiti-analytics/demo/package.json  | 40 ++++----
 .../demo/systemjs.config.js                   |  9 +-
 .../ng2-activiti-analytics/package.json       |  1 +
 .../config/webpack.common.js                  |  4 +-
 .../ng2-activiti-diagrams/demo/package.json   | 38 ++++----
 .../demo/systemjs.config.js                   |  3 +
 .../ng2-activiti-diagrams/package.json        |  1 +
 .../config/webpack.common.js                  |  4 +-
 .../ng2-activiti-form/demo/package.json       | 30 +++---
 .../ng2-activiti-form/demo/systemjs.config.js |  3 +
 ng2-components/ng2-activiti-form/package.json |  1 +
 .../config/webpack.common.js                  |  4 +-
 .../demo/package.json                         | 30 +++---
 .../demo/systemjs.config.js                   |  3 +
 .../ng2-activiti-processlist/package.json     |  1 +
 .../config/webpack.common.js                  |  4 +-
 .../ng2-activiti-tasklist/demo/package.json   | 30 +++---
 .../demo/systemjs.config.js                   |  3 +
 .../ng2-activiti-tasklist/package.json        |  1 +
 .../config/webpack.common.js                  |  4 +-
 .../config/webpack.common.js                  |  4 +-
 .../ng2-alfresco-datatable/demo/package.json  | 31 +++---
 .../demo/systemjs.config.js                   |  3 +
 .../ng2-alfresco-datatable/package.json       |  1 +
 .../config/webpack.common.js                  |  4 +-
 .../demo/package.json                         | 30 +++---
 .../demo/systemjs.config.js                   |  3 +
 .../ng2-alfresco-documentlist/package.json    |  1 +
 .../config/webpack.common.js                  |  4 +-
 .../ng2-alfresco-login/demo/package.json      | 30 +++---
 .../demo/systemjs.config.js                   |  3 +
 .../ng2-alfresco-login/package.json           |  1 +
 .../config/webpack.common.js                  |  4 +-
 .../ng2-alfresco-search/demo/package.json     | 30 +++---
 .../demo/systemjs.config.js                   |  3 +
 .../ng2-alfresco-search/package.json          |  1 +
 .../config/webpack.common.js                  |  4 +-
 .../ng2-alfresco-social/demo/package.json     | 30 +++---
 .../demo/systemjs.config.js                   |  3 +
 .../ng2-alfresco-social/package.json          |  1 +
 .../ng2-alfresco-tag/config/webpack.common.js |  4 +-
 .../ng2-alfresco-tag/demo/package.json        | 42 ++++----
 .../ng2-alfresco-tag/demo/systemjs.config.js  |  3 +
 ng2-components/ng2-alfresco-tag/package.json  |  1 +
 .../config/webpack.common.js                  |  4 +-
 .../ng2-alfresco-upload/demo/package.json     | 30 +++---
 .../ng2-alfresco-upload/demo/src/main.ts      |  8 +-
 .../demo/systemjs.config.js                   |  3 +
 .../ng2-alfresco-upload/package.json          |  1 +
 .../src/components/upload-button.component.ts |  9 +-
 .../config/webpack.common.js                  |  4 +-
 .../ng2-alfresco-userinfo/demo/package.json   | 30 +++---
 .../demo/systemjs.config.js                   |  3 +
 .../ng2-alfresco-userinfo/package.json        |  1 +
 .../config/webpack.common.js                  |  4 +-
 .../ng2-alfresco-viewer/demo/package.json     | 30 +++---
 .../demo/systemjs.config.js                   |  3 +
 .../ng2-alfresco-viewer/package.json          |  1 +
 .../config/webpack.common.js                  |  4 +-
 .../ng2-alfresco-webscript/demo/package.json  | 30 +++---
 .../demo/systemjs.config.js                   |  3 +
 .../ng2-alfresco-webscript/package.json       |  1 +
 scripts/npm-build-all-demo.sh                 | 96 +++++++++++++++++++
 scripts/update-version.sh                     |  4 +-
 67 files changed, 459 insertions(+), 275 deletions(-)
 create mode 100755 scripts/npm-build-all-demo.sh

diff --git a/demo-shell-ng2/config/webpack.common.js b/demo-shell-ng2/config/webpack.common.js
index 55e39787f8..ee7a199828 100644
--- a/demo-shell-ng2/config/webpack.common.js
+++ b/demo-shell-ng2/config/webpack.common.js
@@ -123,7 +123,7 @@ module.exports = {
                 return {
                     context: `../ng2-components/${lib}/bundles/assets/` ,
                     from: '**/*',
-                    to: `bundles/assets/`
+                    to: `assets/`
                 }
             }),
             {
diff --git a/ng2-components/config/webpack.common.js b/ng2-components/config/webpack.common.js
index 67fd8b9440..f05c4ec322 100644
--- a/ng2-components/config/webpack.common.js
+++ b/ng2-components/config/webpack.common.js
@@ -94,8 +94,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-activiti-analytics/config/webpack.common.js b/ng2-components/ng2-activiti-analytics/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-activiti-analytics/config/webpack.common.js
+++ b/ng2-components/ng2-activiti-analytics/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-activiti-analytics/demo/package.json b/ng2-components/ng2-activiti-analytics/demo/package.json
index b149870db0..272da2731e 100644
--- a/ng2-components/ng2-activiti-analytics/demo/package.json
+++ b/ng2-components/ng2-activiti-analytics/demo/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ng2-activiti-diagrams-demo",
+  "name": "ng2-activiti-analytics-demo",
   "description": "Alfresco Angular2 Diagrams Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
@@ -12,7 +12,7 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-activiti-diagrams",
+    "travis": "npm link ng2-alfresco-core ng2-activiti-diagrams ng2-activiti-analytics",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
@@ -32,22 +32,28 @@
     "activiti-diagrams"
   ],
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "zone.js": "0.7.6",
+
+
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
@@ -55,18 +61,16 @@
     "material-design-lite": "1.2.1",
     "chart.js": "2.5.0",
     "md-date-time-picker": "2.2.0",
-    "ng2-charts": "1.1.0",
+    "ng2-charts": "1.5.0",
     "moment": "2.15.1",
     "raphael": "^2.2.6",
-    "ng2-translate": "5.0.0",
-    "alfresco-js-api": "~1.4.0",
-    "ng2-alfresco-core": "1.4.0",
     "ng2-activiti-diagrams": "1.4.0",
     "ng2-activiti-analytics": "1.4.0"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
     "concurrently": "^2.2.0",
     "rimraf": "2.5.2",
     "tslint": "^3.8.1",
diff --git a/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js b/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
index 0b8ca69bc1..07f10a7da3 100644
--- a/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
+++ b/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'rxjs': 'npm:rxjs',
@@ -44,11 +47,11 @@
             },
             'moment': 'npm:moment/min/moment.min.js',
             'ng2-translate': { defaultExtension: 'js' },
-            'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js'},
+            'ng2-charts': { main: './bundles/ng2-charts.umd.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-analytics-diagrams': { main: './bundles/ng2-analytics-diagrams.js', defaultExtension: 'js'},
-            'ng2-analytics-analytics': { main: './bundles/ng2-analytics-analytics.js', defaultExtension: 'js'}
+            'ng2-activiti-diagrams': { main: './bundles/ng2-activiti-diagrams.js', defaultExtension: 'js'},
+            'ng2-activiti-analytics': { main: './bundles/ng2-activiti-analytics.js', defaultExtension: 'js'}
         }
     });
 })(this);
diff --git a/ng2-components/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json
index 691135b2f6..e9a420e520 100644
--- a/ng2-components/ng2-activiti-analytics/package.json
+++ b/ng2-components/ng2-activiti-analytics/package.json
@@ -31,6 +31,7 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/ng2-components/ng2-activiti-diagrams/config/webpack.common.js b/ng2-components/ng2-activiti-diagrams/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-activiti-diagrams/config/webpack.common.js
+++ b/ng2-components/ng2-activiti-diagrams/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-activiti-diagrams/demo/package.json b/ng2-components/ng2-activiti-diagrams/demo/package.json
index 96df7844b5..52a16ae8de 100644
--- a/ng2-components/ng2-activiti-diagrams/demo/package.json
+++ b/ng2-components/ng2-activiti-diagrams/demo/package.json
@@ -12,7 +12,7 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core",
+    "travis": "npm link ng2-alfresco-core ng2-activiti-diagrams",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
@@ -32,32 +32,34 @@
     "activiti-diagrams"
   ],
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
+    "reflect-metadata": "0.1.10",
+    "rxjs": "5.1.0",
+    "systemjs": "0.19.27",
+    "zone.js": "0.7.6",
+
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "intl": "1.2.4",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
     "ng2-activiti-diagrams": "1.4.0",
-    "ng2-alfresco-core": "1.4.0",
-    "ng2-translate": "5.0.0",
-    "raphael": "^2.2.6",
-    "reflect-metadata": "0.1.10",
-    "rxjs": "5.1.0",
-    "systemjs": "0.19.27",
-    "zone.js": "0.7.6"
+    "raphael": "^2.2.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 f34f2f87ad..a3fb7b584d 100644
--- a/ng2-components/ng2-activiti-diagrams/demo/systemjs.config.js
+++ b/ng2-components/ng2-activiti-diagrams/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'rxjs': 'npm:rxjs',
diff --git a/ng2-components/ng2-activiti-diagrams/package.json b/ng2-components/ng2-activiti-diagrams/package.json
index 1b8864ed2e..ee95c39fc4 100644
--- a/ng2-components/ng2-activiti-diagrams/package.json
+++ b/ng2-components/ng2-activiti-diagrams/package.json
@@ -27,6 +27,7 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/ng2-components/ng2-activiti-form/config/webpack.common.js b/ng2-components/ng2-activiti-form/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-activiti-form/config/webpack.common.js
+++ b/ng2-components/ng2-activiti-form/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-activiti-form/demo/package.json b/ng2-components/ng2-activiti-form/demo/package.json
index 5567f382d3..952dc722f7 100644
--- a/ng2-components/ng2-activiti-form/demo/package.json
+++ b/ng2-components/ng2-activiti-form/demo/package.json
@@ -12,7 +12,7 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core",
+    "travis": "npm link ng2-alfresco-core ng2-activiti-form",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
@@ -32,22 +32,27 @@
     "activiti-form"
   ],
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "zone.js": "0.7.6",
+
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
@@ -55,9 +60,6 @@
     "material-design-lite": "1.2.1",
     "moment": "2.15.1",
     "md-date-time-picker": "2.2.0",
-    "ng2-translate": "5.0.0",
-    "alfresco-js-api": "~1.4.0",
-    "ng2-alfresco-core": "1.4.0",
     "ng2-activiti-form": "1.4.0"
   },
   "devDependencies": {
diff --git a/ng2-components/ng2-activiti-form/demo/systemjs.config.js b/ng2-components/ng2-activiti-form/demo/systemjs.config.js
index 1e20c19026..7a7f9a1355 100644
--- a/ng2-components/ng2-activiti-form/demo/systemjs.config.js
+++ b/ng2-components/ng2-activiti-form/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'rxjs': 'npm:rxjs',
diff --git a/ng2-components/ng2-activiti-form/package.json b/ng2-components/ng2-activiti-form/package.json
index 3dc28649b7..8d9a63680a 100644
--- a/ng2-components/ng2-activiti-form/package.json
+++ b/ng2-components/ng2-activiti-form/package.json
@@ -34,6 +34,7 @@
     "activiti"
   ],
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/ng2-components/ng2-activiti-processlist/config/webpack.common.js b/ng2-components/ng2-activiti-processlist/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-activiti-processlist/config/webpack.common.js
+++ b/ng2-components/ng2-activiti-processlist/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-activiti-processlist/demo/package.json b/ng2-components/ng2-activiti-processlist/demo/package.json
index 12d7875f30..235d80ba50 100644
--- a/ng2-components/ng2-activiti-processlist/demo/package.json
+++ b/ng2-components/ng2-activiti-processlist/demo/package.json
@@ -12,7 +12,7 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-form ng2-activiti-tasklist",
+    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-form ng2-activiti-tasklist ng2-activiti-processlist",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
@@ -25,22 +25,27 @@
     "demo"
   ],
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "zone.js": "0.7.6",
+
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
@@ -48,10 +53,7 @@
     "material-design-lite": "1.2.1",
     "moment": "2.15.1",
     "md-date-time-picker": "2.2.0",
-    "ng2-translate": "5.0.0",
-    "alfresco-js-api": "~1.4.0",
     "ng2-activiti-tasklist": "1.4.0",
-    "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0",
     "ng2-activiti-processlist": "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 952fd92e90..fb4d4b00b7 100644
--- a/ng2-components/ng2-activiti-processlist/demo/systemjs.config.js
+++ b/ng2-components/ng2-activiti-processlist/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'moment' : 'npm:moment/min/moment.min.js',
diff --git a/ng2-components/ng2-activiti-processlist/package.json b/ng2-components/ng2-activiti-processlist/package.json
index 582c9a34b9..4a567e46f4 100644
--- a/ng2-components/ng2-activiti-processlist/package.json
+++ b/ng2-components/ng2-activiti-processlist/package.json
@@ -33,6 +33,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/ng2-components/ng2-activiti-tasklist/config/webpack.common.js b/ng2-components/ng2-activiti-tasklist/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-activiti-tasklist/config/webpack.common.js
+++ b/ng2-components/ng2-activiti-tasklist/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-activiti-tasklist/demo/package.json b/ng2-components/ng2-activiti-tasklist/demo/package.json
index 6a4217bd79..9b0d896781 100644
--- a/ng2-components/ng2-activiti-tasklist/demo/package.json
+++ b/ng2-components/ng2-activiti-tasklist/demo/package.json
@@ -12,29 +12,34 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-form",
+    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-form ng2-activiti-tasklist",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "zone.js": "0.7.6",
+
     "intl": "1.2.4",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
@@ -42,9 +47,6 @@
     "material-design-lite": "1.2.1",
     "moment": "2.15.1",
     "md-date-time-picker": "2.2.0",
-    "ng2-translate": "5.0.0",
-    "alfresco-js-api": "~1.4.0",
-    "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0",
     "ng2-activiti-tasklist": "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 772a76380a..bf04333fc7 100644
--- a/ng2-components/ng2-activiti-tasklist/demo/systemjs.config.js
+++ b/ng2-components/ng2-activiti-tasklist/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'moment' : 'npm:moment/min/moment.min.js',
diff --git a/ng2-components/ng2-activiti-tasklist/package.json b/ng2-components/ng2-activiti-tasklist/package.json
index ec63f4b06a..493eb0a5f3 100644
--- a/ng2-components/ng2-activiti-tasklist/package.json
+++ b/ng2-components/ng2-activiti-tasklist/package.json
@@ -37,6 +37,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/ng2-components/ng2-alfresco-core/config/webpack.common.js b/ng2-components/ng2-alfresco-core/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-alfresco-core/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-core/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-alfresco-datatable/config/webpack.common.js b/ng2-components/ng2-alfresco-datatable/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-alfresco-datatable/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-datatable/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-alfresco-datatable/demo/package.json b/ng2-components/ng2-alfresco-datatable/demo/package.json
index 9cfb151e2a..b542cf8d6c 100644
--- a/ng2-components/ng2-alfresco-datatable/demo/package.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/package.json
@@ -12,7 +12,7 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core",
+    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
@@ -25,30 +25,33 @@
     }
   ],
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "zone.js": "0.7.6",
+
+    "@angular/upgrade": "2.4.7",
     "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": "5.0.0",
-    "alfresco-js-api": "~1.4.0",
-    "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0"
   },
   "devDependencies": {
diff --git a/ng2-components/ng2-alfresco-datatable/demo/systemjs.config.js b/ng2-components/ng2-alfresco-datatable/demo/systemjs.config.js
index bf0730f3cf..4fa982b2e9 100644
--- a/ng2-components/ng2-alfresco-datatable/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-datatable/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'rxjs': 'npm:rxjs',
diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json
index 5b87b26137..c833c419fc 100644
--- a/ng2-components/ng2-alfresco-datatable/package.json
+++ b/ng2-components/ng2-alfresco-datatable/package.json
@@ -33,6 +33,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/ng2-components/ng2-alfresco-documentlist/config/webpack.common.js b/ng2-components/ng2-alfresco-documentlist/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-alfresco-documentlist/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-documentlist/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/package.json b/ng2-components/ng2-alfresco-documentlist/demo/package.json
index e72980bff6..51a174b717 100644
--- a/ng2-components/ng2-alfresco-documentlist/demo/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/demo/package.json
@@ -12,32 +12,34 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable",
+    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-alfresco-documentlist",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "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",
     "ng2-alfresco-documentlist": "1.4.0",
     "material-design-icons": "2.2.3",
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js b/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js
index 70b1c64bca..cc70793519 100644
--- a/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'rxjs': 'npm:rxjs',
diff --git a/ng2-components/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json
index d505dc3b20..622f4466c1 100644
--- a/ng2-components/ng2-alfresco-documentlist/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/package.json
@@ -41,6 +41,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/ng2-components/ng2-alfresco-login/config/webpack.common.js b/ng2-components/ng2-alfresco-login/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-alfresco-login/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-login/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-alfresco-login/demo/package.json b/ng2-components/ng2-alfresco-login/demo/package.json
index 5a4e6f8ee2..8795003a03 100644
--- a/ng2-components/ng2-alfresco-login/demo/package.json
+++ b/ng2-components/ng2-alfresco-login/demo/package.json
@@ -12,7 +12,7 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core",
+    "travis": "npm link ng2-alfresco-core ng2-alfresco-login",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
@@ -47,30 +47,32 @@
     "alfresco"
   ],
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "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": "5.0.0",
-    "alfresco-js-api": "~1.4.0",
-    "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-login": "1.4.0"
   },
   "devDependencies": {
diff --git a/ng2-components/ng2-alfresco-login/demo/systemjs.config.js b/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
index 0991c99dcf..49c8cd8c90 100644
--- a/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'rxjs': 'npm:rxjs',
diff --git a/ng2-components/ng2-alfresco-login/package.json b/ng2-components/ng2-alfresco-login/package.json
index 3b6b4ac985..9389358f62 100644
--- a/ng2-components/ng2-alfresco-login/package.json
+++ b/ng2-components/ng2-alfresco-login/package.json
@@ -45,6 +45,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/ng2-components/ng2-alfresco-search/config/webpack.common.js b/ng2-components/ng2-alfresco-search/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-alfresco-search/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-search/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-alfresco-search/demo/package.json b/ng2-components/ng2-alfresco-search/demo/package.json
index 2e8fb4606e..da03b8522e 100644
--- a/ng2-components/ng2-alfresco-search/demo/package.json
+++ b/ng2-components/ng2-alfresco-search/demo/package.json
@@ -12,7 +12,7 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-alfresco-documentlist",
+    "travis": "npm link  ng2-alfresco-search ng2-alfresco-core ng2-alfresco-datatable ng2-alfresco-documentlist",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
@@ -47,30 +47,32 @@
     "alfresco"
   ],
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "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": "5.0.0",
-    "alfresco-js-api": "~1.4.0",
-    "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0",
     "ng2-alfresco-documentlist": "1.4.0",
     "ng2-alfresco-search": "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 353cef68ae..527c9b8a1f 100644
--- a/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'rxjs': 'npm:rxjs',
diff --git a/ng2-components/ng2-alfresco-search/package.json b/ng2-components/ng2-alfresco-search/package.json
index 73f0ee291f..292d4cad14 100644
--- a/ng2-components/ng2-alfresco-search/package.json
+++ b/ng2-components/ng2-alfresco-search/package.json
@@ -41,6 +41,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/ng2-components/ng2-alfresco-social/config/webpack.common.js b/ng2-components/ng2-alfresco-social/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-alfresco-social/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-social/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-alfresco-social/demo/package.json b/ng2-components/ng2-alfresco-social/demo/package.json
index c833061861..5a55e194b7 100644
--- a/ng2-components/ng2-alfresco-social/demo/package.json
+++ b/ng2-components/ng2-alfresco-social/demo/package.json
@@ -12,37 +12,39 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core",
+    "travis": "npm link ng2-alfresco-core ng2-alfresco-social",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "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": "5.0.0",
-    "alfresco-js-api": "~1.4.0",
-    "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-social": "1.4.0"
   },
   "devDependencies": {
diff --git a/ng2-components/ng2-alfresco-social/demo/systemjs.config.js b/ng2-components/ng2-alfresco-social/demo/systemjs.config.js
index b5e32d070a..2a250d51b1 100644
--- a/ng2-components/ng2-alfresco-social/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-social/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'rxjs': 'npm:rxjs',
diff --git a/ng2-components/ng2-alfresco-social/package.json b/ng2-components/ng2-alfresco-social/package.json
index 304fc0b769..98740e4c17 100644
--- a/ng2-components/ng2-alfresco-social/package.json
+++ b/ng2-components/ng2-alfresco-social/package.json
@@ -21,6 +21,7 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/ng2-components/ng2-alfresco-tag/config/webpack.common.js b/ng2-components/ng2-alfresco-tag/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-alfresco-tag/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-tag/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-alfresco-tag/demo/package.json b/ng2-components/ng2-alfresco-tag/demo/package.json
index 78581fc354..0ef7cec36e 100644
--- a/ng2-components/ng2-alfresco-tag/demo/package.json
+++ b/ng2-components/ng2-alfresco-tag/demo/package.json
@@ -12,42 +12,38 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core",
+    "travis": "npm link ng2-alfresco-core ng2-alfresco-tag",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "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": "5.0.0",
-    "alfresco-js-api": "~1.4.0",
-    "ng2-alfresco-core": "1.4.0",
-    "ng2-alfresco-tag": "1.4.0"
+    "zone.js": "0.7.6"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
     "concurrently": "^2.2.0",
     "rimraf": "2.5.2",
     "tslint": "3.15.1",
diff --git a/ng2-components/ng2-alfresco-tag/demo/systemjs.config.js b/ng2-components/ng2-alfresco-tag/demo/systemjs.config.js
index 6d080473a1..d4c4f382bc 100644
--- a/ng2-components/ng2-alfresco-tag/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-tag/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'rxjs': 'npm:rxjs',
diff --git a/ng2-components/ng2-alfresco-tag/package.json b/ng2-components/ng2-alfresco-tag/package.json
index 8170c978eb..aca0abc0ef 100644
--- a/ng2-components/ng2-alfresco-tag/package.json
+++ b/ng2-components/ng2-alfresco-tag/package.json
@@ -21,6 +21,7 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/ng2-components/ng2-alfresco-upload/config/webpack.common.js b/ng2-components/ng2-alfresco-upload/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-alfresco-upload/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-upload/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-alfresco-upload/demo/package.json b/ng2-components/ng2-alfresco-upload/demo/package.json
index d539b4ccf9..3765f93ee3 100644
--- a/ng2-components/ng2-alfresco-upload/demo/package.json
+++ b/ng2-components/ng2-alfresco-upload/demo/package.json
@@ -12,7 +12,7 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core",
+    "travis": "npm link ng2-alfresco-core ng2-alfresco-upload",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
@@ -47,30 +47,32 @@
     "alfresco"
   ],
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "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": "5.0.0",
-    "alfresco-js-api": "~1.4.0",
-    "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-upload": "1.4.0"
   },
   "devDependencies": {
diff --git a/ng2-components/ng2-alfresco-upload/demo/src/main.ts b/ng2-components/ng2-alfresco-upload/demo/src/main.ts
index a8c702b244..24f4c65120 100644
--- a/ng2-components/ng2-alfresco-upload/demo/src/main.ts
+++ b/ng2-components/ng2-alfresco-upload/demo/src/main.ts
@@ -42,22 +42,18 @@ import { UploadModule } from 'ng2-alfresco-upload';
                 </div>
                 <div *ngIf="!acceptedFilesTypeShow">
                     <alfresco-upload-button data-automation-id="multiple-file-upload"
-                                            [currentFolderPath]="currentPath"
                                             [multipleFiles]="multipleFileUpload"
                                             [uploadFolders]="folderUpload"
-                                            [versioning] = "versioning"
-                                            (onSuccess)="documentList.reload()">
+                                            [versioning] = "versioning">
                         <div class="mdl-spinner mdl-js-spinner is-active"></div>
                     </alfresco-upload-button>
                 </div>
                 <div *ngIf="acceptedFilesTypeShow">
                     <alfresco-upload-button data-automation-id="multiple-file-upload"
-                                            [currentFolderPath]="currentPath"
                                             acceptedFilesType="{{acceptedFilesType}}"
                                             [multipleFiles]="multipleFileUpload"
                                             [uploadFolders]="folderUpload"
-                                            [versioning] = "versioning"
-                                            (onSuccess)="documentList.reload()">
+                                            [versioning] = "versioning">
                         <div class="mdl-spinner mdl-js-spinner is-active"></div>
                     </alfresco-upload-button>
                 </div>
diff --git a/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js b/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
index c9897420b6..5ac7852681 100644
--- a/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'rxjs': 'npm:rxjs',
diff --git a/ng2-components/ng2-alfresco-upload/package.json b/ng2-components/ng2-alfresco-upload/package.json
index 0d65c5f890..ed1e7bee01 100644
--- a/ng2-components/ng2-alfresco-upload/package.json
+++ b/ng2-components/ng2-alfresco-upload/package.json
@@ -42,6 +42,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
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 84d19f9b9a..4256157030 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
@@ -17,7 +17,7 @@
 
 import { Component, ElementRef, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { Subject } from 'rxjs/Rx';
-import { AlfrescoTranslationService, LogService, NotificationService } from 'ng2-alfresco-core';
+import { AlfrescoTranslationService, LogService, NotificationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
 import { UploadService } from '../services/upload.service';
 import { FileModel } from '../models/file.model';
 import { PermissionModel } from '../models/permissions.model';
@@ -105,13 +105,18 @@ export class UploadButtonComponent implements OnInit, OnChanges {
                 private uploadService: UploadService,
                 private translateService: AlfrescoTranslationService,
                 private logService: LogService,
-                private notificationService: NotificationService) {
+                private notificationService: NotificationService,
+                private settingsService: AlfrescoSettingsService) {
         if (translateService) {
             translateService.addTranslationFolder('ng2-alfresco-upload', 'node_modules/ng2-alfresco-upload/src');
         }
     }
 
     ngOnInit() {
+        this.settingsService.ecmHostSubject.subscribe((hostEcm: string) => {
+            this.checkPermission();
+        });
+
         this.permissionValue.subscribe((permission: boolean) => {
             this.hasPermission = permission;
         });
diff --git a/ng2-components/ng2-alfresco-userinfo/config/webpack.common.js b/ng2-components/ng2-alfresco-userinfo/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-alfresco-userinfo/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-userinfo/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/package.json b/ng2-components/ng2-alfresco-userinfo/demo/package.json
index 460b97c8ff..22e07723b4 100644
--- a/ng2-components/ng2-alfresco-userinfo/demo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/demo/package.json
@@ -12,37 +12,39 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core",
+    "travis": "npm link ng2-alfresco-core ng2-alfresco-login ng2-alfresco-userinfo",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "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": "5.0.0",
-    "alfresco-js-api": "~1.4.0",
-    "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-login": "1.4.0",
     "ng2-alfresco-userinfo": "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 9a8c09d837..284d7d0b4c 100644
--- a/ng2-components/ng2-alfresco-userinfo/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-userinfo/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'rxjs': 'npm:rxjs',
diff --git a/ng2-components/ng2-alfresco-userinfo/package.json b/ng2-components/ng2-alfresco-userinfo/package.json
index 1cad39a289..2cedbc1002 100644
--- a/ng2-components/ng2-alfresco-userinfo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/package.json
@@ -21,6 +21,7 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/ng2-components/ng2-alfresco-viewer/config/webpack.common.js b/ng2-components/ng2-alfresco-viewer/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-alfresco-viewer/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-viewer/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-alfresco-viewer/demo/package.json b/ng2-components/ng2-alfresco-viewer/demo/package.json
index bbbad09958..d0371e51e6 100644
--- a/ng2-components/ng2-alfresco-viewer/demo/package.json
+++ b/ng2-components/ng2-alfresco-viewer/demo/package.json
@@ -12,37 +12,39 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core",
+    "travis": "npm link ng2-alfresco-core ng2-alfresco-viewer",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "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": "5.0.0",
-    "alfresco-js-api": "~1.4.0",
-    "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-viewer": "1.4.0",
     "pdfjs-dist": "1.5.404"
   },
diff --git a/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js b/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
index b37069fb4d..8a17b8f848 100644
--- a/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'rxjs': 'npm:rxjs',
diff --git a/ng2-components/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json
index 56c620ef88..41c1c2e07e 100644
--- a/ng2-components/ng2-alfresco-viewer/package.json
+++ b/ng2-components/ng2-alfresco-viewer/package.json
@@ -36,6 +36,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/ng2-components/ng2-alfresco-webscript/config/webpack.common.js b/ng2-components/ng2-alfresco-webscript/config/webpack.common.js
index 95cd33177e..52a680e87e 100644
--- a/ng2-components/ng2-alfresco-webscript/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-webscript/config/webpack.common.js
@@ -87,8 +87,8 @@ module.exports = {
                     },
                     publicPath: (url, resourcePath)=> {
                         var component = resourcePath.substring(0, resourcePath.indexOf('src'));
-                        var path = resourcePath.replace(component, '').replace('src', 'bundles');
-                        return './' + path + url;
+                        var path = resourcePath.replace(component, '').replace('src/', '');
+                        return path + url;
                     }
                 }
             }
diff --git a/ng2-components/ng2-alfresco-webscript/demo/package.json b/ng2-components/ng2-alfresco-webscript/demo/package.json
index ee378181e2..4a1d831482 100644
--- a/ng2-components/ng2-alfresco-webscript/demo/package.json
+++ b/ng2-components/ng2-alfresco-webscript/demo/package.json
@@ -12,37 +12,39 @@
     "server": "wsrv -o -s -l",
     "build": "npm run tslint && npm run clean-build && npm run tsc",
     "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable",
+    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-alfresco-webscript",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@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/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
     "@angular/material": "2.0.0-beta.1",
-    "@angular/router": "3.4.7",
-    "@angular/upgrade": "2.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": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "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": "5.0.0",
-    "alfresco-js-api": "~1.4.0",
-    "ng2-alfresco-core": "1.4.0",
     "ng2-alfresco-datatable": "1.4.0",
     "ng2-alfresco-webscript": "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 ef3161379c..a106cb4527 100644
--- a/ng2-components/ng2-alfresco-webscript/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-webscript/demo/systemjs.config.js
@@ -22,6 +22,9 @@
             '@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',
+            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
+            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
+            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
             // other libraries
             'rxjs': 'npm:rxjs',
diff --git a/ng2-components/ng2-alfresco-webscript/package.json b/ng2-components/ng2-alfresco-webscript/package.json
index 96b7901a96..73eb80b819 100644
--- a/ng2-components/ng2-alfresco-webscript/package.json
+++ b/ng2-components/ng2-alfresco-webscript/package.json
@@ -21,6 +21,7 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
     "@angular/core": "~4.0.0",
diff --git a/scripts/npm-build-all-demo.sh b/scripts/npm-build-all-demo.sh
new file mode 100755
index 0000000000..9a8f9e73df
--- /dev/null
+++ b/scripts/npm-build-all-demo.sh
@@ -0,0 +1,96 @@
+#!/usr/bin/env bash
+
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+eval EXEC_GIT_NPM_INSTALL_JSAPI=false
+eval EXEC_BUILD=true
+eval EXEC_INSTALL=true
+
+eval projects=(
+    "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-social"
+    "ng2-alfresco-tag"
+    "ng2-alfresco-social"
+    "ng2-alfresco-upload"
+    "ng2-alfresco-viewer"
+    "ng2-alfresco-webscript"
+    "ng2-alfresco-userinfo" )
+
+enable_js_api_git_link() {
+    GIT_ISH='git://github.com/Alfresco/alfresco-js-api.git#'$1
+    EXEC_GIT_NPM_INSTALL_JSAPI=true
+}
+
+show_help() {
+    echo "Usage: npm-build-all-demo.sh"
+    echo ""
+    echo "-t or -test build all your local component and run also the test on them , this parameter accept also a wildecard to execute test for example -t "ng2-alfresco-core" "
+    echo "-gitjsapi to build all the components against a commit-ish version of the JS-API"
+}
+
+exclude_build(){
+    EXEC_BUILD=false
+}
+
+exec_install(){
+    EXEC_INSTALL=false
+}
+
+while [[ $1 == -* ]]; do
+    case "$1" in
+      -h|--help|-\?) show_help; exit 0;;
+      -si|--skipinstall)  exec_install; shift;;
+      -sb|--skipbuild)  exclude_build; shift;;
+      -gitjsapi)  enable_js_api_git_link $2; shift 2;;
+      -*) echo "invalid option: $1" 1>&2; show_help; exit 1;;
+    esac
+done
+
+cd "$DIR/../ng2-components/"
+
+if $EXEC_INSTALL == true; then
+    echo "====== Regenerate global ng2-components package.json ====="
+    npm install package-json-merge
+    npm run pkg-build
+    echo "====== Install ng2-components dependencies ====="
+    npm install
+
+    if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
+      echo "====== Use the alfresco JS-API  '$GIT_ISH'====="
+      npm install $GIT_ISH
+      cd "$DIR/../ng2-components/node_modules/alfresco-js-api"
+      npm install
+      cd "$DIR/../ng2-components/"
+    fi
+fi
+
+if $EXEC_BUILD == true; then
+    echo "====== Build ng2-components ====="
+    npm run build || exit 1
+fi
+
+for PACKAGE in ${projects[@]}
+do
+  DESTDIR="$DIR/../ng2-components/$PACKAGE/demo"
+  if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
+      echo "====== Use the alfresco JS-API  '$GIT_ISH' in $PACKAGE demo ====="
+      cd $DESTDIR
+      npm install $GIT_ISH
+      cd "$DIR/../ng2-components/$PACKAGE/demo/node_modules/alfresco-js-api"
+      npm install
+  fi
+  cd $DESTDIR
+
+  npm link
+  npm run travis
+done
+
diff --git a/scripts/update-version.sh b/scripts/update-version.sh
index bb87ab6881..06bdc127b8 100755
--- a/scripts/update-version.sh
+++ b/scripts/update-version.sh
@@ -93,8 +93,8 @@ update_component_js_version(){
 
 update_demo_shell_dependency_version(){
 
-   for (( k=0; j<${projectslength}; k++ ));
-    do
+   for (( k=0; k<${projectslength}; k++ ));
+   do
     echo "====== UPDATE VERSION OF DEMO-SHELL to ${projects[$k]} version ${VERSION} ======"
     DESTDIR="$DIR/../demo-shell-ng2/"
     sed "${sedi[@]}" "s/\"${projects[$k]}\": \"[0-9]\\.[0-9]\\.[0-9]\"/\"${projects[$k]}\": \"${VERSION}\"/g"  ${DESTDIR}/package.json

From c751c28bbd43680f2b38153c0117f1106ee64e9d Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Thu, 25 May 2017 11:34:03 +0100
Subject: [PATCH 71/72] update 1.5.0 version (#1903)

---
 demo-shell-ng2/package.json                   | 36 +++++++++----------
 .../ng2-activiti-analytics/demo/package.json  |  8 ++---
 .../ng2-activiti-analytics/package.json       |  8 ++---
 .../ng2-activiti-diagrams/demo/package.json   |  6 ++--
 .../ng2-activiti-diagrams/package.json        |  6 ++--
 .../ng2-activiti-form/demo/package.json       |  6 ++--
 ng2-components/ng2-activiti-form/package.json |  6 ++--
 .../demo/package.json                         | 10 +++---
 .../ng2-activiti-processlist/package.json     | 12 +++----
 .../ng2-activiti-tasklist/demo/package.json   |  8 ++---
 .../ng2-activiti-tasklist/package.json        | 10 +++---
 ng2-components/ng2-alfresco-core/package.json |  4 +--
 .../ng2-alfresco-datatable/demo/package.json  |  6 ++--
 .../ng2-alfresco-datatable/package.json       |  6 ++--
 .../demo/package.json                         |  8 ++---
 .../ng2-alfresco-documentlist/package.json    |  8 ++---
 .../ng2-alfresco-login/demo/package.json      |  6 ++--
 .../ng2-alfresco-login/package.json           |  6 ++--
 .../ng2-alfresco-search/demo/package.json     | 10 +++---
 .../ng2-alfresco-search/package.json          | 10 +++---
 .../ng2-alfresco-social/demo/package.json     |  6 ++--
 .../ng2-alfresco-social/package.json          |  6 ++--
 .../ng2-alfresco-tag/demo/package.json        |  4 +--
 ng2-components/ng2-alfresco-tag/package.json  |  6 ++--
 .../ng2-alfresco-upload/demo/package.json     |  6 ++--
 .../ng2-alfresco-upload/package.json          |  6 ++--
 .../ng2-alfresco-userinfo/demo/package.json   |  8 ++---
 .../ng2-alfresco-userinfo/package.json        |  6 ++--
 .../ng2-alfresco-viewer/demo/package.json     |  6 ++--
 .../ng2-alfresco-viewer/package.json          |  6 ++--
 .../ng2-alfresco-webscript/demo/package.json  |  8 ++---
 .../ng2-alfresco-webscript/package.json       |  8 ++---
 32 files changed, 128 insertions(+), 128 deletions(-)

diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 355972cdb0..08469df2ef 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -1,7 +1,7 @@
 {
   "name": "Alfresco-Angular2-Demo",
   "description": "Demo shell for Alfresco Angular2 components",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "build": "npm run server-versions && rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
@@ -82,23 +82,23 @@
     "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",
-    "ng2-alfresco-core": "1.4.0",
-    "ng2-alfresco-datatable": "1.4.0",
-    "ng2-alfresco-documentlist": "1.4.0",
-    "ng2-alfresco-login": "1.4.0",
-    "ng2-alfresco-search": "1.4.0",
-    "ng2-alfresco-tag": "1.4.0",
-    "ng2-alfresco-social": "1.4.0",
-    "ng2-alfresco-upload": "1.4.0",
-    "ng2-alfresco-userinfo": "1.4.0",
-    "ng2-alfresco-viewer": "1.4.0",
-    "ng2-alfresco-webscript": "1.4.0"
+    "alfresco-js-api": "~1.5.0",
+    "ng2-activiti-analytics": "1.5.0",
+    "ng2-activiti-diagrams": "1.5.0",
+    "ng2-activiti-form": "1.5.0",
+    "ng2-activiti-processlist": "1.5.0",
+    "ng2-activiti-tasklist": "1.5.0",
+    "ng2-alfresco-core": "1.5.0",
+    "ng2-alfresco-datatable": "1.5.0",
+    "ng2-alfresco-documentlist": "1.5.0",
+    "ng2-alfresco-login": "1.5.0",
+    "ng2-alfresco-search": "1.5.0",
+    "ng2-alfresco-tag": "1.5.0",
+    "ng2-alfresco-social": "1.5.0",
+    "ng2-alfresco-upload": "1.5.0",
+    "ng2-alfresco-userinfo": "1.5.0",
+    "ng2-alfresco-viewer": "1.5.0",
+    "ng2-alfresco-webscript": "1.5.0"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
diff --git a/ng2-components/ng2-activiti-analytics/demo/package.json b/ng2-components/ng2-activiti-analytics/demo/package.json
index 272da2731e..e1bab4ae48 100644
--- a/ng2-components/ng2-activiti-analytics/demo/package.json
+++ b/ng2-components/ng2-activiti-analytics/demo/package.json
@@ -43,10 +43,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -64,8 +64,8 @@
     "ng2-charts": "1.5.0",
     "moment": "2.15.1",
     "raphael": "^2.2.6",
-    "ng2-activiti-diagrams": "1.4.0",
-    "ng2-activiti-analytics": "1.4.0"
+    "ng2-activiti-diagrams": "1.5.0",
+    "ng2-activiti-analytics": "1.5.0"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.34",
diff --git a/ng2-components/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json
index e9a420e520..cf97546ca1 100644
--- a/ng2-components/ng2-activiti-analytics/package.json
+++ b/ng2-components/ng2-activiti-analytics/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-activiti-analytics",
   "description": "Activiti Angular2 Analytics Component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -42,14 +42,14 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "chart.js": "2.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "md-date-time-picker": "2.2.0",
     "moment": "2.15.1",
-    "ng2-activiti-diagrams": "1.4.0",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-activiti-diagrams": "1.5.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-charts": "1.5.0",
     "ng2-translate": "5.0.0",
     "raphael": "2.2.7",
diff --git a/ng2-components/ng2-activiti-diagrams/demo/package.json b/ng2-components/ng2-activiti-diagrams/demo/package.json
index 52a16ae8de..fe3e7744bf 100644
--- a/ng2-components/ng2-activiti-diagrams/demo/package.json
+++ b/ng2-components/ng2-activiti-diagrams/demo/package.json
@@ -43,10 +43,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -58,7 +58,7 @@
     "intl": "1.2.4",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-activiti-diagrams": "1.4.0",
+    "ng2-activiti-diagrams": "1.5.0",
     "raphael": "^2.2.6"
   },
   "devDependencies": {
diff --git a/ng2-components/ng2-activiti-diagrams/package.json b/ng2-components/ng2-activiti-diagrams/package.json
index ee95c39fc4..e9325cb0df 100644
--- a/ng2-components/ng2-activiti-diagrams/package.json
+++ b/ng2-components/ng2-activiti-diagrams/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-activiti-diagrams",
   "description": "Activiti Angular2 Diagrams Component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -38,10 +38,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "raphael": "^2.2.6",
     "reflect-metadata": "0.1.10",
diff --git a/ng2-components/ng2-activiti-form/demo/package.json b/ng2-components/ng2-activiti-form/demo/package.json
index 952dc722f7..15f537cd94 100644
--- a/ng2-components/ng2-activiti-form/demo/package.json
+++ b/ng2-components/ng2-activiti-form/demo/package.json
@@ -43,10 +43,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -60,7 +60,7 @@
     "material-design-lite": "1.2.1",
     "moment": "2.15.1",
     "md-date-time-picker": "2.2.0",
-    "ng2-activiti-form": "1.4.0"
+    "ng2-activiti-form": "1.5.0"
   },
   "devDependencies": {
     "@types/jasmine": "^2.2.33",
diff --git a/ng2-components/ng2-activiti-form/package.json b/ng2-components/ng2-activiti-form/package.json
index 8d9a63680a..2eaa668290 100644
--- a/ng2-components/ng2-activiti-form/package.json
+++ b/ng2-components/ng2-activiti-form/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-activiti-form",
   "description": "Alfresco Activiti Form Component for Angular 2",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -44,12 +44,12 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.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-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
diff --git a/ng2-components/ng2-activiti-processlist/demo/package.json b/ng2-components/ng2-activiti-processlist/demo/package.json
index 235d80ba50..b65aecae94 100644
--- a/ng2-components/ng2-activiti-processlist/demo/package.json
+++ b/ng2-components/ng2-activiti-processlist/demo/package.json
@@ -36,10 +36,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -53,9 +53,9 @@
     "material-design-lite": "1.2.1",
     "moment": "2.15.1",
     "md-date-time-picker": "2.2.0",
-    "ng2-activiti-tasklist": "1.4.0",
-    "ng2-alfresco-datatable": "1.4.0",
-    "ng2-activiti-processlist": "1.4.0"
+    "ng2-activiti-tasklist": "1.5.0",
+    "ng2-alfresco-datatable": "1.5.0",
+    "ng2-activiti-processlist": "1.5.0"
   },
   "devDependencies": {
     "@types/jasmine": "^2.2.33",
diff --git a/ng2-components/ng2-activiti-processlist/package.json b/ng2-components/ng2-activiti-processlist/package.json
index 4a567e46f4..7914081163 100644
--- a/ng2-components/ng2-activiti-processlist/package.json
+++ b/ng2-components/ng2-activiti-processlist/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-activiti-processlist",
   "description": "Show active processes from the Activiti Process Services suite",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -44,15 +44,15 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "md-date-time-picker": "2.2.0",
     "moment": "2.15.1",
-    "ng2-activiti-form": "1.4.0",
-    "ng2-activiti-tasklist": "1.4.0",
-    "ng2-alfresco-core": "1.4.0",
-    "ng2-alfresco-datatable": "1.4.0",
+    "ng2-activiti-form": "1.5.0",
+    "ng2-activiti-tasklist": "1.5.0",
+    "ng2-alfresco-core": "1.5.0",
+    "ng2-alfresco-datatable": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
diff --git a/ng2-components/ng2-activiti-tasklist/demo/package.json b/ng2-components/ng2-activiti-tasklist/demo/package.json
index 9b0d896781..81f721541c 100644
--- a/ng2-components/ng2-activiti-tasklist/demo/package.json
+++ b/ng2-components/ng2-activiti-tasklist/demo/package.json
@@ -30,10 +30,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -47,8 +47,8 @@
     "material-design-lite": "1.2.1",
     "moment": "2.15.1",
     "md-date-time-picker": "2.2.0",
-    "ng2-alfresco-datatable": "1.4.0",
-    "ng2-activiti-tasklist": "1.4.0"
+    "ng2-alfresco-datatable": "1.5.0",
+    "ng2-activiti-tasklist": "1.5.0"
   },
   "devDependencies": {
     "@types/jasmine": "^2.2.33",
diff --git a/ng2-components/ng2-activiti-tasklist/package.json b/ng2-components/ng2-activiti-tasklist/package.json
index 493eb0a5f3..44909fe9dc 100644
--- a/ng2-components/ng2-activiti-tasklist/package.json
+++ b/ng2-components/ng2-activiti-tasklist/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-activiti-tasklist",
   "description": "Activiti Angular2 Task List Component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -48,14 +48,14 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "md-date-time-picker": "2.2.0",
     "moment": "2.15.1",
-    "ng2-activiti-form": "1.4.0",
-    "ng2-alfresco-core": "1.4.0",
-    "ng2-alfresco-datatable": "1.4.0",
+    "ng2-activiti-form": "1.5.0",
+    "ng2-alfresco-core": "1.5.0",
+    "ng2-alfresco-datatable": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
diff --git a/ng2-components/ng2-alfresco-core/package.json b/ng2-components/ng2-alfresco-core/package.json
index 7f08e15059..0b96fb1ed0 100644
--- a/ng2-components/ng2-alfresco-core/package.json
+++ b/ng2-components/ng2-alfresco-core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-alfresco-core",
   "description": "Alfresco Angular 2 Components core",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -53,7 +53,7 @@
     "@angular/compiler-cli": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "dialog-polyfill": "0.4.7",
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
diff --git a/ng2-components/ng2-alfresco-datatable/demo/package.json b/ng2-components/ng2-alfresco-datatable/demo/package.json
index b542cf8d6c..73f9cd849a 100644
--- a/ng2-components/ng2-alfresco-datatable/demo/package.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/package.json
@@ -36,10 +36,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -52,7 +52,7 @@
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-alfresco-datatable": "1.4.0"
+    "ng2-alfresco-datatable": "1.5.0"
   },
   "devDependencies": {
     "@types/jasmine": "^2.2.33",
diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json
index c833c419fc..75c84ea3dd 100644
--- a/ng2-components/ng2-alfresco-datatable/package.json
+++ b/ng2-components/ng2-alfresco-datatable/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-alfresco-datatable",
   "description": "Alfresco Angular2 DataTable Component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -44,10 +44,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/package.json b/ng2-components/ng2-alfresco-documentlist/demo/package.json
index 51a174b717..6e15b9c75c 100644
--- a/ng2-components/ng2-alfresco-documentlist/demo/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/demo/package.json
@@ -30,18 +30,18 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
     "zone.js": "0.7.6",
 
-    "ng2-alfresco-datatable": "1.4.0",
-    "ng2-alfresco-documentlist": "1.4.0",
+    "ng2-alfresco-datatable": "1.5.0",
+    "ng2-alfresco-documentlist": "1.5.0",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
     "intl": "^1.2.5"
diff --git a/ng2-components/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json
index 622f4466c1..05dfd9a5c8 100644
--- a/ng2-components/ng2-alfresco-documentlist/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-alfresco-documentlist",
   "description": "Alfresco Angular2 Document List Component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -52,11 +52,11 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
-    "ng2-alfresco-datatable": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
+    "ng2-alfresco-datatable": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
diff --git a/ng2-components/ng2-alfresco-login/demo/package.json b/ng2-components/ng2-alfresco-login/demo/package.json
index 8795003a03..e8d5c42c14 100644
--- a/ng2-components/ng2-alfresco-login/demo/package.json
+++ b/ng2-components/ng2-alfresco-login/demo/package.json
@@ -58,10 +58,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -73,7 +73,7 @@
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-alfresco-login": "1.4.0"
+    "ng2-alfresco-login": "1.5.0"
   },
   "devDependencies": {
     "@types/jasmine": "^2.2.33",
diff --git a/ng2-components/ng2-alfresco-login/package.json b/ng2-components/ng2-alfresco-login/package.json
index 9389358f62..58cb974c0a 100644
--- a/ng2-components/ng2-alfresco-login/package.json
+++ b/ng2-components/ng2-alfresco-login/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-alfresco-login",
   "description": "Alfresco Angular2 Login Component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -56,9 +56,9 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
diff --git a/ng2-components/ng2-alfresco-search/demo/package.json b/ng2-components/ng2-alfresco-search/demo/package.json
index da03b8522e..b4984d2904 100644
--- a/ng2-components/ng2-alfresco-search/demo/package.json
+++ b/ng2-components/ng2-alfresco-search/demo/package.json
@@ -58,10 +58,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -73,9 +73,9 @@
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-alfresco-datatable": "1.4.0",
-    "ng2-alfresco-documentlist": "1.4.0",
-    "ng2-alfresco-search": "1.4.0"
+    "ng2-alfresco-datatable": "1.5.0",
+    "ng2-alfresco-documentlist": "1.5.0",
+    "ng2-alfresco-search": "1.5.0"
   },
   "devDependencies": {
     "@types/jasmine": "^2.2.33",
diff --git a/ng2-components/ng2-alfresco-search/package.json b/ng2-components/ng2-alfresco-search/package.json
index 292d4cad14..6aa7fc2442 100644
--- a/ng2-components/ng2-alfresco-search/package.json
+++ b/ng2-components/ng2-alfresco-search/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-alfresco-search",
   "description": "Alfresco Angular2 Search Component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -52,12 +52,12 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.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-alfresco-core": "1.5.0",
+    "ng2-alfresco-datatable": "1.5.0",
+    "ng2-alfresco-documentlist": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
diff --git a/ng2-components/ng2-alfresco-social/demo/package.json b/ng2-components/ng2-alfresco-social/demo/package.json
index 5a55e194b7..6d0dbc3477 100644
--- a/ng2-components/ng2-alfresco-social/demo/package.json
+++ b/ng2-components/ng2-alfresco-social/demo/package.json
@@ -30,10 +30,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -45,7 +45,7 @@
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-alfresco-social": "1.4.0"
+    "ng2-alfresco-social": "1.5.0"
   },
   "devDependencies": {
     "@types/jasmine": "^2.2.33",
diff --git a/ng2-components/ng2-alfresco-social/package.json b/ng2-components/ng2-alfresco-social/package.json
index 98740e4c17..19bb270372 100644
--- a/ng2-components/ng2-alfresco-social/package.json
+++ b/ng2-components/ng2-alfresco-social/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-alfresco-social",
   "description": "Alfresco rating component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -32,10 +32,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "2.5.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.0.0-beta.12",
diff --git a/ng2-components/ng2-alfresco-tag/demo/package.json b/ng2-components/ng2-alfresco-tag/demo/package.json
index 0ef7cec36e..717d173bdd 100644
--- a/ng2-components/ng2-alfresco-tag/demo/package.json
+++ b/ng2-components/ng2-alfresco-tag/demo/package.json
@@ -30,10 +30,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
diff --git a/ng2-components/ng2-alfresco-tag/package.json b/ng2-components/ng2-alfresco-tag/package.json
index aca0abc0ef..6f531c7887 100644
--- a/ng2-components/ng2-alfresco-tag/package.json
+++ b/ng2-components/ng2-alfresco-tag/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-alfresco-tag",
   "description": "Alfresco tag component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -32,10 +32,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
diff --git a/ng2-components/ng2-alfresco-upload/demo/package.json b/ng2-components/ng2-alfresco-upload/demo/package.json
index 3765f93ee3..6752088815 100644
--- a/ng2-components/ng2-alfresco-upload/demo/package.json
+++ b/ng2-components/ng2-alfresco-upload/demo/package.json
@@ -58,10 +58,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -73,7 +73,7 @@
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-alfresco-upload": "1.4.0"
+    "ng2-alfresco-upload": "1.5.0"
   },
   "devDependencies": {
     "@types/jasmine": "^2.2.33",
diff --git a/ng2-components/ng2-alfresco-upload/package.json b/ng2-components/ng2-alfresco-upload/package.json
index ed1e7bee01..5baf9bead1 100644
--- a/ng2-components/ng2-alfresco-upload/package.json
+++ b/ng2-components/ng2-alfresco-upload/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-alfresco-upload",
   "description": "Alfresco Angular2 Upload Component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -53,10 +53,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/package.json b/ng2-components/ng2-alfresco-userinfo/demo/package.json
index 22e07723b4..b4d437a03d 100644
--- a/ng2-components/ng2-alfresco-userinfo/demo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/demo/package.json
@@ -30,10 +30,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -45,8 +45,8 @@
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-alfresco-login": "1.4.0",
-    "ng2-alfresco-userinfo": "1.4.0"
+    "ng2-alfresco-login": "1.5.0",
+    "ng2-alfresco-userinfo": "1.5.0"
   },
   "devDependencies": {
     "@types/jasmine": "^2.2.33",
diff --git a/ng2-components/ng2-alfresco-userinfo/package.json b/ng2-components/ng2-alfresco-userinfo/package.json
index 2cedbc1002..2da1d4dd7d 100644
--- a/ng2-components/ng2-alfresco-userinfo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-alfresco-userinfo",
   "description": "Alfresco User Info component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -32,10 +32,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
diff --git a/ng2-components/ng2-alfresco-viewer/demo/package.json b/ng2-components/ng2-alfresco-viewer/demo/package.json
index d0371e51e6..8690ac4c79 100644
--- a/ng2-components/ng2-alfresco-viewer/demo/package.json
+++ b/ng2-components/ng2-alfresco-viewer/demo/package.json
@@ -30,10 +30,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -45,7 +45,7 @@
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-alfresco-viewer": "1.4.0",
+    "ng2-alfresco-viewer": "1.5.0",
     "pdfjs-dist": "1.5.404"
   },
   "devDependencies": {
diff --git a/ng2-components/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json
index 41c1c2e07e..0fd3e7b8dc 100644
--- a/ng2-components/ng2-alfresco-viewer/package.json
+++ b/ng2-components/ng2-alfresco-viewer/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-alfresco-viewer",
   "description": "Alfresco documents viewer",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -47,10 +47,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "pdfjs-dist": "1.5.404",
     "reflect-metadata": "0.1.10",
diff --git a/ng2-components/ng2-alfresco-webscript/demo/package.json b/ng2-components/ng2-alfresco-webscript/demo/package.json
index 4a1d831482..3f59e22235 100644
--- a/ng2-components/ng2-alfresco-webscript/demo/package.json
+++ b/ng2-components/ng2-alfresco-webscript/demo/package.json
@@ -30,10 +30,10 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -45,8 +45,8 @@
     "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "ng2-alfresco-datatable": "1.4.0",
-    "ng2-alfresco-webscript": "1.4.0"
+    "ng2-alfresco-datatable": "1.5.0",
+    "ng2-alfresco-webscript": "1.5.0"
   },
   "devDependencies": {
     "@types/jasmine": "^2.2.33",
diff --git a/ng2-components/ng2-alfresco-webscript/package.json b/ng2-components/ng2-alfresco-webscript/package.json
index 73eb80b819..59565594a0 100644
--- a/ng2-components/ng2-alfresco-webscript/package.json
+++ b/ng2-components/ng2-alfresco-webscript/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-alfresco-webscript",
   "description": "Alfresco webscript executor",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
@@ -32,11 +32,11 @@
     "@angular/router": "~4.0.0",
 
     "@angular/material": "2.0.0-beta.1",
-    "alfresco-js-api": "~1.4.0",
+    "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ng2-alfresco-core": "1.4.0",
-    "ng2-alfresco-datatable": "1.4.0",
+    "ng2-alfresco-core": "1.5.0",
+    "ng2-alfresco-datatable": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",

From 81270d3a32e1110d0de35ba671d7c72b48ebee6e Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Thu, 25 May 2017 14:16:55 +0100
Subject: [PATCH 72/72] fix image in dist

---
 demo-shell-ng2/config/webpack.prod.js | 28 +++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/demo-shell-ng2/config/webpack.prod.js b/demo-shell-ng2/config/webpack.prod.js
index a4b9bb3e44..8ed049c3cb 100644
--- a/demo-shell-ng2/config/webpack.prod.js
+++ b/demo-shell-ng2/config/webpack.prod.js
@@ -3,9 +3,28 @@ const webpackMerge = require('webpack-merge');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const commonConfig = require('./webpack.common.js');
 const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 
+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 = webpackMerge(commonConfig, {
 
     devtool: 'source-map',
@@ -23,6 +42,15 @@ module.exports = webpackMerge(commonConfig, {
     },
 
     plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
         new webpack.NoEmitOnErrorsPlugin(),
         new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
             mangle: {