diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json
index 8ae79a22cb..af2e2d8383 100644
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -21,7 +21,6 @@
       "SHOW_COMMENTS": "Show comments on versions",
       "ALLOW_DOWNLOAD": "Enable version download",
       "READ_ONLY": "Read-only",
-      "ALLOW_DOWNLOAD": "Allow Download",
       "COMMENTS": "Show comments"
     },
     "PERSONAL-FILES": "Personal Files",
@@ -81,7 +80,6 @@
     "OVERLAY_VIEWER": "Overlay Viewer",
     "ABOUT": "About",
     "SEARCH": "Extended Search",
-    "NOTIFICATIONS": "Notifications",
     "EXTENDED_SEARCH_QUERY_BODY": "Extended Search with Query Body",
     "WORD_TO_SEARCH": "Search Word",
     "SEARCH_CREATED_BY": "Created By",
@@ -102,6 +100,7 @@
   "DOCUMENT_LIST": {
     "MULTISELECT_CHECKBOXES": "Multiselect (with checkboxes)",
     "THUMBNAILS": "Enable Thumbnails",
+    "ALLOW_DROP_FILES": "Enable Drop Files in a folder",
     "MULTIPLE_FILE_UPLOAD": "Multiple File Upload",
     "FOLDER_UPLOAD": "Folder upload",
     "CUSTOM_FILTER": "Custom extensions filter",
diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts
index ba149db97f..1449d8d9bb 100644
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -28,18 +28,15 @@ import { AppComponent } from './app.component';
 import { MaterialModule } from './material.module';
 import { LoginComponent } from './components/login/login.component';
 import { LogoutComponent } from './components/logout/logout.component';
-import { SettingsComponent } from './components/settings/settings.component';
 import { AppLayoutComponent } from './components/app-layout/app-layout.component';
 import { HomeComponent } from './components/home/home.component';
 import { SearchBarComponent } from './components/search/search-bar.component';
 import { SearchResultComponent } from './components/search/search-result.component';
 import { SearchExtendedComponent } from './components/search/search-extended.component';
-import { AboutComponent } from './components/about/about.component';
 import { LogComponent } from './components/log/log.component';
 import { FormComponent } from './components/form/form.component';
 import { FormListComponent } from './components/form/form-list.component';
 import { FormLoadingComponent } from './components/form/form-loading.component';
-import { CustomSourcesComponent } from './components/files/custom-sources.component';
 import { OverlayViewerComponent } from './components/overlay-viewer/overlay-viewer.component';
 
 import { ProcessServiceComponent } from './components/process-service/process-service.component';
@@ -47,12 +44,7 @@ import { ShowDiagramComponent } from './components/process-service/show-diagram.
 import { FormViewerComponent } from './components/process-service/form-viewer.component';
 import { FormNodeViewerComponent } from './components/process-service/form-node-viewer.component';
 import { AppsViewComponent } from './components/process-service/apps-view.component';
-import { DataTableComponent } from './components/datatable/datatable.component';
-import { TrashcanComponent } from './components/trashcan/trashcan.component';
 import { FilesComponent } from './components/files/files.component';
-import { WebscriptComponent } from './components/webscript/webscript.component';
-import { TagComponent } from './components/tag/tag.component';
-import { SocialComponent } from './components/social/social.component';
 import { VersionManagerDialogAdapterComponent } from './components/files/version-manager-dialog-adapter.component';
 import { MetadataDialogAdapterComponent } from './components/files/metadata-dialog-adapter.component';
 
@@ -65,16 +57,7 @@ import { ProcessAttachmentsComponent } from './components/process-service/proces
 import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
 import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
 import { PreviewService } from './services/preview.service';
-import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb-demo.component';
-import { TaskListDemoComponent } from './components/task-list-demo/task-list-demo.component';
-import { ProcessListDemoComponent } from './components/process-list-demo/process-list-demo.component';
-import { ContentNodeSelectorComponent } from './components/content-node-selector/content-node-selector.component';
-import { NotificationsComponent } from './components/notifications/notifications.component';
 import { ReportIssueComponent } from './components/report-issue/report-issue.component';
-import { CardViewComponent } from './components/card-view/card-view.component';
-import { HeaderDataComponent } from './components/header-data/header-data.component';
-import { ConfigEditorComponent } from './components/config-editor/config-editor.component';
-import { HeaderDataService } from './components/header-data/header-data.service';
 import { MonacoEditorModule } from 'ngx-monaco-editor';
 import { ContentModule } from '@alfresco/adf-content-services';
 import { InsightsModule } from '@alfresco/adf-insights';
@@ -103,28 +86,20 @@ import { AuthBearerInterceptor } from './services';
         AppComponent,
         LoginComponent,
         LogoutComponent,
-        SettingsComponent,
         AppLayoutComponent,
         HomeComponent,
         SearchBarComponent,
         SearchResultComponent,
         SearchExtendedComponent,
-        AboutComponent,
         LogComponent,
         ProcessServiceComponent,
         ShowDiagramComponent,
         FormViewerComponent,
         FormNodeViewerComponent,
         AppsViewComponent,
-        DataTableComponent,
         FilesComponent,
-        TrashcanComponent,
         FormComponent,
         FormListComponent,
-        WebscriptComponent,
-        TagComponent,
-        SocialComponent,
-        CustomSourcesComponent,
         VersionManagerDialogAdapterComponent,
         MetadataDialogAdapterComponent,
         TaskAttachmentsComponent,
@@ -134,15 +109,7 @@ import { AuthBearerInterceptor } from './services';
         FormLoadingComponent,
         DemoPermissionComponent,
         FormLoadingComponent,
-        BreadcrumbDemoComponent,
-        NotificationsComponent,
-        CardViewComponent,
-        ContentNodeSelectorComponent,
-        ReportIssueComponent,
-        TaskListDemoComponent,
-        ProcessListDemoComponent,
-        HeaderDataComponent,
-        ConfigEditorComponent
+        ReportIssueComponent
     ],
     providers: [
         {
@@ -166,8 +133,7 @@ import { AuthBearerInterceptor } from './services';
                 source: 'resources/lazy-loading'
             }
         },
