[ADF-2064] Lazy loading support (#2811)

* remove BrowserAnimationsModule dependency

* improve test shim

* update test shim

* test shim updates

* example of lazy-loaded datatable

* local and global i18n demo for lazy modules

* lazy loading support for CoreModule providers

* test shim updates

* update test shim

* support global i18n for lazy modules

* cleanup lazy loading example

* update card view after rebase

* backwards compatibility

* cleanup files

* fix code after rebase

demo-shell/src/app/app.module.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ChartsModule } from 'ng2-charts';
 import { HttpClientModule } from '@angular/common/http';
-import { TranslateService } from '@ngx-translate/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppConfigService, TRANSLATION_PROVIDER } from '@alfresco/adf-core';
 import { AppComponent } from './app.component';
@@ -40,7 +40,6 @@ import { ThemePickerModule } from './components/theme-picker/theme-picker';
 import { DebugAppConfigService } from './services/debug-app-config.service';
 
 import { routing } from './app.routes';
-import { TranslateModule } from '@ngx-translate/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TaskAttachmentsComponent } from './components/process-service/task-attachments.component';
 import { ProcessAttachmentsComponent } from './components/process-service/process-attachments.component';
@@ -49,8 +48,8 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
 
 @NgModule({
     imports: [
+        BrowserAnimationsModule,
         ReactiveFormsModule,
-        TranslateModule,
         BrowserModule,
         routing,
         FormsModule,
@@ -92,7 +91,6 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
         SharedLinkViewComponent
     ],
     providers: [
-        TranslateService,
         { provide: AppConfigService, useClass: DebugAppConfigService },
         {
             provide: TRANSLATION_PROVIDER,
@@ -101,6 +99,14 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
                 name: 'app',
                 source: 'resources'
             }
+        },
+        {
+            provide: TRANSLATION_PROVIDER,
+            multi: true,
+            useValue: {
+                name: 'lazy-loading',
+                source: 'resources/lazy-loading'
+            }
         }
     ],
     entryComponents: [

demo-shell/src/app/app.routes.ts

@@ -166,6 +166,10 @@ export const appRoutes: Routes = [
                 path: 'overlay-viewer',
                 component: OverlayViewerComponent,
                 canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'datatable-lazy',
+                loadChildren: 'app/components/lazy-loading/lazy-loading.module#LazyLoadingModule'
             }
         ]
     }

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -34,6 +34,7 @@ export class AppLayoutComponent {
         { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
         { href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
         { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
+        { href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' },
         { href: '/form', icon: 'poll', title: 'APP_LAYOUT.FORM' },
         { href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
         { href: '/uploader', icon: 'file_upload', title: 'APP_LAYOUT.UPLOADER' },

demo-shell/src/app/components/lazy-loading/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "LAZY": {
+    "TEXT": "Text from lazy component resources"
+  }
+}

demo-shell/src/app/components/lazy-loading/lazy-loading.component.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { ObjectDataTableAdapter, AuthenticationService } from '@alfresco/adf-core';
+
+@Component({
+    selector: 'app-lazy-component',
+    template: `
+        <adf-datatable [data]="data"></adf-datatable>
+
+        <ul>
+            <li>Global i18n: {{ 'APP_LAYOUT.DATATABLE_LAZY' | translate }}</li>
+            <li>Local i18n (work in progress): {{ 'LAZY.TEXT' | translate }}</li>
+            <li>isLoggedIn: {{ isLoggedIn }}</li>
+            <li>ECM username: {{ username }}
+        </ul>
+    `
+})
+export class LazyLoadingComponent {
+
+    data: ObjectDataTableAdapter;
+
+    get isLoggedIn(): boolean {
+        return this.auth.isLoggedIn();
+    }
+
+    get username(): string {
+        return this.auth.getEcmUsername();
+    }
+
+    constructor(private auth: AuthenticationService) {
+        this.data = new ObjectDataTableAdapter(
+            // data
+            [
+              {id: 1, name: 'Name 1'},
+              {id: 2, name: 'Name 2'}
+            ],
+            // schema
+            [
+              {
+                type: 'text',
+                key: 'id',
+                title: 'Id',
+                sortable: true
+              },
+              {
+                type: 'text',
+                key: 'name',
+                title: 'Name',
+                cssClass: 'full-width',
+                sortable: true
+              }
+            ]
+        );
+    }
+}

demo-shell/src/app/components/lazy-loading/lazy-loading.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CoreModule, TranslationService } from '@alfresco/adf-core';
+
+import { LazyLoadingRoutes } from './lazy-loading.routes';
+import { LazyLoadingComponent } from './lazy-loading.component';
+
+@NgModule({
+    imports: [
+        CoreModule.forChild(),
+        LazyLoadingRoutes
+    ],
+    declarations: [
+        LazyLoadingComponent
+    ]
+})
+export class LazyLoadingModule {
+    constructor(translation: TranslationService) {
+    }
+}

demo-shell/src/app/components/lazy-loading/lazy-loading.routes.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LazyLoadingComponent } from './lazy-loading.component';
+
+export const routes: Routes = [
+    {
+        path: '',
+        component: LazyLoadingComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes)
+    ],
+    exports: [
+        RouterModule
+    ]
+})
+export class LazyLoadingRoutes {
+}