diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html
index 556364cd71..0cc764b357 100644
--- a/demo-shell-ng2/app/app.component.html
+++ b/demo-shell-ng2/app/app.component.html
@@ -25,6 +25,7 @@
                 <a class="mdl-navigation__link" data-automation-id="datatable" href="" [routerLink]="['DataTable']">DataTable</a>
                 <a class="mdl-navigation__link" data-automation-id="uploader" href="" [routerLink]="['Uploader']">Uploader</a>
                 <a class="mdl-navigation__link" data-automation-id="login" href="" [routerLink]="['Login']">Login</a>
+                <a class="mdl-navigation__link" data-automation-id="viewer" href="" [routerLink]="['Viewer']">Viewer</a>
             </nav>
             <!-- Right aligned menu below button -->
             <button id="demo-menu-language-right" data-automation-id="language-menu"
diff --git a/demo-shell-ng2/app/app.component.ts b/demo-shell-ng2/app/app.component.ts
index 7c5f7aedc3..84ab4357e0 100644
--- a/demo-shell-ng2/app/app.component.ts
+++ b/demo-shell-ng2/app/app.component.ts
@@ -27,6 +27,7 @@ import { UploadButtonComponent } from 'ng2-alfresco-upload/dist/ng2-alfresco-upl
 import { DataTableDemoComponent } from './components/datatable/datatable-demo.component';
 import { AlfrescoSearchComponent } from 'ng2-alfresco-search/dist/ng2-alfresco-search';
 import { LoginDemoComponent } from './components/login/login-demo.component';
+import { ViewerFileComponent } from './components/viewer/viewer.component';
 
 declare var document: any;
 
@@ -42,7 +43,8 @@ declare var document: any;
     {path: '/datatable', name: 'DataTable', component: DataTableDemoComponent},
     {path: '/uploader', name: 'Uploader', component: UploadButtonComponent},
     {path: '/login', name: 'Login', component: LoginDemoComponent},