-        PreviewService,
-        HeaderDataService
+        PreviewService
     ],
     entryComponents: [
         VersionManagerDialogAdapterComponent,
diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts
index b5b733a358..957bbe0017 100644
--- a/demo-shell/src/app/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -20,10 +20,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard, AuthGuardEcm, ErrorContentComponent, AuthGuardBpm } from '@alfresco/adf-core';
 import { AppLayoutComponent } from './components/app-layout/app-layout.component';
 import { LoginComponent } from './components/login/login.component';
-import { SettingsComponent } from './components/settings/settings.component';
 import { HomeComponent } from './components/home/home.component';
 import { LogoutComponent } from './components/logout/logout.component';
-import { AboutComponent } from './components/about/about.component';
 import { ProcessServiceComponent } from './components/process-service/process-service.component';
 import { ShowDiagramComponent } from './components/process-service/show-diagram.component';
 import { FormViewerComponent } from './components/process-service/form-viewer.component';
@@ -31,36 +29,25 @@ import { FormNodeViewerComponent } from './components/process-service/form-node-
 import { AppsViewComponent } from './components/process-service/apps-view.component';
 import { SearchResultComponent } from './components/search/search-result.component';
 import { SearchExtendedComponent } from './components/search/search-extended.component';
-import { TrashcanComponent } from './components/trashcan/trashcan.component';
 
-import { DataTableComponent } from './components/datatable/datatable.component';
-import { WebscriptComponent } from './components/webscript/webscript.component';
-import { TagComponent } from './components/tag/tag.component';
-import { SocialComponent } from './components/social/social.component';
 import { FilesComponent } from './components/files/files.component';
 import { FormComponent } from './components/form/form.component';
 
