lazy loading support for demo shell (#3871)

* breadcrumb demo * datatable demo * about module * notifications module * card view module * config editor module * trashcan module * header data module * node selector module * custom sources module * webscript module * tag module * social module * settings module * task list module * process list module * fix translation minor issue
2025-07-24 17:32:15 +00:00 · 2018-10-11 17:06:23 +01:00
parent 3a9924e9df
commit 07d0290633
20 changed files with 693 additions and 90 deletions
--- 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,
--- 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',
--- a/demo-shell/src/app/components/about/about.module.ts
+++ 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 {}
--- a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.module.ts
+++ 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 {}
--- a/demo-shell/src/app/components/card-view/card-view.module.ts
+++ 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 {}
--- a/demo-shell/src/app/components/config-editor/config-editor.module.ts
+++ 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 {}
--- 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
@@ -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 {}
--- a/demo-shell/src/app/components/datatable/datatable.module.ts
+++ 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 {}
--- a/demo-shell/src/app/components/files/custom-sources.module.ts
+++ 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 {}
--- a/demo-shell/src/app/components/header-data/header-data.module.ts
+++ 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 {}
--- 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;
--- a/demo-shell/src/app/components/notifications/notifications.module.ts
+++ 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 {}
--- 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
@@ -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 {}
--- a/demo-shell/src/app/components/settings/settings.module.ts
+++ 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 {}
--- a/demo-shell/src/app/components/social/social.module.ts
+++ 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 {}
--- a/demo-shell/src/app/components/tag/tag.module.ts
+++ 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 {}
--- 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
@@ -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 {}
--- a/demo-shell/src/app/components/trashcan/trashcan.module.ts
+++ 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 {}
--- a/demo-shell/src/app/components/webscript/webscript.module.ts
+++ 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 {}