diff --git a/ng2-components/ng2-alfresco-login/demo/package.json b/ng2-components/ng2-alfresco-login/demo/package.json
index ef511157a7..a549cc39ee 100644
--- a/ng2-components/ng2-alfresco-login/demo/package.json
+++ b/ng2-components/ng2-alfresco-login/demo/package.json
@@ -45,29 +45,28 @@
         "alfresco"
     ],
     "dependencies": {
-      "@angular/common": "2.0.0-rc.3",
-      "@angular/compiler": "2.0.0-rc.3",
-      "@angular/core": "2.0.0-rc.3",
-      "@angular/forms": "0.1.1",
-      "@angular/http": "2.0.0-rc.3",
-      "@angular/platform-browser": "2.0.0-rc.3",
-      "@angular/platform-browser-dynamic": "2.0.0-rc.3",
-      "@angular/router": "3.0.0-alpha.7",
-      "@angular/router-deprecated": "2.0.0-rc.2",
-      "@angular/upgrade": "2.0.0-rc.3",
+      "@angular/common": "2.0.0",
+      "@angular/compiler": "2.0.0",
+      "@angular/core": "2.0.0",
+      "@angular/forms": "2.0.0",
+      "@angular/http": "2.0.0",
+      "@angular/platform-browser": "2.0.0",
+      "@angular/platform-browser-dynamic": "2.0.0",
+      "@angular/router": "3.0.0",
+      "@angular/upgrade": "2.0.0",
+      "core-js": "^2.4.1",
+      "reflect-metadata": "^0.1.3",
+      "rxjs": "5.0.0-beta.12",
       "systemjs": "0.19.27",
-      "core-js": "2.4.0",
-      "reflect-metadata": "0.1.3",
-      "rxjs": "5.0.0-beta.6",
-      "zone.js": "0.6.12",
+      "zone.js": "^0.6.23",
 
       "material-design-icons": "2.2.3",
-      "material-design-lite": "1.1.3",
-      "ng2-translate": "2.2.2",
+      "material-design-lite": "1.2.1",
+      "ng2-translate": "2.5.0",
 
       "alfresco-js-api": "^0.3.0",
       "ng2-alfresco-core": "^0.3.0",
-      "ng2-alfresco-login": "file:../"
+      "ng2-alfresco-login": "^0.3.2"
     },
     "devDependencies": {
       "@types/core-js": "^0.9.32",
@@ -75,7 +74,7 @@
       "concurrently": "^2.2.0",
       "rimraf": "2.5.2",
       "tslint": "^3.8.1",
-      "typescript": "^2.0.2",
-      "wsrv": "^0.1.5",
+      "typescript": "^2.0.3",
+      "wsrv": "^0.1.5"
     }
 }