-import { CustomSourcesComponent } from './components/files/custom-sources.component';
 import { FormListComponent } from './components/form/form-list.component';
 import { OverlayViewerComponent } from './components/overlay-viewer/overlay-viewer.component';
 import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
 import { FormLoadingComponent } from './components/form/form-loading.component';
 import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
-import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb-demo.component';
-import { TaskListDemoComponent } from './components/task-list-demo/task-list-demo.component';
-import { ProcessListDemoComponent } from './components/process-list-demo/process-list-demo.component';
-import { NotificationsComponent } from './components/notifications/notifications.component';
-import { CardViewComponent } from './components/card-view/card-view.component';
-import { ContentNodeSelectorComponent } from './components/content-node-selector/content-node-selector.component';
 import { ReportIssueComponent } from './components/report-issue/report-issue.component';
-import { HeaderDataComponent } from './components/header-data/header-data.component';
-import { ConfigEditorComponent } from './components/config-editor/config-editor.component';
 import { AppComponent } from './app.component';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginComponent },
     { path: 'logout', component: LogoutComponent },
-    { path: 'settings', component: SettingsComponent },
+    {
+        path: 'settings',
+        loadChildren: 'app/components/settings/settings.module#AppSettingsModule'
+    },
     {
         path: 'files/:nodeId/view',
         component: AppComponent,
@@ -89,8 +76,8 @@ export const appRoutes: Routes = [
     { path: 'preview/s/:id', component: SharedLinkViewComponent },
     {
         path: 'breadcrumb',
-        component: BreadcrumbDemoComponent,
-        canActivate: [AuthGuardEcm]
+        canActivate: [AuthGuardEcm],
+        loadChildren: 'app/components/breadcrumb-demo/breadcrumb-demo.module#AppBreadcrumbModule'
     },
     {
         path: 'notifications',
@@ -98,7 +85,7 @@ export const appRoutes: Routes = [
         children: [
             {
                 path: '',
-                component: NotificationsComponent
+                loadChildren: 'app/components/notifications/notifications.module#AppNotificationsModule'
             }
         ]
     },
@@ -108,7 +95,7 @@ export const appRoutes: Routes = [
         children: [
             {
                 path: '',
-                component: ConfigEditorComponent
+                loadChildren: 'app/components/config-editor/config-editor.module#AppConfigEditorModule'
             }
         ]
     },
@@ -118,7 +105,7 @@ export const appRoutes: Routes = [
         children: [
             {
                 path: '',
-                component: CardViewComponent
+                loadChildren: 'app/components/card-view/card-view.module#AppCardViewModule'
             }
         ]
     },
@@ -128,7 +115,7 @@ export const appRoutes: Routes = [
         children: [
             {
                 path: '',
-                component: HeaderDataComponent
+                loadChildren: 'app/components/header-data/header-data.module#AppHeaderDataModule'
             }
         ]
     },
@@ -147,16 +134,16 @@ export const appRoutes: Routes = [
             },
             {
                 path: 'node-selector',
-                component: ContentNodeSelectorComponent
+                loadChildren: 'app/components/content-node-selector/content-node-selector.module#AppContentNodeSelectorModule'
             },
             {
                 path: 'settings-layout',
-                component: SettingsComponent
+                loadChildren: 'app/components/settings/settings.module#AppSettingsModule'
             },
             {
                 path: 'trashcan',
-                component: TrashcanComponent,
-                canActivate: [AuthGuardEcm]
+                canActivate: [AuthGuardEcm],
+                loadChildren: 'app/components/trashcan/trashcan.module#AppTrashcanModule'
             },
             {
                 path: 'files',
@@ -175,12 +162,13 @@ export const appRoutes: Routes = [
             },
             {
                 path: 'dl-custom-sources',
-                component: CustomSourcesComponent,
-                canActivate: [AuthGuardEcm]
+                canActivate: [AuthGuardEcm],
+                loadChildren: 'app/components/files/custom-sources.module#AppCustomSourcesModule'
+
             },
             {
                 path: 'datatable',
-                component: DataTableComponent
+                loadChildren: 'app/components/datatable/datatable.module#AppDataTableModule'
             },
             {
                 path: 'search',
@@ -252,25 +240,28 @@ export const appRoutes: Routes = [
             },
             {
                 path: 'webscript',
-                component: WebscriptComponent,
-                canActivate: [AuthGuardEcm]
+                canActivate: [AuthGuardEcm],
+                loadChildren: 'app/components/webscript/webscript.module#AppWebScriptModule'
             },
             {
                 path: 'tag',
-                component: TagComponent,
-                canActivate: [AuthGuardEcm]
+                canActivate: [AuthGuardEcm],
+                loadChildren: 'app/components/tag/tag.module#AppTagModule'
             },
             {
                 path: 'social',
-                component: SocialComponent,
-                canActivate: [AuthGuardEcm]
+                canActivate: [AuthGuardEcm],
+                loadChildren: 'app/components/social/social.module#AppSocialModule'
             },
             {
                 path: 'permissions/:id',
                 component: DemoPermissionComponent,
                 canActivate: [AuthGuardEcm]
             },
-            { path: 'about', component: AboutComponent },
+            {
+                path: 'about',
+                loadChildren: 'app/components/about/about.module#AppAboutModule'
+            },
             { path: 'form', component: FormComponent },
             { path: 'form-list', component: FormListComponent },
             { path: 'form-loading', component: FormLoadingComponent },
@@ -289,23 +280,13 @@ export const appRoutes: Routes = [
             },
             {
                 path: 'task-list',
-                component: TaskListDemoComponent,
-                canActivate: [AuthGuardBpm]
-            },
-            {
-                path: 'task-list/:id',
-                component: TaskListDemoComponent,
-                canActivate: [AuthGuardBpm]
+                canActivate: [AuthGuardBpm],
+                loadChildren: 'app/components/task-list-demo/task-list.module#AppTaskListModule'
             },
             {
                 path: 'process-list',
-                component: ProcessListDemoComponent,
-                canActivate: [AuthGuardBpm]
-            },
-            {
-                path: 'process-list/:id',
-                component: ProcessListDemoComponent,
-                canActivate: [AuthGuardBpm]
+                canActivate: [AuthGuardBpm],
+                loadChildren: 'app/components/process-list-demo/process-list.module#AppProcessListModule'
             },
             {
                 path: 'error/:id',
diff --git a/demo-shell/src/app/components/about/about.module.ts b/demo-shell/src/app/components/about/about.module.ts
new file mode 100644
index 0000000000..a6c38665da
--- /dev/null
+++ b/demo-shell/src/app/components/about/about.module.ts
@@ -0,0 +1,39 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AboutComponent } from './about.component';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: AboutComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        RouterModule.forChild(routes)
+    ],
+    declarations: [AboutComponent]
+})
+export class AppAboutModule {}
diff --git a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.module.ts b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.module.ts
new file mode 100644
index 0000000000..5c3acf0760
--- /dev/null
+++ b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.module.ts
@@ -0,0 +1,42 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { BreadcrumbDemoComponent } from './breadcrumb-demo.component';
+import { CoreModule } from '@alfresco/adf-core';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { ContentModule } from '@alfresco/adf-content-services';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: BreadcrumbDemoComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        RouterModule.forChild(routes),
+        ContentModule.forChild()
+    ],
+    declarations: [BreadcrumbDemoComponent],
+    exports: [BreadcrumbDemoComponent]
+})
+export class AppBreadcrumbModule {}
diff --git a/demo-shell/src/app/components/card-view/card-view.module.ts b/demo-shell/src/app/components/card-view/card-view.module.ts
new file mode 100644
index 0000000000..29f9901caf
--- /dev/null
+++ b/demo-shell/src/app/components/card-view/card-view.module.ts
@@ -0,0 +1,39 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { CardViewComponent } from './card-view.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: CardViewComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        RouterModule.forChild(routes)
+    ],
+    declarations: [CardViewComponent]
+})
+export class AppCardViewModule {}
diff --git a/demo-shell/src/app/components/config-editor/config-editor.module.ts b/demo-shell/src/app/components/config-editor/config-editor.module.ts
new file mode 100644
index 0000000000..e62f3e1f29
--- /dev/null
+++ b/demo-shell/src/app/components/config-editor/config-editor.module.ts
@@ -0,0 +1,41 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { ConfigEditorComponent } from './config-editor.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { MonacoEditorModule } from 'ngx-monaco-editor';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: ConfigEditorComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        RouterModule.forChild(routes),
+        MonacoEditorModule
+    ],
+    declarations: [ConfigEditorComponent]
+})
+export class AppConfigEditorModule {}
diff --git a/demo-shell/src/app/components/content-node-selector/content-node-selector.module.ts b/demo-shell/src/app/components/content-node-selector/content-node-selector.module.ts
new file mode 100644
index 0000000000..7ff2a7741e
--- /dev/null
+++ b/demo-shell/src/app/components/content-node-selector/content-node-selector.module.ts
@@ -0,0 +1,41 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { ContentNodeSelectorComponent } from './content-node-selector.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: ContentNodeSelectorComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule.forChild(),
+        ContentModule.forChild()
+    ],
+    declarations: [ContentNodeSelectorComponent]
+})
+export class AppContentNodeSelectorModule {}
diff --git a/demo-shell/src/app/components/datatable/datatable.module.ts b/demo-shell/src/app/components/datatable/datatable.module.ts
new file mode 100644
index 0000000000..c496a3d600
--- /dev/null
+++ b/demo-shell/src/app/components/datatable/datatable.module.ts
@@ -0,0 +1,41 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { DataTableComponent } from './datatable.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: DataTableComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        RouterModule.forChild(routes),
+        ContentModule.forChild()
+    ],
+    declarations: [DataTableComponent]
+})
+export class AppDataTableModule {}
diff --git a/demo-shell/src/app/components/files/custom-sources.module.ts b/demo-shell/src/app/components/files/custom-sources.module.ts
new file mode 100644
index 0000000000..2a726a2b92
--- /dev/null
+++ b/demo-shell/src/app/components/files/custom-sources.module.ts
@@ -0,0 +1,41 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { CustomSourcesComponent } from './custom-sources.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: CustomSourcesComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule.forChild(),
+        ContentModule.forChild()
+    ],
+    declarations: [CustomSourcesComponent]
+})
+export class AppCustomSourcesModule {}
diff --git a/demo-shell/src/app/components/header-data/header-data.module.ts b/demo-shell/src/app/components/header-data/header-data.module.ts
new file mode 100644
index 0000000000..559b536d77
--- /dev/null
+++ b/demo-shell/src/app/components/header-data/header-data.module.ts
@@ -0,0 +1,39 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { HeaderDataComponent } from './header-data.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: HeaderDataComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule.forChild()
+    ],
+    declarations: [HeaderDataComponent]
+})
+export class AppHeaderDataModule {}
diff --git a/demo-shell/src/app/components/header-data/header-data.service.ts b/demo-shell/src/app/components/header-data/header-data.service.ts
index 3114c7417f..c26062a4c8 100644
--- a/demo-shell/src/app/components/header-data/header-data.service.ts
+++ b/demo-shell/src/app/components/header-data/header-data.service.ts
@@ -17,7 +17,9 @@
 
 import { Injectable, Output, EventEmitter } from '@angular/core';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class HeaderDataService {
 
     show = true;
diff --git a/demo-shell/src/app/components/notifications/notifications.module.ts b/demo-shell/src/app/components/notifications/notifications.module.ts
new file mode 100644
index 0000000000..f8e1a3d69e
--- /dev/null
+++ b/demo-shell/src/app/components/notifications/notifications.module.ts
@@ -0,0 +1,39 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { NotificationsComponent } from './notifications.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: NotificationsComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        RouterModule.forChild(routes)
+    ],
+    declarations: [NotificationsComponent]
+})
+export class AppNotificationsModule {}
diff --git a/demo-shell/src/app/components/process-list-demo/process-list.module.ts b/demo-shell/src/app/components/process-list-demo/process-list.module.ts
new file mode 100644
index 0000000000..42a6c47472
--- /dev/null
+++ b/demo-shell/src/app/components/process-list-demo/process-list.module.ts
@@ -0,0 +1,45 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { ProcessListDemoComponent } from './process-list-demo.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ProcessModule } from '@alfresco/adf-process-services';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: ProcessListDemoComponent
+    },
+    {
+        path: ':id',
+        component: ProcessListDemoComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule.forChild(),
+        ProcessModule.forChild()
+    ],
+    declarations: [ProcessListDemoComponent]
+})
+export class AppProcessListModule {}
diff --git a/demo-shell/src/app/components/settings/settings.module.ts b/demo-shell/src/app/components/settings/settings.module.ts
new file mode 100644
index 0000000000..98b514bb12
--- /dev/null
+++ b/demo-shell/src/app/components/settings/settings.module.ts
@@ -0,0 +1,39 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { SettingsComponent } from './settings.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: SettingsComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule.forChild()
+    ],
+    declarations: [SettingsComponent]
+})
+export class AppSettingsModule {}
diff --git a/demo-shell/src/app/components/social/social.module.ts b/demo-shell/src/app/components/social/social.module.ts
new file mode 100644
index 0000000000..77caf7dca8
--- /dev/null
+++ b/demo-shell/src/app/components/social/social.module.ts
@@ -0,0 +1,41 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { SocialComponent } from './social.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: SocialComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule.forChild(),
+        ContentModule.forChild()
+    ],
+    declarations: [SocialComponent]
+})
+export class AppSocialModule {}
diff --git a/demo-shell/src/app/components/tag/tag.module.ts b/demo-shell/src/app/components/tag/tag.module.ts
new file mode 100644
index 0000000000..ec3e8f360c
--- /dev/null
+++ b/demo-shell/src/app/components/tag/tag.module.ts
@@ -0,0 +1,41 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { TagComponent } from './tag.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: TagComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule.forChild(),
+        ContentModule.forChild()
+    ],
+    declarations: [TagComponent]
+})
+export class AppTagModule {}
diff --git a/demo-shell/src/app/components/task-list-demo/task-list.module.ts b/demo-shell/src/app/components/task-list-demo/task-list.module.ts
new file mode 100644
index 0000000000..6a5062d1ab
--- /dev/null
+++ b/demo-shell/src/app/components/task-list-demo/task-list.module.ts
@@ -0,0 +1,45 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { TaskListDemoComponent } from './task-list-demo.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ProcessModule } from '@alfresco/adf-process-services';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: TaskListDemoComponent
+    },
+    {
+        path: ':id',
+        component: TaskListDemoComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule.forChild(),
+        ProcessModule.forChild()
+    ],
+    declarations: [TaskListDemoComponent]
+})
+export class AppTaskListModule {}
diff --git a/demo-shell/src/app/components/trashcan/trashcan.module.ts b/demo-shell/src/app/components/trashcan/trashcan.module.ts
new file mode 100644
index 0000000000..772dfe3105
--- /dev/null
+++ b/demo-shell/src/app/components/trashcan/trashcan.module.ts
@@ -0,0 +1,41 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { TrashcanComponent } from './trashcan.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: TrashcanComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule.forChild(),
+        ContentModule.forChild()
+    ],
+    declarations: [TrashcanComponent]
+})
+export class AppTrashcanModule {}
diff --git a/demo-shell/src/app/components/webscript/webscript.module.ts b/demo-shell/src/app/components/webscript/webscript.module.ts
new file mode 100644
index 0000000000..4a65107ade
--- /dev/null
+++ b/demo-shell/src/app/components/webscript/webscript.module.ts
@@ -0,0 +1,41 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { WebscriptComponent } from './webscript.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: WebscriptComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule.forChild(),
+        ContentModule.forChild()
+    ],
+    declarations: [WebscriptComponent]
+})
+export class AppWebScriptModule {}