[ADF-5146] Upgrade to Angular 10 (#5834)

* remove useless module * upgrade to angular 8 * upgrade material to v8 * upgrade adf libs * migrate demo shell to v8 * upgrade to angular 9 * upgrade material to v9 * remove hammer * upgrade nx * upgrade datetime picker * upgrade flex layout * update core api * remove entry components * code fixes * upgrade testbed usage * code fixes * remove unnecessary core-js from tests * upgrade CLI * ts config fixes * fix builds * fix testing config * compile fixes * fix demo shell dev setup * fix core tests * fix card view import * upgrade nx * disable smart builds for now * remove fdescribe * restore smart builds * fix issues * unify tsconfigs and fix newly found issues * fix configuration and cleanup package scripts * improved production build from the same config * use ADF libs directly instead of node_modules * disable smart build * single app configuration (angular) * fix core build * fix build scripts * lint fixes * fix linting setup * fix linting rules * various fixes * disable affected libs for unit tests * cleanup insights package.json * simplify smart-build * fix content tests * fix tests * test fixes * fix tests * fix test * fix tests * disable AppExtensionsModule (monaco example) * remove monaco extension module * upgrade bundle check rules * fix insights tests and karma config * fix protractor config * e2e workaround * upgrade puppeteer and split linting and build * reusable resources config * update protractor config * fix after rebase * fix protractor config * fix e2e tsconfig * update e2e setup * Save demoshell artifact on S3 and remove travis cache * Push the libs on S3 and fetch before releasing it * Add deps * Add dependencies among libs and run only affected unit test and build * fix the travis stage name * fix after renaming dev to demoshell * force the order of the projects * remove unused dependencies * fix content e2e script * exit codes fix * add extra exit codes to core e2e * postinstall hook and package cleanup * cleanup packages * remove deprecated code and dependency on router * improve bundle analyzer script * minor code fixes * update spec * fix code after rebase * upgrade protractor after rebase * fix e2e mapping lib * Update tsconfig.e2e.json * update e2e tsconfig * fix angular config * fix protractor runs * cache dist folder for libs * update material selectors for dropdowns * selector fixes * remove duplicated e2e that have unit tests already * fix login selector * fix e2e * fix test * fix import issues * fix selector * cleanup old monaco extension files * cleanup demo shell login * add protractor max retries * disable customisations of protractor * fix login validation * fix after rebase * fix after rebase, disable latest versions of libs * Hide the report tab and rollback the localstorage * rename protractor config back to js * restore lint as part of build * cleanup code * do not copy anything to node_modules on dist test * fix unit tests * config fixes * fix code * fix code after rebase * fix tests * remove existing words from spellcheck * remove useless directive decorators * update package.json after rebase * add js-api back * code fixes * add missing export * update configs * fix code * try fix the sso login test * fix * remove puppeteer unit * fix e2e script * fix * make provider easy * fix routes module before upgrade * fix unit tests * upgrade angular cli * upgrade to angular 10 Co-authored-by: maurizio vitale <maurizio.vitale@alfresco.com> Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com> Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>
2025-07-31 17:38:48 +00:00 · 2020-07-03 13:01:05 +01:00
parent 2f0a585273
commit cd2b489100
579 changed files with 15689 additions and 10745 deletions
--- a/demo-shell/src/app/components/card-view/card-view.component.ts
+++ b/demo-shell/src/app/components/card-view/card-view.component.ts
@@ -40,7 +40,7 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class CardViewComponent implements OnInit, OnDestroy {

-    @ViewChild('console') console: ElementRef;
+    @ViewChild('console', { static: true }) console: ElementRef;

    isEditable = true;
    properties: any;
--- a/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html
+++ b/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html
@@ -6,14 +6,14 @@
    <mat-card-content>
        <br>
        <mat-radio-group (change)="onChangePeopleMode($event)">
-            <mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-people-single-mode" value="single">{{
+            <mat-radio-button [checked]="true" class="app-people-single-mode" data-automation-id="app-people-single-mode" value="single">{{
                'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
            <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-multiple-mode" value="multiple">{{
                'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
        </mat-radio-group>
        <div class="app-people-control-options">
            <mat-radio-group (change)="onChangePeopleFilterMode($event)">
-                <mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
+                <mat-radio-button [checked]="true" class="app-people-single-mode" value="appName">{{
                    'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
                <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-filter-role" value="role">{{
                    'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
@@ -77,14 +77,14 @@
    <mat-card-content>
        <br>
        <mat-radio-group (change)="onChangeGroupsMode($event)">
-            <mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-group-single-mode" value="single">{{
+            <mat-radio-button [checked]="true" class="app-people-single-mode" data-automation-id="app-group-single-mode" value="single">{{
                'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
            <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-multiple-mode" value="multiple">{{
                'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
        </mat-radio-group>
        <div class="app-groups-control-options">
            <mat-radio-group (change)="onChangeGroupsFilterMode($event)">
-                <mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
+                <mat-radio-button [checked]="true" class="app-people-single-mode" value="appName">{{
                    'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
                <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-filter-role" value="role">{{
                    'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
--- a/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.ts
@@ -17,7 +17,8 @@

 import { Component, ViewEncapsulation } from '@angular/core';
 import { ComponentSelectionMode } from '@alfresco/adf-process-services-cloud';
-import { MatRadioChange, MatCheckboxChange } from '@angular/material';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatRadioChange } from '@angular/material/radio';
 import { IdentityGroupModel, IdentityUserModel } from '@alfresco/adf-core';

@Component({
--- a/demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts
+++ b/demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts
@@ -18,7 +18,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CloudSettingsComponent } from './cloud-settings.component';
-import { MatDialogModule, MatInputModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { CoreModule } from '@alfresco/adf-core';
 import { FlexLayoutModule } from '@angular/flex-layout';

--- a/demo-shell/src/app/components/cloud/start-process-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/start-process-cloud-demo.component.ts
@@ -19,7 +19,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService, AppConfigService } from '@alfresco/adf-core';
 import { CloudLayoutService } from './services/cloud-layout.service';
-import { PreviewService } from 'app/services/preview.service';
+import { PreviewService } from '../../services/preview.service';

@Component({
    templateUrl: './start-process-cloud-demo.component.html',
--- a/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts
@@ -19,7 +19,7 @@ import { Component, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService } from '@alfresco/adf-core';
 import { TaskHeaderCloudComponent } from '@alfresco/adf-process-services-cloud';
-import { PreviewService } from 'app/services/preview.service';
+import { PreviewService } from '../../services/preview.service';

@Component({
    templateUrl: './task-details-cloud-demo.component.html',
@@ -27,7 +27,7 @@ import { PreviewService } from 'app/services/preview.service';
 })
 export class TaskDetailsCloudDemoComponent {

-    @ViewChild('taskHeader')
+    @ViewChild('taskHeader', { static: true })
    taskHeader: TaskHeaderCloudComponent;

    taskId: string;
--- a/demo-shell/src/app/components/cloud/task-header-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/task-header-cloud-demo.component.ts
@@ -24,7 +24,7 @@ import { FormControl } from '@angular/forms';
    styleUrls: ['./task-header-cloud-demo.component.scss']
 })
 export class TaskHeaderCloudDemoComponent {
-    @ViewChild('taskHeader')
+    @ViewChild('taskHeader', { static: true })
    taskHeader: TaskHeaderCloudComponent;

    appName: string;
--- a/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.ts
+++ b/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.ts
@@ -16,7 +16,7 @@
 */

 import { Component } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { ConfirmDialogComponent } from '@alfresco/adf-content-services';

@Component({
--- a/demo-shell/src/app/components/document-list/extension-presets/extension-presets.module.ts
+++ b/demo-shell/src/app/components/document-list/extension-presets/extension-presets.module.ts
@@ -42,9 +42,6 @@ const routes: Routes = [
    declarations: [
        ExtensionPresetsComponent,
        NameColumnComponent
-    ],
-    entryComponents: [
-        NameColumnComponent
    ]
 })
 export class ExtensionPresetsModule {
--- a/demo-shell/src/app/components/file-view/file-view.component.ts
+++ b/demo-shell/src/app/components/file-view/file-view.component.ts
@@ -18,7 +18,7 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router, PRIMARY_OUTLET } from '@angular/router';
 import { ContentService, AllowableOperationsEnum, PermissionsEnum, NodesApiService } from '@alfresco/adf-core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { PreviewService } from '../../services/preview.service';

@Component({
--- a/demo-shell/src/app/components/files/custom-sources.component.ts
+++ b/demo-shell/src/app/components/files/custom-sources.component.ts
@@ -27,7 +27,7 @@ export class CustomSourcesComponent {
    @Input()
    selectedSource = '-recent-';

-    @ViewChild('customSourcesDocumentList')
+    @ViewChild('customSourcesDocumentList', { static: true })
    documentList: DocumentListComponent;

    sources = [
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -200,13 +200,6 @@
                        <mat-icon>create</mat-icon>
                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}</span>
                    </button>
-                    <button mat-menu-item
-                            [disabled]="!hasSelection(documentList.selection)"
-                            title="Download"
-                            (click)="downloadNodes(documentList.selection)">
-                        <mat-icon>get_app</mat-icon>
-                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}</span>
-                    </button>
                    <button mat-menu-item
                            adf-check-allowable-operation="delete"
                            [adf-nodes]="documentList.selection"
@@ -540,7 +533,7 @@
        </section>

        <section>
-            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">
+            <mat-slide-toggle data-automation-id="multiSelectToggle" [color]="'primary'" [(ngModel)]="multiselect">
                {{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' | translate}}
            </mat-slide-toggle>
        </section>
--- a/demo-shell/src/app/components/files/files.component.ts
+++ b/demo-shell/src/app/components/files/files.component.ts
@@ -21,7 +21,7 @@ import {
 } from '@angular/core';
 import { Location } from '@angular/common';

-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { MinimalNodeEntity, NodePaging, Pagination, MinimalNodeEntryEntity, SiteEntry, SearchEntry } from '@alfresco/js-api';
 import {
@@ -184,13 +184,13 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    @Output()
    deleteElementSuccess: EventEmitter<any> = new EventEmitter();

-    @ViewChild('documentList')
+    @ViewChild('documentList', { static: true })
    documentList: DocumentListComponent;

    @ViewChild('standardPagination')
    standardPagination: PaginationComponent;

-    @ViewChild(InfinitePaginationComponent)
+    @ViewChild(InfinitePaginationComponent, { static: true })
    infinitePaginationComponent: InfinitePaginationComponent;

    @ViewChild(HighlightDirective)
--- a/demo-shell/src/app/components/files/metadata-dialog-adapter.component.ts
+++ b/demo-shell/src/app/components/files/metadata-dialog-adapter.component.ts
@@ -16,7 +16,7 @@
 */

 import { Component, Inject, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MinimalNodeEntryEntity } from '@alfresco/js-api';

@Component({
--- a/demo-shell/src/app/components/header-data/header-data.service.ts
+++ b/demo-shell/src/app/components/header-data/header-data.service.ts
@@ -20,6 +20,7 @@ import { Injectable, Output, EventEmitter } from '@angular/core';
@Injectable({
    providedIn: 'root'
 })
+// tslint:disable-next-line: directive-class-suffix
 export class HeaderDataService {

    show = true;
--- a/demo-shell/src/app/components/icons/icons.component.ts
+++ b/demo-shell/src/app/components/icons/icons.component.ts
@@ -16,7 +16,7 @@
 */

 import { Component, OnInit } from '@angular/core';
-import { MatIconRegistry } from '@angular/material';
+import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';

@Component({
--- a/demo-shell/src/app/components/login/login.component.html
+++ b/demo-shell/src/app/components/login/login.component.html
@@ -4,7 +4,7 @@
    <p class="app-toggle">
        <mat-slide-toggle
            id="switch3"
-            [color]="'primary'"
+            color="primary"
            (change)="toggleCSRF()"
            [checked]="!disableCsrf">
            CSRF
@@ -13,7 +13,7 @@
    <p class="app-toggle">
        <mat-slide-toggle
            id="switch4"
-            [color]="'primary'"
+            color="primary"
            (change)="toggleFooter()"
            [checked]="showFooter">
            {{ 'LOGIN.LOGIN_FOOTER'| translate }}
@@ -22,7 +22,7 @@
    <p class="app-toggle">
        <mat-slide-toggle
            id="adf-toggle-show-rememberme"
-            [color]="'primary'"
+            color="primary"
            (change)="toggleRememberMe()"
            [checked]="showRememberMe">
            {{ 'LOGIN.SHOW_REMEMBERME'| translate }}
@@ -31,7 +31,7 @@
    <p class="app-toggle">
        <mat-slide-toggle
            id="adf-toggle-show-successRoute"
-            [color]="'primary'"
+            color="primary"
            (change)="toggleSuccessRoute()"
            [checked]="customSuccessRoute">
            {{ 'LOGIN.SHOW_SUCCESS_ROUTE'| translate }}
@@ -51,7 +51,7 @@
    <p class="app-toggle">
        <mat-slide-toggle
            id="adf-toggle-logo"
-            [color]="'primary'"
+            color="primary"
            (change)="toggleLogo()"
            [checked]="customLogoImage">
            {{ 'LOGIN.CUSTOM_LOGO'| translate }}
@@ -77,13 +77,10 @@
 </a>

 <adf-login
-    #alfrescoLogin
    [successRoute]="customSuccessRouteURI"
    [logoImageUrl]="customLogoImageURL"
-    [fieldsValidation]="customValidation"
    [showLoginActions]="showFooter"
    [showRememberMe]="showFooter && showRememberMe"
-    (executeSubmit)="checkForm($event)"
    copyrightText="{{ 'application.copyright' | adfAppConfig }}"
    (success)="onLogin()"
    (error)="onError($event)">
@@ -91,7 +88,7 @@
        <p>
            <mat-slide-toggle
                id="switch3-mobile"
-                [color]="'primary'"
+                color="primary"
                (change)="toggleCSRF()"
                [checked]="!disableCsrf">
                CSRF
@@ -100,14 +97,19 @@
        <p>
            <mat-slide-toggle
                id="switch4-mobile"
-                [color]="'primary'"
+                color="primary"
                (change)="toggleFooter()"
                [checked]="showFooter">
                {{ 'LOGIN.LOGIN_FOOTER'| translate }}
            </mat-slide-toggle>
        </p>
-        <button type="button" mat-raised-button color="accent" class="app-mobile-setting-button" routerLink="/settings"
-                data-automation-id="settings">{{ 'APP_LAYOUT.SETTINGS'| translate }}
+        <button
+            type="button"
+            mat-raised-button
+            color="accent"
+            class="app-mobile-setting-button"
+            routerLink="/settings"
+            data-automation-id="settings">{{ 'APP_LAYOUT.SETTINGS'| translate }}
        </button>

    </div>
--- a/demo-shell/src/app/components/login/login.component.ts
+++ b/demo-shell/src/app/components/login/login.component.ts
@@ -15,8 +15,7 @@
 * limitations under the License.
 */

-import { Component, OnInit, ViewChild } from '@angular/core';
-import { Validators } from '@angular/forms';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { LogService } from '@alfresco/adf-core';

@@ -25,12 +24,8 @@ import { LogService } from '@alfresco/adf-core';
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent {

-    @ViewChild('alfrescoLogin')
-    alfrescoLogin: any;
-
-    customValidation: any;
    customSuccessRouteURI = '';
    customLogoImageURL = './assets/images/alfresco-logo.svg';

@@ -39,28 +34,17 @@ export class LoginComponent implements OnInit {
    showRememberMe = true;
    customSuccessRoute = false;
    customLogoImage = false;
-    customMinLength = 2;

    constructor(private router: Router,
                private logService: LogService) {
-        this.customValidation = {
-            username: ['', Validators.compose([Validators.required, Validators.minLength(this.customMinLength)])],
-            password: ['', Validators.required]
-        };
-    }
-
-    ngOnInit() {
-        this.alfrescoLogin.addCustomValidationError('username', 'required', 'LOGIN.MESSAGES.USERNAME-REQUIRED');
-        this.alfrescoLogin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN', { minLength: this.customMinLength });
-        this.alfrescoLogin.addCustomValidationError('password', 'required', 'LOGIN.MESSAGES.PASSWORD-REQUIRED');
    }

    onLogin() {
        this.router.navigate(['/home']);
    }

-    onError($event) {
-        this.logService.error($event);
+    onError(err: any) {
+        this.logService.error(err);
    }

    toggleCSRF() {
@@ -88,9 +72,4 @@ export class LoginComponent implements OnInit {
            this.customLogoImageURL = null;
        }
    }
-
-    checkForm(event: any) {
-        const values = event.values;
-        this.logService.log(values);
-    }
 }
--- a/demo-shell/src/app/components/notifications/notifications.component.ts
+++ b/demo-shell/src/app/components/notifications/notifications.component.ts
@@ -17,7 +17,7 @@

 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { NotificationService } from '@alfresco/adf-core';
-import { MatSnackBarConfig } from '@angular/material';
+import { MatSnackBarConfig } from '@angular/material/snack-bar';
 import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
--- a/demo-shell/src/app/components/permissions/demo-permissions.component.ts
+++ b/demo-shell/src/app/components/permissions/demo-permissions.component.ts
@@ -28,7 +28,7 @@ import { NodesApiService, NotificationService } from '@alfresco/adf-core';
 })
 export class DemoPermissionComponent implements OnInit {

-    @ViewChild('permissionList')
+    @ViewChild('permissionList', { static: true })
    displayPermissionComponent: PermissionListComponent;

    nodeId: string;
--- a/demo-shell/src/app/components/process-service/custom-editor/custom-editor.component.ts
+++ b/demo-shell/src/app/components/process-service/custom-editor/custom-editor.component.ts
@@ -46,8 +46,7 @@ export class CustomStencil01 extends WidgetComponent {

@NgModule({
    declarations: [ CustomEditorComponent, CustomStencil01 ],
-    exports: [ CustomEditorComponent, CustomStencil01 ],
-    entryComponents: [ CustomEditorComponent, CustomStencil01 ]
+    exports: [ CustomEditorComponent, CustomStencil01 ]
 })
 export class CustomEditorsModule {

--- a/demo-shell/src/app/components/process-service/process-service.component.html
+++ b/demo-shell/src/app/components/process-service/process-service.component.html
@@ -118,7 +118,7 @@
             label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
        <div class="app-page-content" *ngIf="showProcessTab">
            <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-                <div class="app-grid-item app-processes-menu" fxFlex.gt-md="225px">
+                <div id="app-processes-menu"  class="app-grid-item app-processes-menu" fxFlex.gt-md="225px">
                    <div class="app-list-buttons">
                        <adf-sidebar-action-menu [expanded]="true" [width]="205"
                                                 title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
@@ -237,12 +237,12 @@
            <div class="app-grid-item app-reports-menu" fxFlex.gt-md="300px">
                <span><h5>Report List</h5></span>
                <mat-divider></mat-divider>
-                <adf-analytics-report-list
+                <!-- <adf-analytics-report-list
                    [appId]="appId"
                    [selectFirst]="selectFirstReport"
                    (reportClick)="onReportClick($event)"
                    #analyticsReportList>
-                </adf-analytics-report-list>
+                </adf-analytics-report-list> -->
            </div>
            <div class="app-grid-item app-reports-details" fxFlex.gt-md="1 1 auto">
                <adf-analytics
--- a/demo-shell/src/app/components/process-service/process-service.component.ts
+++ b/demo-shell/src/app/components/process-service/process-service.component.ts
@@ -103,7 +103,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
    @ViewChild('activitiStartProcess')
    activitiStartProcess: StartProcessInstanceComponent;

-    @ViewChild('analyticsReportList')
+    @ViewChild('analyticsReportList', { static: true })
    analyticsReportList: AnalyticsReportListComponent;

    @Input()
--- a/demo-shell/src/app/components/template-list/template-demo.component.ts
+++ b/demo-shell/src/app/components/template-list/template-demo.component.ts
@@ -25,22 +25,22 @@ import { ObjectDataTableAdapter } from '@alfresco/adf-core';
 })
 export class TemplateDemoComponent implements AfterViewChecked {

-    @ViewChild('defaultDocumentList')
+    @ViewChild('defaultDocumentList', { static: true })
    defaultDocumentListComponent: DocumentListComponent;

-    @ViewChild('customLoadingDocumentList')
+    @ViewChild('customLoadingDocumentList', { static: true })
    customLoadingDocumentList: DocumentListComponent;

-    @ViewChild('customNoPermissionDocumentList')
+    @ViewChild('customNoPermissionDocumentList', { static: true })
    customNoPermissionDocumentList: DocumentListComponent;

-    @ViewChild('defaultNoPermissionDocumentList')
+    @ViewChild('defaultNoPermissionDocumentList', { static: true })
    defaultNoPermissionDocumentList: DocumentListComponent;

-    @ViewChild('customEmptyDocumentList')
+    @ViewChild('customEmptyDocumentList', { static: true })
    customEmptyDocumentList: DocumentListComponent;

-    @ViewChild('defaultEmptyDocumentList')
+    @ViewChild('defaultEmptyDocumentList', { static: true })
    defaultEmptyDocumentList: DocumentListComponent;

    constructor() {
--- a/demo-shell/src/app/components/theme-picker/theme-picker.ts
+++ b/demo-shell/src/app/components/theme-picker/theme-picker.ts
@@ -17,10 +17,12 @@

 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import {
-    MatButtonModule, MatGridListModule, MatIconModule, MatMenuModule,
-    MatTooltipModule, MatListModule
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { StyleManager } from './style-manager/style-manager';
 import { DocsSiteTheme, ThemeStorage } from './theme-storage/theme-storage';

--- a/demo-shell/src/app/components/trashcan/trashcan.component.ts
+++ b/demo-shell/src/app/components/trashcan/trashcan.component.ts
@@ -28,7 +28,7 @@ import { takeUntil } from 'rxjs/operators';
    styleUrls: ['trashcan.component.scss']
 })
 export class TrashcanComponent implements OnInit, OnDestroy {
-    @ViewChild('documentList')
+    @ViewChild('documentList', { static: true })
    documentList: DocumentListComponent;

    currentLocale;