-    {path: '/search', name: 'Search', component: AlfrescoSearchComponent}
+    {path: '/search', name: 'Search', component: AlfrescoSearchComponent},
+    {path: '/viewer', name: 'Viewer', component: ViewerFileComponent}
 ])
 export class AppComponent {
     translate: AlfrescoTranslationService;
diff --git a/demo-shell-ng2/app/components/datatable/datatable-demo.component.ts b/demo-shell-ng2/app/components/datatable/datatable-demo.component.ts
index 637a029a05..c239df2080 100644
--- a/demo-shell-ng2/app/components/datatable/datatable-demo.component.ts
+++ b/demo-shell-ng2/app/components/datatable/datatable-demo.component.ts
@@ -18,7 +18,7 @@
 import { Component } from 'angular2/core';
 import {
     ALFRESCO_DATATABLE_DIRECTIVES,
-    ObjectDataTableAdapter, 
+    ObjectDataTableAdapter,
     DataSorting,
     ObjectDataRow,
     ObjectDataColumn
diff --git a/demo-shell-ng2/app/components/files/files.component.ts b/demo-shell-ng2/app/components/files/files.component.ts
index c04d8c273b..1ee4258f09 100644
--- a/demo-shell-ng2/app/components/files/files.component.ts
+++ b/demo-shell-ng2/app/components/files/files.component.ts
@@ -70,10 +70,10 @@ export class FilesComponent {
     }
 
     getRelativeDirectory(currentFolderPath: string): string {
-        if (currentFolderPath.indexOf('/Sites/swsdp/documentLibrary/') != -1) {
-            return currentFolderPath.replace('/Sites/swsdp/documentLibrary/', '')
+        if (currentFolderPath.indexOf('/Sites/swsdp/documentLibrary/') !== -1) {
+            return currentFolderPath.replace('/Sites/swsdp/documentLibrary/', '');
         } else {
-            return currentFolderPath.replace('/Sites/swsdp/documentLibrary', '')
+            return currentFolderPath.replace('/Sites/swsdp/documentLibrary', '');
         }
     }
 }
diff --git a/demo-shell-ng2/app/components/viewer/viewer.component.html b/demo-shell-ng2/app/components/viewer/viewer.component.html
new file mode 100644
index 0000000000..9b5eb152db
--- /dev/null
+++ b/demo-shell-ng2/app/components/viewer/viewer.component.html
@@ -0,0 +1,4 @@
+<h1>Viewer</h1>
+<alfresco-viewer [urlFile]="'http://192.168.99.100:8080/share/proxy/alfresco/slingshot/node/content/workspace/SpacesStore/f7d0ef02-24ca-46e5-a05a-37d7d878142a/Energy_Bill_20May16.pdf'">
+    <div class="mdl-spinner mdl-js-spinner is-active"></div>
+</alfresco-viewer>
\ No newline at end of file
diff --git a/demo-shell-ng2/app/components/viewer/viewer.component.ts b/demo-shell-ng2/app/components/viewer/viewer.component.ts
new file mode 100644
index 0000000000..b6d0d2c6c5
--- /dev/null
+++ b/demo-shell-ng2/app/components/viewer/viewer.component.ts
@@ -0,0 +1,31 @@
+/**
+ * @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 } from 'angular2/core';
+import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer/dist/ng2-alfresco-viewer';
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'viewer-component',
+    templateUrl: './viewer.component.html',
+    directives: [VIEWERCOMPONENT]
+})
+export class ViewerFileComponent {
+    constructor() {
+        console.log('constructor');
+    }
+}
diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index ee1543eff2..146e40b4c8 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -26,6 +26,10 @@
     <script src="/app/js/xml2json.js"></script>
     <script src="node_modules/alfresco-core-rest-api/bundle.js"></script>
 
+    <script src="node_modules/pdfjs-dist/build/pdf.js"></script>
+    <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
+    <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
+
     <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>
     <script>
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 5691227c29..c2f4d47abd 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -4,11 +4,14 @@
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "start": "concurrently \"npm run tsc:w\" \"npm run serve\" ",
+    "start": "npm run tslint && concurrently \"npm run tsc:w\" \"npm run serve\" ",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "serve": "lite-server",
-    "typings": "typings"
+    "typings": "typings",
+    "tslint": "npm run tslint-src && npm run tslint-root",
+    "tslint-src": "tslint -c tslint.json app/**/*.ts",
+    "tslint-root": "tslint -c tslint.json *.ts"
   },
   "repository": {
     "type": "git",
@@ -58,6 +61,7 @@
     "ng2-alfresco-login": "^0.1.0",
     "ng2-alfresco-search": "^0.1.2",
     "ng2-alfresco-upload": "^0.1.0",
+    "ng2-alfresco-viewer": "^0.1.5",
     "ng2-translate": "^1.11.3",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
diff --git a/demo-shell-ng2/systemjs.config.js b/demo-shell-ng2/systemjs.config.js
index 757e94a293..613e77fc1f 100644
--- a/demo-shell-ng2/systemjs.config.js
+++ b/demo-shell-ng2/systemjs.config.js
@@ -25,6 +25,7 @@
         'ng2-alfresco-login': 'node_modules/ng2-alfresco-login',
         'ng2-alfresco-search': 'node_modules/ng2-alfresco-search',
         'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload',
+        'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer',
         'rxjs': 'node_modules/rxjs',
         'ng2-translate': 'node_modules/ng2-translate'
     };
@@ -41,6 +42,7 @@
         'ng2-alfresco-login': {defaultExtension: 'js'},
         'ng2-alfresco-search': {defaultExtension: 'js'},
         'ng2-alfresco-upload': {defaultExtension: 'js'},
+        'ng2-alfresco-viewer': {defaultExtension: 'js'},
         'ng2-translate': {defaultExtension: 'js'},
         'rxjs': {defaultExtension: 'js'}
     };
diff --git a/demo-shell-ng2/tslint.json b/demo-shell-ng2/tslint.json
index ce80085e69..8c48e76469 100644
--- a/demo-shell-ng2/tslint.json
+++ b/demo-shell-ng2/tslint.json
@@ -114,9 +114,11 @@
     "whitespace": [
       true,
       "check-branch",
-      "check-decl",
       "check-operator",
-      "check-separator"
+      "check-separator",
+      "check-type",
+      "check-module",
+      "check-decl"
     ]
   }
 }
diff --git a/ng2-components/ng2-alfresco-login/demo/src/main.ts b/ng2-components/ng2-alfresco-login/demo/src/main.ts
index 7a3337b33d..6b484c0209 100644
--- a/ng2-components/ng2-alfresco-login/demo/src/main.ts
+++ b/ng2-components/ng2-alfresco-login/demo/src/main.ts
@@ -19,8 +19,6 @@ import { bootstrap }    from 'angular2/platform/browser';
 import { AppComponent } from './components/app-component';
 import { ALFRESCO_AUTHENTICATION } from 'ng2-alfresco-login/dist/ng2-alfresco-login';
 import { ROUTER_PROVIDERS } from 'angular2/router';
-import { provide } from 'angular2/core';
-import { Http } from 'angular2/http';
 import { HTTP_PROVIDERS }    from 'angular2/http';
 import { ALFRESCO_CORE_PROVIDERS, AlfrescoTranslationService, AlfrescoTranslationLoader } from 'ng2-alfresco-core/dist/ng2-alfresco-core';