diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md
index 317665d83c..daf011cd49 100644
--- a/ng2-components/ng2-alfresco-datatable/README.md
+++ b/ng2-components/ng2-alfresco-datatable/README.md
@@ -25,8 +25,8 @@ npm install --save ng2-alfresco-datatable material-design-lite material-design-i
 ```
 
 ```ts
-import { Component } from 'angular2/core';
-import { 
+import { Component } from '@angular/core';
+import {
     ALFRESCO_DATATABLE_DIRECTIVES,
     ObjectDataTableAdapter
 } from 'ng2-alfresco-datatable';
@@ -38,7 +38,7 @@ import {
 })
 export class MyView {
     data: ObjectDataTableAdapter;
-    
+
     constructor() {
         this.data = new ObjectDataTableAdapter(
             // data
diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md
index 64eadcbdc5..5c3d128f63 100644
--- a/ng2-components/ng2-alfresco-documentlist/README.md
+++ b/ng2-components/ng2-alfresco-documentlist/README.md
@@ -24,6 +24,16 @@ Add the following dependency to your index.html:
 <script src="node_modules/alfresco-js-api/bundle.js"></script>
 ```
 
+The following component needs to be added to your systemjs.config: 
+
+- ng2-translate
+- ng2-alfresco-core
+- ng2-alfresco-documentlist
+
+Please refer to the following example to have an idea of how your systemjs.config should look like :
+
+https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js
+
 #### Style
 The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
 design dependency to your project:
@@ -32,7 +42,7 @@ design dependency to your project:
 npm install --save material-design-icons material-design-lite
 ```
 
-Also make sure you include the following in your .html page:
+Also make sure you include these dependencies in your .html page:
 
 ```html
 <!-- Google Material Design Lite -->
@@ -41,6 +51,7 @@ Also make sure you include the following in your .html page:
 <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
 ```
 
+
 ## Basic usage
 
 ```html
@@ -54,16 +65,17 @@ Also make sure you include the following in your .html page:
 Example of the component that declares document list and provides values for bindings:
 
 ```ts
-import { Component, OnInit } from 'angular2/core';
-import { bootstrap } from 'angular2/platform/browser';
-import { HTTP_PROVIDERS } from 'angular2/http';
+import { Component, OnInit } from '@angular/core';
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { HTTP_PROVIDERS } from '@angular/http';
 
 import {
     ALFRESCO_CORE_PROVIDERS,
     AlfrescoSettingsService,
     AlfrescoAuthenticationService,
     AlfrescoPipeTranslate,
-    AlfrescoTranslationService
+    AlfrescoTranslationService,
+    CONTEXT_MENU_DIRECTIVES
 } from 'ng2-alfresco-core';
 
 import {
diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md
index ff48c80bfd..249fc71f21 100644
--- a/ng2-components/ng2-alfresco-login/README.md
+++ b/ng2-components/ng2-alfresco-login/README.md
@@ -29,48 +29,15 @@ Add the following dependency to your index.html:
 <script src="node_modules/alfresco-js-api/bundle.js"></script>
 ```
 
-Also make sure you include these dependencies in your .html page:
+The following component needs to be added to your systemjs.config: 
 
-```html
-<!-- Google Material Design Lite -->
-<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-<script src="node_modules/material-design-lite/material.min.js"></script>
-<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-```
+- ng2-translate
+- ng2-alfresco-core
+- ng2-alfresco-login
 
-Make sure your systemjs.config has the following configuration:
+Please refer to the following example to have an idea of how your systemjs.config should look like :
 
-```javascript
-    System.config({
-                defaultJSExtensions: true,
-                map: {
-                    'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
-                    'ng2-alfresco-login': 'node_modules/ng2-alfresco-login',
-                    'rxjs': 'node_modules/rxjs',
-                    'angular2' : 'node_modules/angular2',
-                    'ng2-translate': 'node_modules/ng2-translate',
-                    'src': 'src'
-                },
-                packages: {
-                    'src': {
-                        defaultExtension: 'js'
-                    },
-                    'ng2-alfresco-core': {
-                        defaultExtension: 'js'
-                    },
-                    'ng2-alfresco-login': {
-                        defaultExtension: 'js'
-                    },
-                    'rxjs': {
-                        defaultExtension: 'js'
-                    },
-                    'angular2': {
-                        defaultExtension: 'js'
-                    }
-                }
-            });
-    
-```
+https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
 
 #### Style
 The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
@@ -80,6 +47,15 @@ design dependency to your project:
 npm install --save material-design-icons material-design-lite
 ```
 
+Also make sure you include these dependencies in your .html page:
+
+```html
+<!-- Google Material Design Lite -->
+<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
+<script src="node_modules/material-design-lite/material.min.js"></script>
+<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
+```
+
 #### Basic usage
 
 
diff --git a/ng2-components/ng2-alfresco-search/README.md b/ng2-components/ng2-alfresco-search/README.md
index c7d2ed09d3..55a214faa0 100644
--- a/ng2-components/ng2-alfresco-search/README.md
+++ b/ng2-components/ng2-alfresco-search/README.md
@@ -28,42 +28,25 @@ the related [search results](#search-results) component which performs a query a
 
 #### Dependencies
 
-Make sure your `systemjs.config` has the following configuration:
+Add the following dependency to your index.html:
 
-```javascript
-    System.config({
-                defaultJSExtensions: true,
-                map: {
-                    'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
-                    'ng2-alfresco-upload': 'node_modules/ng2-alfresco-search',
-                    'rxjs': 'node_modules/rxjs',
-                    'angular2' : 'node_modules/angular2',
-                    'ng2-translate': 'node_modules/ng2-translate',
-                    'app': 'dist/src'
-                },
-                packages: {
-                    'app': {
-                        defaultExtension: 'js'
-                    },
-                    'ng2-alfresco-core': {
-                        defaultExtension: 'js'
-                    },
-                    'ng2-alfresco-search': {
-                        defaultExtension: 'js'
-                    },
-                    'rxjs': {
-                        defaultExtension: 'js'
-                    },
-                    'angular2': {
-                        defaultExtension: 'js'
-                    }
-                }
-            });
+```html
+<script src="node_modules/alfresco-js-api/bundle.js"></script>
 ```
 
+The following component needs to be added to your systemjs.config: 
+
+- ng2-translate
+- ng2-alfresco-core
+- ng2-alfresco-search
+
+Please refer to the following example to have an idea of how your systemjs.config should look like :
+
+https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
+
 #### Style
-The style of this component is based on Google Material Design, so if you want to visualize it correctly you have to add 
-the material-design-lite dependency to your project:
+The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
+design dependency to your project:
 
 ```sh
 npm install --save material-design-icons material-design-lite
@@ -92,20 +75,18 @@ but instead the component could emit an event to be consumed upstream, or it cou
 results component embedded inside the same component.
 
 ```ts
-import { Component, OnInit } from 'angular2/core';
-import { bootstrap } from 'angular2/platform/browser';
-import { HTTP_PROVIDERS } from 'angular2/http';
-
+import { Component, OnInit } from '@angular/core';
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { HTTP_PROVIDERS } from '@angular/http';
 import {
     ALFRESCO_CORE_PROVIDERS,
     AlfrescoSettingsService,
     AlfrescoAuthenticationService,
     AlfrescoTranslationService
-} from 'ng2-alfresco-core/dist/ng2-alfresco-core';
-
+} from 'ng2-alfresco-core';
 import {
     ALFRESCO_SEARCH_DIRECTIVES
-} from 'ng2-alfresco-search/dist/ng2-alfresco-search';
+} from 'ng2-alfresco-search';
 
 @Component({
     selector: 'alfresco-search-demo',
@@ -174,48 +155,25 @@ This component displays the results of a search to the user.
 
 #### Dependencies
 
-Make sure your `systemjs.config` has the following configuration:
-
-```javascript
-    System.config({
-                defaultJSExtensions: true,
-                map: {
-                    'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
-                    'ng2-alfresco-upload': 'node_modules/ng2-alfresco-search',
-                    'rxjs': 'node_modules/rxjs',
-                    'angular2' : 'node_modules/angular2',
-                    'ng2-translate': 'node_modules/ng2-translate',
-                    'app': 'dist/src'
-                },
-                packages: {
-                    'app': {
-                        defaultExtension: 'js'
-                    },
-                    'ng2-alfresco-core': {
-                        defaultExtension: 'js'
-                    },
-                    'ng2-alfresco-search': {
-                        defaultExtension: 'js'
-                    },
-                    'rxjs': {
-                        defaultExtension: 'js'
-                    },
-                    'angular2': {
-                        defaultExtension: 'js'
-                    }
-                }
-            });
-```
-
-You must also add the following dependency to your index.html:
+Add the following dependency to your index.html:
 
 ```html
 <script src="node_modules/alfresco-js-api/bundle.js"></script>
 ```
 
+The following component needs to be added to your systemjs.config: 
+
+- ng2-translate
+- ng2-alfresco-core
+- ng2-alfresco-search
+
+Please refer to the following example to have an idea of how your systemjs.config should look like :
+
+https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
+
 #### Style
-The style of this component is based on Google Material Design, so if you want to visualize it correctly you have to add 
-the material-design-lite dependency to your project:
+The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
+design dependency to your project:
 
 ```sh
 npm install --save material-design-icons material-design-lite
@@ -241,21 +199,20 @@ search term. If no ruter is present pon the page of if the router does not provi
 results page will be shown.
 
 ```ts
-import { Component, OnInit } from 'angular2/core';
-import { bootstrap } from 'angular2/platform/browser';
-import { HTTP_PROVIDERS } from 'angular2/http';
+import { Component, OnInit } from '@angular/core';
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { HTTP_PROVIDERS } from '@angular/http';
 
 import {
     ALFRESCO_CORE_PROVIDERS,
     AlfrescoSettingsService,
     AlfrescoAuthenticationService,
     AlfrescoTranslationService
-} from 'ng2-alfresco-core/dist/ng2-alfresco-core';
+} from 'ng2-alfresco-core';
 
 import {
     ALFRESCO_SEARCH_DIRECTIVES
-} from 'ng2-alfresco-search/dist/ng2-alfresco-search';
-
+} from 'ng2-alfresco-search';
 
 @Component({
     selector: 'alfresco-search-demo',
@@ -305,7 +262,6 @@ bootstrap(SearchDemo, [
     HTTP_PROVIDERS,
     ALFRESCO_CORE_PROVIDERS
 ]);
-
 ```
 
 Example of an component that displays search results, taking the search term from a `@Input` property provided by the container.
@@ -313,12 +269,15 @@ Example of an component that displays search results, taking the search term fro
 When the input is updated by the application, the search control will run a new search and display the results.
 
 ```ts
-import { Component, Input } from 'angular2/core';
-import { bootstrap } from 'angular2/platform/browser';
-import { HTTP_PROVIDERS } from 'angular2/http';
-
-import { ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
-import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search/dist/ng2-alfresco-search';
+import { Component } from '@angular/core';
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { HTTP_PROVIDERS } from '@angular/http';
+import {
+    ALFRESCO_CORE_PROVIDERS
+} from 'ng2-alfresco-core';
+import {
+    ALFRESCO_SEARCH_DIRECTIVES
+} from 'ng2-alfresco-search';
 
 @Component({
     selector: 'alfresco-search-demo',
diff --git a/ng2-components/ng2-alfresco-search/demo/src/main.ts b/ng2-components/ng2-alfresco-search/demo/src/main.ts
index d0a091be5e..2747c510ea 100644
--- a/ng2-components/ng2-alfresco-search/demo/src/main.ts
+++ b/ng2-components/ng2-alfresco-search/demo/src/main.ts
@@ -18,7 +18,6 @@
 import { Component, OnInit } from '@angular/core';
 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { HTTP_PROVIDERS } from '@angular/http';
-
 import {
     ALFRESCO_CORE_PROVIDERS,
     AlfrescoSettingsService,
@@ -26,7 +25,6 @@ import {
     AlfrescoPipeTranslate,
     AlfrescoTranslationService
 } from 'ng2-alfresco-core';
-
 import {
     ALFRESCO_SEARCH_PROVIDERS,
     ALFRESCO_SEARCH_DIRECTIVES
diff --git a/ng2-components/ng2-alfresco-upload/README.md b/ng2-components/ng2-alfresco-upload/README.md
index b7eee305ee..358acfad65 100644
--- a/ng2-components/ng2-alfresco-upload/README.md
+++ b/ng2-components/ng2-alfresco-upload/README.md
@@ -32,47 +32,15 @@ Add the following dependency to your index.html:
 <script src="node_modules/alfresco-js-api/bundle.js"></script>
 ```
 
-Also make sure you include these dependencies in your .html page:
+The following component needs to be added to your systemjs.config: 
 
-```html
-<!-- Google Material Design Lite -->
-<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-<script src="node_modules/material-design-lite/material.min.js"></script>
-<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-```
+- ng2-translate
+- ng2-alfresco-core
+- ng2-alfresco-upload
 
-Make sure your systemjs.config has the following configuration:
+Please refer to the following example to have an idea of how your systemjs.config should look like :
 
-```javascript
-    System.config({
-                defaultJSExtensions: true,
-                map: {
-                    'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
-                    'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload',
-                    'rxjs': 'node_modules/rxjs',
-                    'angular2' : 'node_modules/angular2',
-                    'ng2-translate': 'node_modules/ng2-translate',
-                    'app': 'dist/src'
-                },
-                packages: {
-                    'app': {
-                        defaultExtension: 'js'
-                    },
-                    'ng2-alfresco-core': {
-                        defaultExtension: 'js'
-                    },
-                    'ng2-alfresco-upload': {
-                        defaultExtension: 'js'
-                    },
-                    'rxjs': {
-                        defaultExtension: 'js'
-                    },
-                    'angular2': {
-                        defaultExtension: 'js'
-                    }
-                }
-            });
-```
+https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
 
 #### Style
 The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
@@ -82,6 +50,15 @@ design dependency to your project:
 npm install --save material-design-icons material-design-lite
 ```
 
+Also make sure you include these dependencies in your .html page:
+
+```html
+<!-- Google Material Design Lite -->
+<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
+<script src="node_modules/material-design-lite/material.min.js"></script>
+<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
+```
+
 #### Basic usage
 
 
@@ -98,12 +75,14 @@ npm install --save material-design-icons material-design-lite
 Example of an App that declares upload button component :
 
 ```ts
-import { Component } from 'angular2/core';
-import { bootstrap } from 'angular2/platform/browser';
-import { HTTP_PROVIDERS } from 'angular2/http';
-import { AlfrescoSettingsService , ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
-import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
-
+import { Component, OnInit } from '@angular/core';
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { HTTP_PROVIDERS } from '@angular/http';
+import {
+    ALFRESCO_CORE_PROVIDERS,
+    AlfrescoSettingsService
+} from 'ng2-alfresco-core';
+import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
 
 @Component({
     selector: 'my-app',
@@ -156,12 +135,14 @@ This component, provide a drag and drop are to upload files to alfresco.
 Example of an App that declares upload drag and drop component :
 
 ```ts
-import { Component } from 'angular2/core';
-import { bootstrap } from 'angular2/platform/browser';
-import { HTTP_PROVIDERS } from 'angular2/http';
-import { AlfrescoSettingsService, ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
-import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
-
+import { Component, OnInit } from '@angular/core';
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { HTTP_PROVIDERS } from '@angular/http';
+import {
+    ALFRESCO_CORE_PROVIDERS,
+    AlfrescoSettingsService
+} from 'ng2-alfresco-core';
+import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
 
 @Component({
     selector: 'my-app',
diff --git a/ng2-components/ng2-alfresco-viewer/README.md b/ng2-components/ng2-alfresco-viewer/README.md
index 46ea9374cd..e19054678b 100644
--- a/ng2-components/ng2-alfresco-viewer/README.md
+++ b/ng2-components/ng2-alfresco-viewer/README.md
@@ -25,42 +25,9 @@ Add the following dependency to your index.html:
 <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
 ```
 
-Also make sure you include these dependencies in your .html page:
-
-```html
-<!-- Google Material Design Lite -->
-<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-<script src="node_modules/material-design-lite/material.min.js"></script>
-<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-```
-
 Make sure your systemjs.config has the following configuration:
 
-```javascript
-    System.config({
-                defaultJSExtensions: true,
-                map: {
-                    'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer',
-                    'rxjs': 'node_modules/rxjs',
-                    'angular2': 'node_modules/angular2',
-                    'app': 'dist/main'
-                },
-                packages: {
-                    'src': {
-                        defaultExtension: 'js'
-                    },
-                    'ng2-alfresco-viewer': {
-                        defaultExtension: 'js'
-                    },
-                    'rxjs': {
-                        defaultExtension: 'js'
-                    },
-                    'angular2': {
-                        defaultExtension: 'js'
-                    }
-                }
-            });
-```
+https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
 
 #### Style
 The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
@@ -70,6 +37,15 @@ design dependency to your project:
 npm install --save material-design-icons material-design-lite
 ```
 
+Also make sure you include these dependencies in your .html page:
+
+```html
+<!-- Google Material Design Lite -->
+<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
+<script src="node_modules/material-design-lite/material.min.js"></script>
+<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
+```
+
 #### Basic usage
 
 ```html
@@ -79,13 +55,13 @@ npm install --save material-design-icons material-design-lite
 Example of an App that declares the file viewer component :
 
 ```ts
-import { Component } from 'angular2/core';
-import { bootstrap } from 'angular2/platform/browser';
-import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer/dist/ng2-alfresco-viewer';
+import { Component } from '@angular/core';
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
 
 @Component({
     selector: 'my-app',
-    template: `   <alfresco-viewer [overlayMode]="true" [urlFile]="'local_filename.pdf'">
+    template: `   <alfresco-viewer [showViewer]="true" [overlayMode]="true" [urlFile]="'local_filename.pdf'">
                     <div class="mdl-spinner mdl-js-spinner is-active"></div>
                    </alfresco-viewer>`,
     directives: [VIEWERCOMPONENT]