[ACA-1608] lazy loading support for Viewer and About screens (#526)

* move viewer and directives to separate modules * lazy loading for Viewer and About screens * lazy loading support for extensions module
2025-07-31 17:38:28 +00:00 · 2018-07-21 15:36:26 +01:00
parent af63af575c
commit 9c92fca44f
10 changed files with 306 additions and 76 deletions
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -36,7 +36,6 @@ import { APP_ROUTES } from './app.routes';

 import { GenericErrorComponent } from './components/generic-error/generic-error.component';
 import { LoginComponent } from './components/login/login.component';
-import { PreviewComponent } from './components/preview/preview.component';
 import { FilesComponent } from './components/files/files.component';
 import { FavoritesComponent } from './components/favorites/favorites.component';
 import { LibrariesComponent } from './components/libraries/libraries.component';
@@ -49,16 +48,8 @@ import { CurrentUserComponent } from './components/current-user/current-user.com
 import { SearchInputComponent } from './components/search/search-input/search-input.component';
 import { SearchInputControlComponent } from './components/search/search-input-control/search-input-control.component';
 import { SidenavComponent } from './components/sidenav/sidenav.component';
-import { AboutComponent } from './components/about/about.component';
 import { LocationLinkComponent } from './components/location-link/location-link.component';
 import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
-import { NodeCopyDirective } from './directives/node-copy.directive';
-import { NodeDeleteDirective } from './directives/node-delete.directive';
-import { NodeMoveDirective } from './directives/node-move.directive';
-import { NodeRestoreDirective } from './directives/node-restore.directive';
-import { NodePermanentDeleteDirective } from './directives/node-permanent-delete.directive';
-import { NodeUnshareDirective } from './directives/node-unshare.directive';
-import { NodeVersionsDirective } from './directives/node-versions.directive';
 import { NodeVersionsDialogComponent } from './dialogs/node-versions/node-versions.dialog';
 import { LibraryDialogComponent } from './dialogs/library/library.dialog';
 import { ContentManagementService } from './services/content-management.service';
@@ -69,23 +60,19 @@ import { SettingsComponent } from './components/settings/settings.component';
 import { ProfileResolver } from './services/profile.resolver';
 import { ExperimentalGuard } from './services/experimental-guard.service';

-import { InfoDrawerComponent } from './components/info-drawer/info-drawer.component';
-import { EditFolderDirective } from './directives/edit-folder.directive';
 import { AppStoreModule } from './store/app-store.module';
-import { PaginationDirective } from './directives/pagination.directive';
-import { DocumentListDirective } from './directives/document-list.directive';
 import { MaterialModule } from './material.module';
-import { ExperimentalDirective } from './directives/experimental.directive';
 import { ContentApiService } from './services/content-api.service';
 import { ExtensionsModule } from './extensions.module';
 import { CoreExtensionsModule } from './extensions/core.extensions.module';
 import { SearchResultsRowComponent } from './components/search/search-results-row/search-results-row.component';
 import { NodePermissionsDialogComponent } from './dialogs/node-permissions/node-permissions.dialog';
-import { NodePermissionsDirective } from './directives/node-permissions.directive';
 import { PermissionsManagerComponent } from './components/permission-manager/permissions-manager.component';
 import { AppRouteReuseStrategy } from './app.routes.strategy';
 import { ViewUtilService} from './services/view-util.service';
 import { ExtensionService } from './extensions/extension.service';
+import { AppInfoDrawerModule } from './components/info-drawer/info.drawer.module';
+import { DirectivesModule } from './directives/directives.module';

 export function setupExtensionServiceFactory(service: ExtensionService): Function {
    return () => service.load();
@@ -104,8 +91,11 @@ export function setupExtensionServiceFactory(service: ExtensionService): Functio
        CoreModule.forRoot(),
        ContentModule,
        AppStoreModule,
-        CoreExtensionsModule,
-        ExtensionsModule
+        CoreExtensionsModule.forRoot(),
+        ExtensionsModule,
+
+        DirectivesModule,
+        AppInfoDrawerModule
    ],
    declarations: [
        AppComponent,
@@ -123,30 +113,15 @@ export function setupExtensionServiceFactory(service: ExtensionService): Functio
        RecentFilesComponent,
        SharedFilesComponent,
        TrashcanComponent,
-        PreviewComponent,
-        AboutComponent,
        LocationLinkComponent,
        SearchResultsRowComponent,
-        NodeCopyDirective,
-        NodeDeleteDirective,
-        NodeMoveDirective,
-        NodeRestoreDirective,
-        NodePermanentDeleteDirective,
-        NodeUnshareDirective,
-        NodeVersionsDirective,
-        NodePermissionsDirective,
        NodeVersionsDialogComponent,
        LibraryDialogComponent,
        NodePermissionsDialogComponent,
        PermissionsManagerComponent,
        SearchResultsComponent,
        SettingsComponent,
-        InfoDrawerComponent,
-        SharedLinkViewComponent,
-        EditFolderDirective,
-        PaginationDirective,
-        DocumentListDirective,
-        ExperimentalDirective
+        SharedLinkViewComponent
    ],
    providers: [
        { provide: RouteReuseStrategy, useClass: AppRouteReuseStrategy },
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -35,10 +35,8 @@ import { LibrariesComponent } from './components/libraries/libraries.component';
 import { RecentFilesComponent } from './components/recent-files/recent-files.component';
 import { SharedFilesComponent } from './components/shared-files/shared-files.component';
 import { TrashcanComponent } from './components/trashcan/trashcan.component';
-import { AboutComponent } from './components/about/about.component';

 import { LoginComponent } from './components/login/login.component';
-import { PreviewComponent } from './components/preview/preview.component';
 import { GenericErrorComponent } from './components/generic-error/generic-error.component';
 import { SearchResultsComponent } from './components/search/search-results/search-results.component';
 import { SettingsComponent } from './components/settings/settings.component';
@@ -95,7 +93,7 @@ export const APP_ROUTES: Routes = [
                    },
                    {
                        path: 'preview/:nodeId',
-                        component: PreviewComponent,
+                        loadChildren: 'app/components/preview/preview.module#PreviewModule',
                        data: {
                            title: 'APP.PREVIEW.TITLE',
                            navigateMultiple: true,
@@ -125,7 +123,7 @@ export const APP_ROUTES: Routes = [
                },
                {
                    path: ':folderId/preview/:nodeId',
-                    component: PreviewComponent,
+                    loadChildren: 'app/components/preview/preview.module#PreviewModule',
                    data: {
                        title: 'APP.PREVIEW.TITLE',
                        navigateMultiple: true,
@@ -157,7 +155,7 @@ export const APP_ROUTES: Routes = [
                    },
                    {
                        path: 'preview/:nodeId',
-                        component: PreviewComponent,
+                        loadChildren: 'app/components/preview/preview.module#PreviewModule',
                        data: {
                            title: 'APP.PREVIEW.TITLE',
                            navigateMultiple: true,
@@ -166,7 +164,7 @@ export const APP_ROUTES: Routes = [
                    },
                    {
                        path: ':folderId/preview/:nodeId',
-                        component: PreviewComponent,
+                        loadChildren: 'app/components/preview/preview.module#PreviewModule',
                        data: {
                            title: 'APP.PREVIEW.TITLE',
                            navigateMultiple: true,
@@ -190,7 +188,7 @@ export const APP_ROUTES: Routes = [
                    },
                    {
                        path: 'preview/:nodeId',
-                        component: PreviewComponent,
+                        loadChildren: 'app/components/preview/preview.module#PreviewModule',
                        data: {
                            title: 'APP.PREVIEW.TITLE',
                            navigateMultiple: true,
@@ -214,7 +212,7 @@ export const APP_ROUTES: Routes = [
                    },
                    {
                        path: 'preview/:nodeId',
-                        component: PreviewComponent,
+                        loadChildren: 'app/components/preview/preview.module#PreviewModule',
                        data: {
                            title: 'APP.PREVIEW.TITLE',
                            navigateMultiple: true,
@@ -233,7 +231,7 @@ export const APP_ROUTES: Routes = [
            },
            {
                path: 'about',
-                component: AboutComponent,
+                loadChildren: 'app/components/about/about.module#AboutModule',
                data: {
                    title: 'APP.BROWSE.ABOUT.TITLE'
                }
@@ -251,7 +249,7 @@ export const APP_ROUTES: Routes = [
                    },
                    {
                        path: 'preview/:nodeId',
-                        component: PreviewComponent,
+                        loadChildren: 'app/components/preview/preview.module#PreviewModule',
                        data: {
                            title: 'APP.PREVIEW.TITLE',
                            navigateMultiple: true,
--- a/src/app/components/about/about.module.ts
+++ b/src/app/components/about/about.module.ts
@@ -0,0 +1,48 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+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 AboutModule {
+}
--- a/src/app/components/info-drawer/info.drawer.module.ts
+++ b/src/app/components/info-drawer/info.drawer.module.ts
@@ -0,0 +1,50 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentMetadataModule, VersionManagerModule } from '@alfresco/adf-content-services';
+import { InfoDrawerComponent } from './info-drawer.component';
+import { DirectivesModule } from '../../directives/directives.module';
+import { MaterialModule } from '../../material.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        MaterialModule,
+        CoreModule.forChild(),
+        ContentMetadataModule,
+        VersionManagerModule,
+        DirectivesModule
+    ],
+    declarations: [
+        InfoDrawerComponent
+    ],
+    exports: [
+        InfoDrawerComponent
+    ]
+})
+export class AppInfoDrawerModule {}
--- a/src/app/components/preview/preview.module.ts
+++ b/src/app/components/preview/preview.module.ts
@@ -0,0 +1,63 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { CoreModule } from '@alfresco/adf-core';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { DirectivesModule } from '../../directives/directives.module';
+import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
+import { PreviewComponent } from './preview.component';
+import { ContentDirectiveModule } from '@alfresco/adf-content-services';
+
+import * as pdfjsLib from 'pdfjs-dist';
+pdfjsLib.PDFJS.workerSrc = 'pdf.worker.js';
+pdfjsLib.PDFJS.disableFontFace = true;
+
+const routes: Routes = [
+    {
+        path: '',
+        component: PreviewComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule.forChild(),
+        ContentDirectiveModule,
+        DirectivesModule,
+        AppInfoDrawerModule
+    ],
+    declarations: [
+        PreviewComponent,
+    ],
+    exports: [
+        PreviewComponent
+    ]
+})
+export class PreviewModule {}
--- a/src/app/directives/directives.module.ts
+++ b/src/app/directives/directives.module.ts
@@ -0,0 +1,70 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { ExperimentalDirective } from './experimental.directive';
+import { DocumentListDirective } from './document-list.directive';
+import { EditFolderDirective } from './edit-folder.directive';
+import { NodeCopyDirective } from './node-copy.directive';
+import { NodeDeleteDirective } from './node-delete.directive';
+import { NodeMoveDirective } from './node-move.directive';
+import { NodePermanentDeleteDirective } from './node-permanent-delete.directive';
+import { NodePermissionsDirective } from './node-permissions.directive';
+import { NodeRestoreDirective } from './node-restore.directive';
+import { NodeUnshareDirective } from './node-unshare.directive';
+import { NodeVersionsDirective } from './node-versions.directive';
+import { PaginationDirective } from './pagination.directive';
+
+@NgModule({
+    declarations: [
+        ExperimentalDirective,
+        DocumentListDirective,
+        EditFolderDirective,
+        NodeCopyDirective,
+        NodeDeleteDirective,
+        NodeMoveDirective,
+        NodePermanentDeleteDirective,
+        NodePermissionsDirective,
+        NodeRestoreDirective,
+        NodeUnshareDirective,
+        NodeVersionsDirective,
+        PaginationDirective
+    ],
+    exports: [
+        ExperimentalDirective,
+        DocumentListDirective,
+        EditFolderDirective,
+        NodeCopyDirective,
+        NodeDeleteDirective,
+        NodeMoveDirective,
+        NodePermanentDeleteDirective,
+        NodePermissionsDirective,
+        NodeRestoreDirective,
+        NodeUnshareDirective,
+        NodeVersionsDirective,
+        PaginationDirective
+    ]
+})
+export class DirectivesModule {}
--- a/src/app/extensions/core.extensions.module.ts
+++ b/src/app/extensions/core.extensions.module.ts
@@ -23,10 +23,9 @@
 * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
 */

-import { NgModule } from '@angular/core';
+import { NgModule, ModuleWithProviders, APP_INITIALIZER } from '@angular/core';
 import { AuthGuardEcm, CoreModule } from '@alfresco/adf-core';
 import { ExtensionService } from './extension.service';
-import { AboutComponent } from '../components/about/about.component';
 import { LayoutComponent } from '../components/layout/layout.component';
 import { ToolbarActionComponent } from './components/toolbar-action/toolbar-action.component';
 import { CommonModule } from '@angular/common';
@@ -38,30 +37,58 @@ import {
    hasFileSelected,
    canDownloadSelection
 } from './evaluators/app.evaluators';
+import { TrashcanComponent } from '../components/trashcan/trashcan.component';
+
+function setupExtensions(extensions: ExtensionService): Function {
+    return () =>
+        new Promise(resolve => {
+            extensions
+                .setComponent('app.layout.main', LayoutComponent)
+                .setComponent('app.components.trashcan', TrashcanComponent)
+                .setAuthGuard('app.auth', AuthGuardEcm)
+
+                .setEvaluator('core.every', every)
+                .setEvaluator('core.some', some)
+                .setEvaluator('app.selection.canDownload', canDownloadSelection)
+                .setEvaluator('app.selection.file', hasFileSelected)
+                .setEvaluator('app.selection.folder', hasFolderSelected)
+                .setEvaluator(
+                    'app.selection.folder.canUpdate',
+                    canUpdateSelectedFolder
+                )
+                .setEvaluator(
+                    'app.navigation.folder.canCreate',
+                    canCreateFolder
+                );
+
+            resolve(true);
+        });
+}

@NgModule({
    imports: [CommonModule, CoreModule.forChild()],
    declarations: [ToolbarActionComponent],
-    exports: [ToolbarActionComponent],
-    entryComponents: [AboutComponent],
-    providers: [ExtensionService]
+    exports: [ToolbarActionComponent]
 })
 export class CoreExtensionsModule {
-    constructor(extensions: ExtensionService) {
-        extensions
-            .setComponent('app.layout.main', LayoutComponent)
-            .setComponent('app.components.about', AboutComponent)
-            .setAuthGuard('app.auth', AuthGuardEcm)
+    static forRoot(): ModuleWithProviders {
+        return {
+            ngModule: CoreExtensionsModule,
+            providers: [
+                ExtensionService,
+                {
+                    provide: APP_INITIALIZER,
+                    useFactory: setupExtensions,
+                    deps: [ExtensionService],
+                    multi: true
+                }
+            ]
+        };
+    }

-            .setEvaluator('core.every', every)
-            .setEvaluator('core.some', some)
-            .setEvaluator('app.selection.canDownload', canDownloadSelection)
-            .setEvaluator('app.selection.file', hasFileSelected)
-            .setEvaluator('app.selection.folder', hasFolderSelected)
-            .setEvaluator(
-                'app.selection.folder.canUpdate',
-                canUpdateSelectedFolder
-            )
-            .setEvaluator('app.navigation.folder.canCreate', canCreateFolder);
+    static forChild(): ModuleWithProviders {
+        return {
+            ngModule: CoreExtensionsModule
+        };
    }
 }
--- a/src/app/material.module.ts
+++ b/src/app/material.module.ts
@@ -30,7 +30,8 @@ import {
    MatButtonModule,
    MatDialogModule,
    MatInputModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    MatProgressBarModule
 } from '@angular/material';

@NgModule({
@@ -40,7 +41,8 @@ import {
        MatButtonModule,
        MatDialogModule,
        MatInputModule,
-        MatSnackBarModule
+        MatSnackBarModule,
+        MatProgressBarModule
    ],
    exports: [
        MatMenuModule,
@@ -48,7 +50,8 @@ import {
        MatButtonModule,
        MatDialogModule,
        MatInputModule,
-        MatSnackBarModule
+        MatSnackBarModule,
+        MatProgressBarModule
    ]
 })
 export class MaterialModule {}
--- a/src/assets/plugins/plugin2.json
+++ b/src/assets/plugins/plugin2.json
@@ -7,10 +7,10 @@
    "routes": [
        {
            "id": "plugin2.routes.about",
-            "path": "ext/about",
-            "component": "app.components.about",
+            "path": "ext/bin",
+            "component": "app.components.trashcan",
            "data": {
-                "title": "Custom About"
+                "title": "Custom Trashcan"
            }
        }
    ],
@@ -24,14 +24,14 @@
                    {
                        "id": "plugin2.navbar.group1.link1",
                        "icon": "build",
-                        "title": "About (native)",
+                        "title": "Trashcan (native)",
                        "description": "Uses native application route",
-                        "route": "about"
+                        "route": "trashcan"
                    },
                    {
                        "id": "plugin2.navbar.group1.link2",
                        "icon": "build",
-                        "title": "About (custom)",
+                        "title": "Trashcan (custom)",
                        "description": "Uses custom defined route",
                        "route": "plugin2.routes.about"
                    }
--- a/src/main.ts
+++ b/src/main.ts
@@ -31,10 +31,6 @@ import { environment } from './environments/environment';

 import 'hammerjs';

-import * as pdfjsLib from 'pdfjs-dist';
-pdfjsLib.PDFJS.workerSrc = 'pdf.worker.js';
-pdfjsLib.PDFJS.disableFontFace = true;
-
 if (environment.production) {
  enableProdMode();
 }