[ADF-5183] Upgrade to Angular 10 (#1506)

* upgrade preparation fixes * remove fdescribe * update browserlist config * ng8 * ngrx 8 * ng9 * ngrx 9 * remove entryComponents * unit tests * ng 10 * latest ADF * fix unit tests * fix lint * update deps and travis * code fixes * upgrade webdriver * cleanup libs * fix test * update test * Use browserTarget as target for lite-serve * Use the update webdriver with CI condition * Use version console.log('load', path * Fix path sh * Try to use remote env * Add the . to export variabled * Use hardcoded chrome version * Remove the run remote * Avoid to use the escape * Skip flaky e2e and raise issue ACA-3615 * SKip failing e2e * Skip flaky e2e and raise issue ACA-3615 * Fix close app toolbar menu and preconditions + tests of mark-favorite.test.ts Personal Files section * Fix mark-favorite tests * Fix ext-header test * Fix new-menu tests * Fix lint * no message * Fix viewer tests Co-authored-by: maurizio vitale <maurizio.vitale@alfresco.com> Co-authored-by: Cristina Jalba <cristina.jalba@ness.com>
2025-07-31 17:38:28 +00:00 · 2020-07-09 09:37:06 +01:00
parent 4ac1b8d7dd
commit 2854c17cd9
139 changed files with 11641 additions and 7776 deletions
--- a/src/app/components/common/common.module.ts
+++ b/src/app/components/common/common.module.ts
@@ -53,12 +53,6 @@ import { LogoutComponent } from './logout/logout.component';
    ToggleSharedComponent,
    LanguagePickerComponent,
    LogoutComponent
-  ],
-  entryComponents: [
-    LocationLinkComponent,
-    ToggleSharedComponent,
-    LanguagePickerComponent,
-    LogoutComponent
  ]
 })
 export class AppCommonModule {}
--- a/src/app/components/common/logout/logout.component.spec.ts
+++ b/src/app/components/common/logout/logout.component.spec.ts
@@ -56,7 +56,7 @@ describe('LogoutComponent', () => {
      ]
    });

-    store = TestBed.get(Store);
+    store = TestBed.inject(Store);
    fixture = TestBed.createComponent(LogoutComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
--- a/src/app/components/context-menu/context-menu-item.component.spec.ts
+++ b/src/app/components/context-menu/context-menu-item.component.spec.ts
@@ -54,7 +54,7 @@ describe('ContextMenuComponent', () => {

    fixture = TestBed.createComponent(ContextMenuItemComponent);
    component = fixture.componentInstance;
-    extensionsService = TestBed.get(AppExtensionService);
+    extensionsService = TestBed.inject(AppExtensionService);

    contextItem = {
      type: 'button',
--- a/src/app/components/context-menu/context-menu.component.spec.ts
+++ b/src/app/components/context-menu/context-menu.component.spec.ts
@@ -87,8 +87,8 @@ describe('ContextMenuComponent', () => {
    fixture = TestBed.createComponent(ContextMenuComponent);
    component = fixture.componentInstance;

-    contextMenuOverlayRef = TestBed.get(ContextMenuOverlayRef);
-    extensionsService = TestBed.get(AppExtensionService);
+    contextMenuOverlayRef = TestBed.inject(ContextMenuOverlayRef);
+    extensionsService = TestBed.inject(AppExtensionService);

    spyOn(extensionsService, 'getAllowedContextMenuActions').and.returnValue([
      contextItem
--- a/src/app/components/context-menu/context-menu.module.ts
+++ b/src/app/components/context-menu/context-menu.module.ts
@@ -59,7 +59,6 @@ import { ContextActionsModule } from '@alfresco/aca-shared';
    ContextMenuComponent,
    ContextMenuItemComponent,
    ContextActionsModule
-  ],
-  entryComponents: [ContextMenuComponent]
+  ]
 })
 export class ContextMenuModule {}
--- a/src/app/components/context-menu/context-menu.service.spec.ts
+++ b/src/app/components/context-menu/context-menu.service.spec.ts
@@ -62,9 +62,9 @@ describe('ContextMenuService', () => {
      ]
    });

-    injector = TestBed.get(Injector);
-    overlay = TestBed.get(Overlay);
-    userPreferencesService = TestBed.get(UserPreferencesService);
+    injector = TestBed.inject(Injector);
+    overlay = TestBed.inject(Overlay);
+    userPreferencesService = TestBed.inject(UserPreferencesService);
  });

  it('should create a custom overlay', () => {
--- a/src/app/components/current-user/current-user.component.spec.ts
+++ b/src/app/components/current-user/current-user.component.spec.ts
@@ -61,8 +61,8 @@ describe('CurrentUserComponent', () => {
    });

    fixture = TestBed.createComponent(CurrentUserComponent);
-    appExtensionService = TestBed.get(AppExtensionService);
-    store = TestBed.get(Store);
+    appExtensionService = TestBed.inject(AppExtensionService);
+    store = TestBed.inject(Store);
    component = fixture.componentInstance;
  });

--- a/src/app/components/current-user/user-menu-item.component.spec.ts
+++ b/src/app/components/current-user/user-menu-item.component.spec.ts
@@ -54,7 +54,7 @@ describe('UserMenuItemComponent', () => {
    });

    fixture = TestBed.createComponent(UserMenuItemComponent);
-    appExtensionService = TestBed.get(AppExtensionService);
+    appExtensionService = TestBed.inject(AppExtensionService);
    component = fixture.componentInstance;
  });

--- a/src/app/components/dl-custom-components/document-list-custom-components.module.ts
+++ b/src/app/components/dl-custom-components/document-list-custom-components.module.ts
@@ -40,7 +40,6 @@ import { CoreModule } from '@alfresco/adf-core';
    LockedByModule
  ],
  declarations: [CustomNameColumnComponent],