diff --git a/ng2-components/ng2-alfresco-login/demo/src/main.ts b/ng2-components/ng2-alfresco-login/demo/src/main.ts
index 078fe1842d..7f61445730 100644
--- a/ng2-components/ng2-alfresco-login/demo/src/main.ts
+++ b/ng2-components/ng2-alfresco-login/demo/src/main.ts
@@ -15,16 +15,12 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { AlfrescoLoginComponent } from 'ng2-alfresco-login';
-import { HTTP_PROVIDERS } from '@angular/http';
-import {
-    ALFRESCO_CORE_PROVIDERS,
-    AlfrescoSettingsService,
-    AlfrescoAuthenticationService
-} from 'ng2-alfresco-core';
+import { NgModule, Component } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
+import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { LoginModule } from 'ng2-alfresco-login';
 
 @Component({
     selector: 'my-app',
@@ -51,8 +47,7 @@ import {
        <hr>
 
        <alfresco-login [providers]="providers" (onSuccess)="mySuccessMethod($event)"
-       (onError)="myErrorMethod($event)"></alfresco-login>`,
-    directives: [AlfrescoLoginComponent]
+       (onError)="myErrorMethod($event)"></alfresco-login>`
 })
 export class AppComponent {
 
@@ -104,7 +99,15 @@ export class AppComponent {
     }
 }
 
-bootstrap(AppComponent, [
-    HTTP_PROVIDERS,
-    ALFRESCO_CORE_PROVIDERS
-]);
+@NgModule({
+    imports: [
+        BrowserModule,
+        CoreModule.forRoot(),
+        LoginModule
+    ],
+    declarations: [ AppComponent ],
+    bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/ng2-components/ng2-alfresco-login/demo/systemjs.config.js b/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
index 2f9855c9b4..a25396af08 100644
--- a/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
@@ -2,54 +2,66 @@
  * System configuration for Angular 2 samples
  * Adjust as necessary for your application needs.
  */
-(function(global) {
-    // map tells the System loader where to look for things
-    var map = {
-        'app':                        'dist', // 'dist',
-        '@angular':                   'node_modules/@angular',
-        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
-        'rxjs':                       'node_modules/rxjs',
+(function (global) {
+    System.config({
+        paths: {
+            // paths serve as alias
+            'npm:': 'node_modules/'
+        },
+        // map tells the System loader where to look for things
+        map: {
+            // our app is within the app folder
+            app: 'dist',
+            // 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',
+            // other libraries
+            'rxjs': 'npm:rxjs',
+            'ng2-translate': 'npm:ng2-translate',
+            'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
+            'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable/dist',
+            'ng2-alfresco-documentlist': 'npm:ng2-alfresco-documentlist/dist',
+            'ng2-alfresco-login': 'npm:ng2-alfresco-login/dist',
+            'ng2-alfresco-search': 'npm:ng2-alfresco-search/dist',
+            'ng2-alfresco-upload': 'npm:ng2-alfresco-upload/dist',
+            'ng2-activiti-form': 'npm:ng2-activiti-form/dist',
+            'ng2-alfresco-viewer': 'npm:ng2-alfresco-viewer/dist',
+            'ng2-alfresco-webscript': 'npm:ng2-alfresco-webscript/dist',
+            'ng2-alfresco-tag': 'npm:ng2-alfresco-tag/dist',
+            'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist',
+            'alfresco-js-api': 'npm:alfresco-js-api/dist',
+            'ng2-activiti-processlist': 'npm:ng2-activiti-processlist/dist'
+        },
+        // packages tells the System loader how to load when no filename and/or no extension
+        packages: {
+            app: {
+                main: './main.js',
+                defaultExtension: 'js'
+            },
+            rxjs: {
+                defaultExtension: 'js'
+            },
+            'ng2-translate': { defaultExtension: 'js' },
 
-        'ng2-translate': 'node_modules/ng2-translate',
-        'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/dist',
-        'ng2-alfresco-login': 'node_modules/ng2-alfresco-login/dist'
-    };
-    // packages tells the System loader how to load when no filename and/or no extension
-    var packages = {
-        'app':                        { main: 'main.js',  defaultExtension: 'js' },
-        'rxjs':                       { defaultExtension: 'js' },
-        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
-
-        'ng2-translate': { defaultExtension: 'js' },
-        'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' },
-        'ng2-alfresco-login': { main: 'index.js', defaultExtension: 'js' }
-    };
-    var ngPackageNames = [
-        'common',
-        'compiler',
-        'core',
-        'http',
-        'platform-browser',
-        'platform-browser-dynamic',
-        'router',
-        'router-deprecated',
-        'upgrade'
-    ];
-    // Individual files (~300 requests):
-    function packIndex(pkgName) {
-        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
-    }
-    // Bundled (~40 requests):
-    function packUmd(pkgName) {
-        packages['@angular/'+pkgName] = { main: '/bundles/'+ pkgName + '.umd.js', defaultExtension: 'js' };
-    }
-    // Most environments should use UMD; some (Karma) need the individual index files
-    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
-    // Add package entries for angular packages
-    ngPackageNames.forEach(setPackageConfig);
-    var config = {
-        map: map,
-        packages: packages
-    };
-    System.config(config);
+            '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-alfresco-login': { main: './index.js', defaultExtension: 'js'},
+            'ng2-alfresco-search': { main: './index.js', defaultExtension: 'js'},
+            'ng2-alfresco-upload': { main: './index.js', defaultExtension: 'js'},
+            'ng2-alfresco-viewer': { main: './index.js', defaultExtension: 'js'},
+            'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
+            'ng2-activiti-processlist': { main: './index.js', defaultExtension: 'js'},
+            'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'},
+            'ng2-alfresco-webscript': { main: './index.js', defaultExtension: 'js'},
+            'ng2-alfresco-tag': { main: './index.js', defaultExtension: 'js'},
+            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'}
+        }
+    });
 })(this);