diff --git a/ng2-components/ng2-alfresco-viewer/index.html b/ng2-components/ng2-alfresco-viewer/index.html
index d263eb1cc5..60a7f0592c 100644
--- a/ng2-components/ng2-alfresco-viewer/index.html
+++ b/ng2-components/ng2-alfresco-viewer/index.html
@@ -17,27 +17,30 @@
     <script src="node_modules/angular2/bundles/router.dev.js"></script>
     <script src="node_modules/angular2/bundles/http.dev.js"></script>
 
+    <script src="node_modules/pdfjs-dist/build/pdf.js"></script>
+    <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
+
+    <script>
+        PDFJS.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.js';
+    </script>
+
     <script>
         System.config({
             defaultJSExtensions: true,
             map: {
                 'rxjs': 'node_modules/rxjs',
                 'angular2': 'node_modules/angular2',
-                'PDFJS': 'node_modules/pdfjs-dist/build',
                 'app': 'dist/main'
             },
             packages: {
                 'app': {
-                   defaultExtension: 'js'
+                    defaultExtension: 'js'
                 },
                 'rxjs': {
                     defaultExtension: 'js'
                 },
                 'angular2': {
                     defaultExtension: 'js'
-                },
-                'PDFJS': {
-                    defaultExtension: 'js'
                 }
             }
         });
@@ -47,7 +50,7 @@
 
 </head>
 <body>
-
+<canvas id="the-canvas" style="border:1px solid black;"/>
 <ng2-alfresco-viewer>Loading...</ng2-alfresco-viewer>
 
 </body>
diff --git a/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.ts
index e623867bfa..b3d34bdee1 100644
--- a/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.ts
@@ -31,6 +31,32 @@ import {Component} from 'angular2/core';
 export class Ng2AlfrescoViewerComponent {
 
     constructor() {
+        PDFJS.getDocument('../localTestFile.pdf').then(function getPdfHelloWorld(pdf) {
+            //
+            // Fetch the first page
+            //
+            pdf.getPage(1).then(function getPageHelloWorld(page) {
+                let scale = 1.5;
+                let viewport = page.getViewport(scale);
+
+                //
+                // Prepare canvas using PDF page dimensions
+                //
+                let  canvas:any = document.getElementById('the-canvas');
+                let context = canvas.getContext('2d');
+                canvas.height = viewport.height;
+                canvas.width = viewport.width;
+
+                //
+                // Render PDF page into canvas context
+                //
+                let renderContext = {
+                    canvasContext: context,
+                    viewport: viewport
+                };
+                page.render(renderContext);
+            });
+        });
         console.log('../contructor');
     }
 
diff --git a/ng2-components/ng2-alfresco-viewer/typings.json b/ng2-components/ng2-alfresco-viewer/typings.json
index d6a258cfb6..93017847e9 100644
--- a/ng2-components/ng2-alfresco-viewer/typings.json
+++ b/ng2-components/ng2-alfresco-viewer/typings.json
@@ -2,5 +2,8 @@
   "ambientDependencies": {
     "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
     "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b"
+  },
+  "globalDependencies": {
+    "pdf": "registry:dt/pdf#0.0.0+20160324080756"
   }
 }