-  exports: [CustomNameColumnComponent],
-  entryComponents: [CustomNameColumnComponent]
+  exports: [CustomNameColumnComponent]
 })
 export class DocumentListCustomComponentsModule {}
--- a/src/app/components/favorite-libraries/favorite-libraries.component.spec.ts
+++ b/src/app/components/favorite-libraries/favorite-libraries.component.spec.ts
@@ -83,12 +83,12 @@ describe('FavoriteLibrariesComponent', () => {
    fixture = TestBed.createComponent(FavoriteLibrariesComponent);
    component = fixture.componentInstance;

-    alfrescoApi = TestBed.get(AlfrescoApiService);
-    contentApiService = TestBed.get(ContentApiService);
-    userPreference = TestBed.get(UserPreferencesService);
-    contentManagementService = TestBed.get(ContentManagementService);
+    alfrescoApi = TestBed.inject(AlfrescoApiService);
+    contentApiService = TestBed.inject(ContentApiService);
+    userPreference = TestBed.inject(UserPreferencesService);
+    contentManagementService = TestBed.inject(ContentManagementService);
    alfrescoApi.reset();
-    router = TestBed.get(Router);
+    router = TestBed.inject(Router);

    spyOn(contentApiService, 'getNode').and.returnValue(
      of({ entry: { id: 'libraryId' } } as NodeEntry)
@@ -116,7 +116,9 @@ describe('FavoriteLibrariesComponent', () => {

      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalledWith(
        '-me-',
-        { maxItems: userPreference.paginationSize }
+        {
+          maxItems: userPreference.paginationSize
+        }
      );
    });

--- a/src/app/components/favorites/favorites.component.spec.ts
+++ b/src/app/components/favorites/favorites.component.spec.ts
@@ -101,15 +101,15 @@ describe('FavoritesComponent', () => {
    fixture = TestBed.createComponent(FavoritesComponent);
    component = fixture.componentInstance;

-    alfrescoApi = TestBed.get(AlfrescoApiService);
+    alfrescoApi = TestBed.inject(AlfrescoApiService);
    alfrescoApi.reset();
    spyOn(alfrescoApi.favoritesApi, 'getFavorites').and.returnValue(
      Promise.resolve(page)
    );

-    contentApi = TestBed.get(ContentApiService);
-    uploadService = TestBed.get(UploadService);
-    router = TestBed.get(Router);
+    contentApi = TestBed.inject(ContentApiService);
+    uploadService = TestBed.inject(UploadService);
+    router = TestBed.inject(Router);
  });

  describe('Node navigation', () => {
--- a/src/app/components/files/files.component.spec.ts
+++ b/src/app/components/files/files.component.spec.ts
@@ -35,7 +35,9 @@ import {
  NodeFavoriteDirective,
  DataTableComponent,
  UploadService,
-  AppConfigPipe
+  AppConfigPipe,
+  AlfrescoApiService,
+  AlfrescoApiServiceMock
 } from '@alfresco/adf-core';
 import { DocumentListComponent } from '@alfresco/adf-content-services';
 import { NodeActionsService } from '../../services/node-actions.service';
@@ -51,7 +53,7 @@ describe('FilesComponent', () => {
  let uploadService: UploadService;
  let nodeActionsService: NodeActionsService;
  let contentApi: ContentApiService;
-  let router = {
+  let router: any = {
    url: '',
    navigate: jasmine.createSpy('navigate')
  };
@@ -67,6 +69,7 @@ describe('FilesComponent', () => {
        AppConfigPipe
      ],
      providers: [
+        { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
        {
          provide: Router,
          useValue: router
@@ -85,18 +88,22 @@ describe('FilesComponent', () => {
    fixture = TestBed.createComponent(FilesComponent);
    component = fixture.componentInstance;

-    uploadService = TestBed.get(UploadService);
-    router = TestBed.get(Router);
-    nodeActionsService = TestBed.get(NodeActionsService);
-    contentApi = TestBed.get(ContentApiService);
+    uploadService = TestBed.inject(UploadService);
+    router = TestBed.inject(Router);
+    nodeActionsService = TestBed.inject(NodeActionsService);
+    contentApi = TestBed.inject(ContentApiService);
  });

  beforeEach(() => {
    node = { id: 'node-id', isFolder: true };
-    spyOn(component.documentList, 'loadFolder').and.callFake(() => {});
  });

  describe('Current page is valid', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+      spyOn(component.documentList, 'loadFolder').and.callFake(() => {});
+    });
+
    it('should be a valid current page', fakeAsync(() => {
      spyOn(contentApi, 'getNode').and.returnValue(throwError(null));

@@ -111,24 +118,29 @@ describe('FilesComponent', () => {
      spyOn(contentApi, 'getNode').and.returnValue(of({ entry: node }));

      component.ngOnInit();
-      tick();
      fixture.detectChanges();
+      tick();

      expect(component.isValidPath).toBe(true);
    }));
  });

  describe('OnInit', () => {
+    beforeEach(() => {
+      router.navigate['calls'].reset();
+    });
+
    it('should set current node', () => {
      spyOn(contentApi, 'getNode').and.returnValue(of({ entry: node }));
      fixture.detectChanges();
      expect(component.node).toBe(node);
    });

-    it('if should navigate to parent if node is not a folder', () => {
-      node.isFolder = false;
-      node.parentId = 'parent-id';
-      spyOn(contentApi, 'getNode').and.returnValue(of({ entry: node }));
+    it('should navigate to parent if node is not a folder', () => {
+      const nodeEntry = { isFolder: false, parentId: 'parent-id' };
+      spyOn(contentApi, 'getNode').and.returnValue(
+        of({ entry: nodeEntry } as any)
+      );

      fixture.detectChanges();

--- a/src/app/components/info-drawer/info.drawer.module.ts
+++ b/src/app/components/info-drawer/info.drawer.module.ts
@@ -64,7 +64,6 @@ export function components() {
    SharedInfoDrawerModule
  ],
  declarations: [...components()],
-  exports: [...components(), SharedInfoDrawerModule],
-  entryComponents: [...components()]
+  exports: [...components(), SharedInfoDrawerModule]
 })
 export class AppInfoDrawerModule {}
--- a/src/app/components/info-drawer/library-metadata-tab/library-metadata-form.component.spec.ts
+++ b/src/app/components/info-drawer/library-metadata-tab/library-metadata-form.component.spec.ts
@@ -57,7 +57,7 @@ describe('LibraryMetadataFormComponent', () => {

    fixture = TestBed.createComponent(LibraryMetadataFormComponent);
    component = fixture.componentInstance;
-    alfrescoApiService = TestBed.get(AlfrescoApiService);
+    alfrescoApiService = TestBed.inject(AlfrescoApiService);
  });

  afterEach(() => {
--- a/src/app/components/info-drawer/metadata-tab/metadata-tab.component.spec.ts
+++ b/src/app/components/info-drawer/metadata-tab/metadata-tab.component.spec.ts
@@ -55,8 +55,8 @@ describe('MetadataTabComponent', () => {

  describe('content-metadata configuration', () => {
    beforeEach(() => {
-      appConfig = TestBed.get(AppConfigService);
-      extensions = TestBed.get(AppExtensionService);
+      appConfig = TestBed.inject(AppConfigService);
+      extensions = TestBed.inject(AppExtensionService);
    });

    it('should remain unchanged when metadata extension is missing', () => {
@@ -136,7 +136,7 @@ describe('MetadataTabComponent', () => {
  describe('displayAspect', () => {
    beforeEach(() => {
      fixture = TestBed.createComponent(MetadataTabComponent);
-      store = TestBed.get(Store);
+      store = TestBed.inject(Store);
      component = fixture.componentInstance;
    });

--- a/src/app/components/layout/app-layout/app-layout.component.html
+++ b/src/app/components/layout/app-layout/app-layout.component.html
@@ -14,7 +14,7 @@
          role="heading"
          aria-level="1"
          *ngIf="!hideSidenav"
-          (toggleClicked)="layout.toggleMenu($event)"
+          (toggleClicked)="layout.toggleMenu()"
          [expandedSidenav]="!isMenuMinimized()"
        >
        </app-header>
--- a/src/app/components/layout/app-layout/app-layout.component.spec.ts
+++ b/src/app/components/layout/app-layout/app-layout.component.spec.ts
@@ -73,10 +73,10 @@ describe('AppLayoutComponent', () => {

    fixture = TestBed.createComponent(AppLayoutComponent);
    component = fixture.componentInstance;
-    appConfig = TestBed.get(AppConfigService);
-    store = TestBed.get(Store);
-    router = TestBed.get(Router);
-    userPreference = TestBed.get(UserPreferencesService);
+    appConfig = TestBed.inject(AppConfigService);
+    store = TestBed.inject(Store);
+    router = TestBed.inject(Router);
+    userPreference = TestBed.inject(UserPreferencesService);
  });

  beforeEach(() => {
--- a/src/app/components/layout/app-layout/app-layout.component.ts
+++ b/src/app/components/layout/app-layout/app-layout.component.ts
@@ -55,7 +55,7 @@ import { Directionality } from '@angular/cdk/bidi';
  host: { class: 'app-layout' }
 })
 export class AppLayoutComponent implements OnInit, OnDestroy {
-  @ViewChild('layout')
+  @ViewChild('layout', { static: true })
  layout: SidenavLayoutComponent;

  onDestroy$: Subject<boolean> = new Subject<boolean>();
--- a/src/app/components/libraries/libraries.component.spec.ts
+++ b/src/app/components/libraries/libraries.component.spec.ts
@@ -70,9 +70,9 @@ describe('LibrariesComponent', () => {
    fixture = TestBed.createComponent(LibrariesComponent);
    component = fixture.componentInstance;

-    alfrescoApi = TestBed.get(AlfrescoApiService);
+    alfrescoApi = TestBed.inject(AlfrescoApiService);
    alfrescoApi.reset();
-    router = TestBed.get(Router);
+    router = TestBed.inject(Router);

    spyOn(alfrescoApi.sitesApi, 'getSites').and.returnValue(
      Promise.resolve(page)
--- a/src/app/components/node-version/node-version.module.ts
+++ b/src/app/components/node-version/node-version.module.ts
@@ -50,8 +50,6 @@ import { NgModule } from '@angular/core';
    MatInputModule
  ],
  exports: [AppNodeVersionFormComponent],
-  declarations: [AppNodeVersionFormComponent],
-  providers: [],
-  entryComponents: [AppNodeVersionFormComponent]
+  declarations: [AppNodeVersionFormComponent]
 })
 export class AppNodeVersionModule {}
--- a/src/app/components/page.component.spec.ts
+++ b/src/app/components/page.component.spec.ts
@@ -69,7 +69,7 @@ describe('PageComponent', () => {
      providers: [ContentManagementService, AppExtensionService]
    });

-    store = TestBed.get(Store);
+    store = TestBed.inject(Store);
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
  });
--- a/src/app/components/page.component.ts
+++ b/src/app/components/page.component.ts
@@ -34,7 +34,8 @@ import {
  OnInit,
  OnChanges,
  ViewChild,
-  SimpleChanges
+  SimpleChanges,
+  Directive
 } from '@angular/core';
 import { Store } from '@ngrx/store';
 import {
@@ -60,6 +61,8 @@ import {
 } from '@alfresco/aca-shared/store';
 import { isLocked, isLibrary, AppExtensionService } from '@alfresco/aca-shared';

+/* tslint:disable:directive-class-suffix */
+@Directive()
 export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
  onDestroy$: Subject<boolean> = new Subject<boolean>();

--- a/src/app/components/permissions/permission-manager/permission-manager.component.ts
+++ b/src/app/components/permissions/permission-manager/permission-manager.component.ts
@@ -40,7 +40,7 @@ import { NodePermissionsDialogComponent } from '../permission-dialog/node-permis
  templateUrl: './permission-manager.component.html'
 })
 export class PermissionsManagerComponent implements OnInit {
-  @ViewChild('permissionList')
+  @ViewChild('permissionList', { static: true })
  permissionList: PermissionListComponent;

  @Input()
--- a/src/app/components/permissions/permissions.module.ts
+++ b/src/app/components/permissions/permissions.module.ts
@@ -33,7 +33,6 @@ import { PermissionsManagerComponent } from './permission-manager/permission-man
@NgModule({
  imports: [CommonModule, CoreModule.forChild(), ContentModule.forChild()],
  declarations: [PermissionsManagerComponent, NodePermissionsDialogComponent],
-  exports: [PermissionsManagerComponent, NodePermissionsDialogComponent],
-  entryComponents: [NodePermissionsDialogComponent]
+  exports: [PermissionsManagerComponent, NodePermissionsDialogComponent]
 })
 export class AppPermissionsModule {}
--- a/src/app/components/preview/preview.component.spec.ts
+++ b/src/app/components/preview/preview.component.spec.ts
@@ -80,14 +80,14 @@ describe('PreviewComponent', () => {
    fixture = TestBed.createComponent(PreviewComponent);
    component = fixture.componentInstance;

-    router = TestBed.get(Router);
-    route = TestBed.get(ActivatedRoute);
-    preferences = TestBed.get(UserPreferencesService);
-    contentApi = TestBed.get(ContentApiService);
-    uploadService = TestBed.get(UploadService);
-    alfrescoApiService = TestBed.get(AlfrescoApiService);
-    contentManagementService = TestBed.get(ContentManagementService);
-    store = TestBed.get(Store);
+    router = TestBed.inject(Router);
+    route = TestBed.inject(ActivatedRoute);
+    preferences = TestBed.inject(UserPreferencesService);
+    contentApi = TestBed.inject(ContentApiService);
+    uploadService = TestBed.inject(UploadService);
+    alfrescoApiService = TestBed.inject(AlfrescoApiService);
+    contentManagementService = TestBed.inject(ContentManagementService);
+    store = TestBed.inject(Store);
  });

  it('should extract the property path root', () => {
--- a/src/app/components/recent-files/recent-files.component.spec.ts
+++ b/src/app/components/recent-files/recent-files.component.spec.ts
@@ -84,8 +84,8 @@ describe('RecentFilesComponent', () => {
    fixture = TestBed.createComponent(RecentFilesComponent);
    component = fixture.componentInstance;

-    alfrescoApi = TestBed.get(AlfrescoApiService);
-    uploadService = TestBed.get(UploadService);
+    alfrescoApi = TestBed.inject(AlfrescoApiService);
+    uploadService = TestBed.inject(UploadService);
    alfrescoApi.reset();

    spyOn(alfrescoApi.peopleApi, 'getPerson').and.returnValue(
--- a/src/app/components/search/search-input-control/search-input-control.component.ts
+++ b/src/app/components/search/search-input-control/search-input-control.component.ts
@@ -64,7 +64,7 @@ export class SearchInputControlComponent implements OnDestroy {
  @Output()
  searchChange: EventEmitter<string> = new EventEmitter();

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

  searchTerm = '';
--- a/src/app/components/search/search-input/search-input.component.spec.ts
+++ b/src/app/components/search/search-input/search-input.component.spec.ts
@@ -59,9 +59,9 @@ describe('SearchInputComponent', () => {
    })
      .compileComponents()
      .then(() => {
-        actions$ = TestBed.get(Actions);
+        actions$ = TestBed.inject(Actions);
        fixture = TestBed.createComponent(SearchInputComponent);
-        content = TestBed.get(ContentManagementService);
+        content = TestBed.inject(ContentManagementService);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
--- a/src/app/components/search/search-input/search-input.component.ts
+++ b/src/app/components/search/search-input/search-input.component.ts
@@ -91,10 +91,10 @@ export class SearchInputComponent implements OnInit, OnDestroy {
    }
  ];

-  @ViewChild('searchInputControl')
+  @ViewChild('searchInputControl', { static: true })
  searchInputControl: SearchInputControlComponent;

-  @ViewChild(MatMenuTrigger)
+  @ViewChild(MatMenuTrigger, { static: true })
  trigger: MatMenuTrigger;

  constructor(
--- a/src/app/components/search/search-libraries-results/search-libraries-query-builder.service.spec.ts
+++ b/src/app/components/search/search-libraries-results/search-libraries-query-builder.service.spec.ts
@@ -42,7 +42,7 @@ describe('SearchLibrariesQueryBuilderService', () => {
      imports: [AppTestingModule]
    });

-    apiService = TestBed.get(AlfrescoApiService);
+    apiService = TestBed.inject(AlfrescoApiService);
    apiService.reset();
    queriesApi = apiService.getInstance().core.queriesApi;
    builder = new SearchLibrariesQueryBuilderService(apiService);
--- a/src/app/components/search/search-results/search-results.component.spec.ts
+++ b/src/app/components/search/search-results/search-results.component.spec.ts
@@ -93,12 +93,12 @@ describe('SearchComponent', () => {
      ]
    });

-    config = TestBed.get(AppConfigService);
-    store = TestBed.get(Store);
-    queryBuilder = TestBed.get(SearchQueryBuilderService);
-    alfrescoApi = TestBed.get(AlfrescoApiService);
-    translate = TestBed.get(TranslationService);
-    router = TestBed.get(Router);
+    config = TestBed.inject(AppConfigService);
+    store = TestBed.inject(Store);
+    queryBuilder = TestBed.inject(SearchQueryBuilderService);
+    alfrescoApi = TestBed.inject(AlfrescoApiService);
+    translate = TestBed.inject(TranslationService);
+    router = TestBed.inject(Router);

    fixture = TestBed.createComponent(SearchResultsComponent);
    component = fixture.componentInstance;
--- a/src/app/components/search/search-results/search-results.component.ts
+++ b/src/app/components/search/search-results/search-results.component.ts
@@ -54,7 +54,7 @@ import { AppExtensionService } from '@alfresco/aca-shared';
  styleUrls: ['./search-results.component.scss']
 })
 export class SearchResultsComponent extends PageComponent implements OnInit {
-  @ViewChild('searchFilter')
+  @ViewChild('searchFilter', { static: true })
  searchFilter: SearchFilterComponent;

  showFacetFilter$: Observable<boolean>;
--- a/src/app/components/settings/settings.component.spec.ts
+++ b/src/app/components/settings/settings.component.spec.ts
@@ -62,8 +62,8 @@ describe('SettingsComponent', () => {
    fixture = TestBed.createComponent(SettingsComponent);
    component = fixture.componentInstance;

-    storage = TestBed.get(StorageService);
-    appExtensions = TestBed.get(AppExtensionService);
+    storage = TestBed.inject(StorageService);
+    appExtensions = TestBed.inject(AppExtensionService);

    stringParam = {
      key: 'key',
--- a/src/app/components/shared-files/shared-files.component.spec.ts
+++ b/src/app/components/shared-files/shared-files.component.spec.ts
@@ -32,6 +32,7 @@ import {
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import {
  AlfrescoApiService,
+  AlfrescoApiServiceMock,
  NodeFavoriteDirective,
  DataTableComponent,
  AppConfigPipe,
@@ -74,6 +75,7 @@ describe('SharedFilesComponent', () => {
        AppConfigPipe
      ],
      providers: [
+        { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
        {
          provide: Router,
          useValue: mockRouter
@@ -83,11 +85,11 @@ describe('SharedFilesComponent', () => {
    });

    fixture = TestBed.createComponent(SharedFilesComponent);
-    uploadService = TestBed.get(UploadService);
-    contentManagementService = TestBed.get(ContentManagementService);
+    uploadService = TestBed.inject(UploadService);
+    contentManagementService = TestBed.inject(ContentManagementService);
    component = fixture.componentInstance;

-    alfrescoApi = TestBed.get(AlfrescoApiService);
+    alfrescoApi = TestBed.inject(AlfrescoApiService);
    alfrescoApi.reset();

    spyOn(alfrescoApi.sharedLinksApi, 'findSharedLinks').and.returnValue(
--- a/src/app/components/shared-link-view/shared-link-view.component.spec.ts
+++ b/src/app/components/shared-link-view/shared-link-view.component.spec.ts
@@ -78,8 +78,8 @@ describe('SharedLinkViewComponent', () => {

    fixture = TestBed.createComponent(SharedLinkViewComponent);
    component = fixture.componentInstance;
-    alfrescoApiService = TestBed.get(AlfrescoApiService);
-    appExtensionService = TestBed.get(AppExtensionService);
+    alfrescoApiService = TestBed.inject(AlfrescoApiService);
+    appExtensionService = TestBed.inject(AppExtensionService);

    spyGetSharedLink = spyOn(
      alfrescoApiService.sharedLinksApi,
--- a/src/app/components/sidenav/components/button-menu.component.spec.ts
+++ b/src/app/components/sidenav/components/button-menu.component.spec.ts
@@ -52,7 +52,7 @@ describe('ButtonMenuComponent', () => {

    fixture = TestBed.createComponent(ButtonMenuComponent);
    component = fixture.componentInstance;
-    router = TestBed.get(Router);
+    router = TestBed.inject(Router);

    spyOn(router, 'navigate');
  });
--- a/src/app/components/sidenav/components/expand-menu.component.spec.ts
+++ b/src/app/components/sidenav/components/expand-menu.component.spec.ts
@@ -52,7 +52,7 @@ describe('ExpandMenuComponent', () => {

    fixture = TestBed.createComponent(ExpandMenuComponent);
    component = fixture.componentInstance;
-    router = TestBed.get(Router);
+    router = TestBed.inject(Router);

    spyOn(router, 'navigate');
  });
--- a/src/app/components/sidenav/directives/action.directive.ts
+++ b/src/app/components/sidenav/directives/action.directive.ts
@@ -26,6 +26,7 @@
 import { Directive, Input, HostListener } from '@angular/core';
 import { PRIMARY_OUTLET, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
+import { AppStore } from '@alfresco/aca-shared/store';

@Directive({
  /* tslint:disable-next-line */
@@ -47,7 +48,7 @@ export class ActionDirective {
    }
  }

-  constructor(private router: Router, private store: Store<any>) {}
+  constructor(private router: Router, private store: Store<AppStore>) {}

  private getNavigationCommands(url: string): any[] {
    const urlTree = this.router.parseUrl(url);
--- a/src/app/components/sidenav/directives/active-link.directive.spec.ts
+++ b/src/app/components/sidenav/directives/active-link.directive.spec.ts
@@ -74,7 +74,7 @@ describe('ActionDirective', () => {
    });

    fixture = TestBed.createComponent(TestComponent);
-    router = TestBed.get(Router);
+    router = TestBed.inject(Router);
  });

  it('should add active route class name', () => {
--- a/src/app/components/sidenav/directives/active-link.directive.ts
+++ b/src/app/components/sidenav/directives/active-link.directive.ts
@@ -31,7 +31,8 @@ import {
  Renderer2,
  ContentChildren,
  QueryList,
-  AfterContentInit
+  AfterContentInit,
+  Optional
 } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import { filter, takeUntil } from 'rxjs/operators';
@@ -53,7 +54,8 @@ export class ActiveLinkDirective implements OnInit, AfterContentInit {
  constructor(
    private router: Router,
    private element: ElementRef,
-    private renderer: Renderer2
+    private renderer: Renderer2,
+    @Optional() private action?: ActionDirective
  ) {}

  ngOnInit() {
@@ -68,21 +70,27 @@ export class ActiveLinkDirective implements OnInit, AfterContentInit {
  }

  private update(url: string) {
+    if (this.action) {
+      const itemUrl = this.resolveUrl(this.action);
+      this.render(url, itemUrl);
+    }
+
    this.links.map(item => {
      const itemUrl = this.resolveUrl(item);
-      if (url && url.substring(1).startsWith(itemUrl)) {
-        this.isLinkActive = true;
-        this.renderer.addClass(this.element.nativeElement, this.acaActiveLink);
-      } else {
-        this.isLinkActive = false;
-        this.renderer.removeClass(
-          this.element.nativeElement,
-          this.acaActiveLink
-        );
-      }
+      this.render(url, itemUrl);
    });
  }

+  private render(routerUrl: string, actionUrl: string) {
+    if (routerUrl && routerUrl.substring(1).startsWith(actionUrl)) {
+      this.isLinkActive = true;
+      this.renderer.addClass(this.element.nativeElement, this.acaActiveLink);
+    } else {
+      this.isLinkActive = false;
+      this.renderer.removeClass(this.element.nativeElement, this.acaActiveLink);
+    }
+  }
+
  ngAfterContentInit() {
    this.links.changes.subscribe(() => this.update(this.router.url));
    this.update(this.router.url);
@@ -90,7 +98,7 @@ export class ActiveLinkDirective implements OnInit, AfterContentInit {

  private resolveUrl(item): string {
    return (
-      (item.action && (item.action.click && item.action.click.payload)) ||
+      (item.action && item.action.click && item.action.click.payload) ||
      item.action.route
    );
  }
--- a/src/app/components/sidenav/sidenav.component.spec.ts
+++ b/src/app/components/sidenav/sidenav.component.spec.ts
@@ -54,7 +54,7 @@ describe('SidenavComponent', () => {
      .then(() => {
        fixture = TestBed.createComponent(SidenavComponent);
        component = fixture.componentInstance;
-        extensionService = TestBed.get(AppExtensionService);
+        extensionService = TestBed.inject(AppExtensionService);

        extensionService.navbar = navbarMock;

--- a/src/app/components/sidenav/sidenav.component.ts
+++ b/src/app/components/sidenav/sidenav.component.ts
@@ -55,7 +55,9 @@ export class SidenavComponent implements OnInit, OnDestroy {
  @ContentChild(ExpandedTemplateDirective, { read: TemplateRef })
  expandedTemplate;

-  @ContentChild(CollapsedTemplateDirective, { read: TemplateRef })
+  @ContentChild(CollapsedTemplateDirective, {
+    read: TemplateRef
+  })
  collapsedTemplate;

  groups: Array<NavBarGroupRef> = [];
--- a/src/app/components/toolbar/toggle-edit-offline/toggle-edit-offline.component.spec.ts
+++ b/src/app/components/toolbar/toggle-edit-offline/toggle-edit-offline.component.spec.ts
@@ -29,6 +29,7 @@ import { setupTestBed, CoreModule } from '@alfresco/adf-core';
 import { TestBed } from '@angular/core/testing';
 import { of } from 'rxjs';
 import { Store } from '@ngrx/store';
+import { NodeEntry } from '@alfresco/js-api';
 import {
  DownloadNodesAction,
  EditOfflineAction,
@@ -39,9 +40,10 @@ import { TranslateModule } from '@ngx-translate/core';
 describe('ToggleEditOfflineComponent', () => {
  let fixture;
  let component;
-  let selection;
  let store;
  let dispatchSpy;
+  let selectSpy;
+  const selection = { file: { entry: { name: 'test', properties: {} } } };

  setupTestBed({
    imports: [TranslateModule.forRoot(), CoreModule.forRoot()],
@@ -50,7 +52,7 @@ describe('ToggleEditOfflineComponent', () => {
      {
        provide: Store,
        useValue: {
-          select: () => of(selection),
+          select: () => {},
          dispatch: () => {}
        }
      }
@@ -60,9 +62,10 @@ describe('ToggleEditOfflineComponent', () => {
  beforeEach(() => {
    fixture = TestBed.createComponent(ToggleEditOfflineComponent);
    component = fixture.componentInstance;
-    store = TestBed.get(Store);
+    store = TestBed.inject(Store);

    dispatchSpy = spyOn(store, 'dispatch');
+    selectSpy = spyOn(store, 'select');
  });

  afterEach(() => {
@@ -70,7 +73,7 @@ describe('ToggleEditOfflineComponent', () => {
  });

  it('should initialized with data from store', () => {
-    selection = { file: { entry: { properties: {} } } };
+    selectSpy.and.returnValue(of(selection));

    fixture.detectChanges();

@@ -78,7 +81,8 @@ describe('ToggleEditOfflineComponent', () => {
  });

  it('should download content if node is locked', () => {
-    component.selection = { entry: { properties: {} } };
+    selectSpy.and.returnValue(of(selection));
+    fixture.detectChanges();

    const isLocked = true;
    component.onToggleEvent(isLocked);
@@ -86,12 +90,13 @@ describe('ToggleEditOfflineComponent', () => {
    fixture.detectChanges();

    expect(dispatchSpy.calls.argsFor(0)).toEqual([
-      new DownloadNodesAction([component.selection])
+      new DownloadNodesAction([selection.file as NodeEntry])
    ]);
  });

  it('should not download content if node is not locked', () => {
-    component.selection = { entry: { properties: {} } };
+    selectSpy.and.returnValue(of(selection));
+    fixture.detectChanges();

    const isLocked = false;
    component.onToggleEvent(isLocked);
@@ -99,12 +104,13 @@ describe('ToggleEditOfflineComponent', () => {
    fixture.detectChanges();

    expect(dispatchSpy.calls.argsFor(0)).not.toEqual([
-      new DownloadNodesAction([component.selection])
+      new DownloadNodesAction([selection.file as NodeEntry])
    ]);
  });

  it('should dispatch EditOfflineAction action', () => {
-    component.selection = { entry: { properties: {} } };
+    selectSpy.and.returnValue(of(selection));
+    fixture.detectChanges();

    const isLocked = false;
    component.onToggleEvent(isLocked);
@@ -112,14 +118,13 @@ describe('ToggleEditOfflineComponent', () => {
    fixture.detectChanges();

    expect(dispatchSpy.calls.argsFor(0)).toEqual([
-      new EditOfflineAction(component.selection)
+      new EditOfflineAction(selection.file as NodeEntry)
    ]);
  });

  it('should raise notification on lock error', () => {
-    component.selection = {
-      entry: { name: 'test' }
-    };
+    selectSpy.and.returnValue(of(selection));
+    fixture.detectChanges();

    component.onLockError();
    fixture.detectChanges();
@@ -132,9 +137,8 @@ describe('ToggleEditOfflineComponent', () => {
  });

  it('should raise notification on unlock error', () => {
-    component.selection = {
-      entry: { name: 'test' }
-    };
+    selectSpy.and.returnValue(of(selection));
+    fixture.detectChanges();

    component.onUnlockLockError();
    fixture.detectChanges();
--- a/src/app/components/toolbar/toggle-favorite-library/toggle-favorite-library.component.spec.ts
+++ b/src/app/components/toolbar/toggle-favorite-library/toggle-favorite-library.component.spec.ts
@@ -23,7 +23,7 @@
 * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
 */

-import { TestBed } from '@angular/core/testing';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
 import {
  CoreModule,
  AlfrescoApiService,
@@ -40,7 +40,7 @@ import { Router } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';

 describe('ToggleFavoriteLibraryComponent', () => {
-  let fixture;
+  let fixture: ComponentFixture<ToggleFavoriteLibraryComponent>;
  let component;
  let contentManagementService;
  const selection = { library: { entry: { id: 'libraryId' } } };
@@ -82,33 +82,34 @@ describe('ToggleFavoriteLibraryComponent', () => {
    fixture = TestBed.createComponent(ToggleFavoriteLibraryComponent);
    component = fixture.componentInstance;

-    contentManagementService = TestBed.get(ContentManagementService);
-    const api = TestBed.get(AlfrescoApiService);
-    spyOn(api.peopleApi, 'getFavoriteSite').and.returnValue(Promise.resolve());
+    contentManagementService = TestBed.inject(ContentManagementService);
+    const api = TestBed.inject(AlfrescoApiService);
+    spyOn(api.peopleApi, 'getFavoriteSite').and.returnValue(
+      Promise.resolve(null)
+    );
  });

-  it('should get library selection from Store', done => {
+  it('should get library selection from Store', async () => {
    fixture.detectChanges();
-    component.selection$.subscribe(selected => {
-      expect(selected.library.entry.id).toEqual(selection.library.entry.id);
-      done();
-    });
+    await fixture.whenStable();
+
+    expect(component.library.entry.id).toEqual(selection.library.entry.id);
  });

-  it('should mark selection as favorite when on favorite libraries route', done => {
+  it('should mark selection as favorite when on favorite libraries route', async () => {
    mockRouter.url = '/favorite/libraries';
    fixture.detectChanges();
+    await fixture.whenStable();

-    component.selection$.subscribe(selected => {
-      expect(selected.library.isFavorite).toBe(true);
-      done();
-    });
+    expect(component.library.isFavorite).toBe(true);
  });

-  it('should emit onToggleEvent() event', () => {
-    fixture.detectChanges();
+  it('should emit onToggleEvent() event', async () => {
    spyOn(contentManagementService.favoriteLibraryToggle, 'next');

+    fixture.detectChanges();
+    await fixture.whenStable();
+
    component.onToggleEvent();

    expect(
--- a/src/app/components/toolbar/toggle-favorite-library/toggle-favorite-library.component.ts
+++ b/src/app/components/toolbar/toggle-favorite-library/toggle-favorite-library.component.ts
@@ -23,43 +23,44 @@
 * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
 */

-import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppStore, getAppSelection } from '@alfresco/aca-shared/store';
-import { Observable } from 'rxjs';
 import { SelectionState } from '@alfresco/adf-extensions';
 import { ContentManagementService } from '../../../services/content-management.service';
-import { distinctUntilChanged, map } from 'rxjs/operators';
+import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import { Router } from '@angular/router';
+import { Subject } from 'rxjs';

@Component({
  selector: 'app-toggle-favorite-library',
  template: `
    <button
      mat-menu-item
-      #favoriteLibrary="favoriteLibrary"
      (toggle)="onToggleEvent()"
-      [acaFavoriteLibrary]="(selection$ | async).library"
+      [acaFavoriteLibrary]="library"
      [attr.title]="
-        favoriteLibrary.isFavorite()
+        library.isFavorite
          ? ('APP.ACTIONS.REMOVE_FAVORITE' | translate)
          : ('APP.ACTIONS.FAVORITE' | translate)
      "
    >
-      <mat-icon *ngIf="favoriteLibrary.isFavorite()">star</mat-icon>
-      <mat-icon *ngIf="!favoriteLibrary.isFavorite()">star_border</mat-icon>
+      <mat-icon *ngIf="library.isFavorite">star</mat-icon>
+      <mat-icon *ngIf="!library.isFavorite">star_border</mat-icon>
      <span>{{
-        (favoriteLibrary.isFavorite()
+        (library.isFavorite
          ? 'APP.ACTIONS.REMOVE_FAVORITE'
-          : 'APP.ACTIONS.FAVORITE') | translate
+          : 'APP.ACTIONS.FAVORITE'
+        ) | translate
      }}</span>
    </button>
  `,
  encapsulation: ViewEncapsulation.None,
  host: { class: 'app-toggle-favorite-library' }
 })
-export class ToggleFavoriteLibraryComponent implements OnInit {
-  selection$: Observable<SelectionState>;
+export class ToggleFavoriteLibraryComponent implements OnInit, OnDestroy {
+  library;
+  private onDestroy$: Subject<boolean> = new Subject<boolean>();

  constructor(
    private store: Store<AppStore>,
@@ -72,17 +73,22 @@ export class ToggleFavoriteLibraryComponent implements OnInit {
      '/favorite/libraries'
    );

-    this.selection$ = this.store.select(getAppSelection).pipe(
-      distinctUntilChanged(),
-      map(selection => {
+    this.store
+      .select(getAppSelection)
+      .pipe(distinctUntilChanged(), takeUntil(this.onDestroy$))
+      .subscribe((selection: SelectionState) => {
+        this.library = { ...selection.library };
+
        // favorite libraries list should already be marked as favorite
        if (selection.library && isFavoriteLibraries) {
-          (selection.library as any).isFavorite = true;
-          return selection;
+          this.library.isFavorite = true;
        }
-        return selection;
-      })
-    );
+      });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
  }

  onToggleEvent() {
--- a/src/app/components/toolbar/toggle-favorite/toggle-favorite.component.spec.ts
+++ b/src/app/components/toolbar/toggle-favorite/toggle-favorite.component.spec.ts
@@ -66,7 +66,7 @@ describe('ToggleFavoriteComponent', () => {

    fixture = TestBed.createComponent(ToggleFavoriteComponent);
    component = fixture.componentInstance;
-    router = TestBed.get(Router);
+    router = TestBed.inject(Router);
  });

  afterEach(() => {
@@ -79,6 +79,7 @@ describe('ToggleFavoriteComponent', () => {

  it('should not dispatch reload if route is not specified', () => {
    component.data = "['/reload_on_this_route']";
+    router.url = '/somewhere_over_the_rainbow';

    fixture.detectChanges();
    component.onToggleEvent();
--- a/src/app/components/toolbar/toggle-favorite/toggle-favorite.component.ts
+++ b/src/app/components/toolbar/toggle-favorite/toggle-favorite.component.ts
@@ -48,7 +48,8 @@ import { Router } from '@angular/router';
      <span>{{
        (favorites.hasFavorites()
          ? 'APP.ACTIONS.REMOVE_FAVORITE'
-          : 'APP.ACTIONS.FAVORITE') | translate
+          : 'APP.ACTIONS.FAVORITE'
+        ) | translate
      }}</span>
    </button>
  `,
--- a/src/app/components/toolbar/toggle-join-library/toggle-join-library.component.spec.ts
+++ b/src/app/components/toolbar/toggle-join-library/toggle-join-library.component.spec.ts
@@ -72,8 +72,8 @@ describe('ToggleJoinLibraryComponent', () => {

    fixture = TestBed.createComponent(ToggleJoinLibraryButtonComponent);
    component = fixture.componentInstance;
-    alfrescoApi = TestBed.get(AlfrescoApiService);
-    contentManagementService = TestBed.get(ContentManagementService);
+    alfrescoApi = TestBed.inject(AlfrescoApiService);
+    contentManagementService = TestBed.inject(ContentManagementService);

    spyOn(alfrescoApi.peopleApi, 'getSiteMembershipRequest').and.stub();
  });
--- a/src/app/components/toolbar/toolbar.module.ts
+++ b/src/app/components/toolbar/toolbar.module.ts
@@ -62,7 +62,6 @@ export function components() {
    DirectivesModule
  ],
  declarations: components(),
-  exports: [components(), SharedToolbarModule],
-  entryComponents: components()
+  exports: [components(), SharedToolbarModule]
 })
 export class AppToolbarModule {}
--- a/src/app/components/toolbar/view-node/view-node.component.spec.ts
+++ b/src/app/components/toolbar/view-node/view-node.component.spec.ts
@@ -31,7 +31,7 @@ import { Router } from '@angular/router';
 import { of } from 'rxjs';
 import { TranslateModule } from '@ngx-translate/core';

-describe('ToggleFavoriteComponent', () => {
+describe('ViewNodeComponent', () => {
  let component: ViewNodeComponent;
  let fixture;
  const mockRouter = {
--- a/src/app/components/trashcan/trashcan.component.spec.ts
+++ b/src/app/components/trashcan/trashcan.component.spec.ts
@@ -65,7 +65,7 @@ describe('TrashcanComponent', () => {
    fixture = TestBed.createComponent(TrashcanComponent);
    component = fixture.componentInstance;

-    alfrescoApi = TestBed.get(AlfrescoApiService);
+    alfrescoApi = TestBed.inject(AlfrescoApiService);
    alfrescoApi.reset();

    component.documentList = {
--- a/src/app/components/viewer/viewer.component.ts
+++ b/src/app/components/viewer/viewer.component.ts
@@ -188,10 +188,7 @@ export class AppViewerComponent implements OnInit, OnDestroy {
      .subscribe(() => this.navigateToFileLocation());

    this.uploadService.fileUploadComplete
-      .pipe(
-        debounceTime(300),
-        takeUntil(this.onDestroy$)
-      )
+      .pipe(debounceTime(300), takeUntil(this.onDestroy$))
      .subscribe(file => {
        this.apiService.nodeUpdated.next(file.data.entry);
        this.displayNode(file.data.entry.id);