Angular 18 upgrade

2025-10-08 14:51:14 +00:00 · 2025-03-14 11:18:02 +01:00
parent 32cd099515
commit 69fa4774ae
18 changed files with 4504 additions and 7857 deletions
--- a/projects/aca-content/src/lib/components/dl-custom-components/datatable-cell-badges/datatable-cell-badges.component.spec.ts
+++ b/projects/aca-content/src/lib/components/dl-custom-components/datatable-cell-badges/datatable-cell-badges.component.spec.ts
@@ -32,7 +32,7 @@ import { NodeEntry } from '@alfresco/js-api';
 import { of } from 'rxjs';
 import { By } from '@angular/platform-browser';
 import { ContentActionType } from '@alfresco/adf-extensions';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { StoreModule } from '@ngrx/store';

 const mockNode = {
@@ -59,7 +59,6 @@ describe('DatatableCellBadgesComponent', () => {
      imports: [
        TranslateModule.forRoot(),
        AuthModule.forRoot(),
-        HttpClientModule,
        StoreModule.forRoot(
          { app: (state) => state },
          {
@@ -76,7 +75,7 @@ describe('DatatableCellBadgesComponent', () => {
          }
        )
      ],
-      providers: [Actions]
+      providers: [Actions, provideHttpClient(withInterceptorsFromDi())]
    });

    fixture = TestBed.createComponent(DatatableCellBadgesComponent);
--- a/projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.spec.ts
+++ b/projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.spec.ts
@@ -26,7 +26,7 @@ import { CustomNameColumnComponent } from './name-column.component';
 import { Actions } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { TranslateModule } from '@ngx-translate/core';
 import { By } from '@angular/platform-browser';
 import { AuthModule } from '@alfresco/adf-core';
@@ -49,7 +49,6 @@ describe('CustomNameColumnComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
-        HttpClientModule,
        TranslateModule.forRoot(),
        CustomNameColumnComponent,
        MockDatatableCellBadgesComponent,
@@ -70,7 +69,7 @@ describe('CustomNameColumnComponent', () => {
          }
        )
      ],
-      providers: [Actions]
+      providers: [Actions, provideHttpClient(withInterceptorsFromDi())]
    });

    fixture = TestBed.createComponent(CustomNameColumnComponent);
--- a/projects/aca-content/src/lib/components/home/home.component.spec.ts
+++ b/projects/aca-content/src/lib/components/home/home.component.spec.ts
@@ -25,7 +25,7 @@
 import { HomeComponent } from './home.component';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Router } from '@angular/router';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppSettingsService } from '@alfresco/aca-shared';

@@ -36,7 +36,8 @@ describe('HomeComponent', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
-      imports: [HttpClientModule, RouterTestingModule, HomeComponent]
+      imports: [RouterTestingModule, HomeComponent],
+      providers: [provideHttpClient(withInterceptorsFromDi())]
    });
    appSettings = TestBed.inject(AppSettingsService);
    spyOnProperty(appSettings, 'landingPage', 'get').and.returnValue('/my-mock-landing-page');
--- a/projects/aca-content/src/lib/testing/app-testing.module.ts
+++ b/projects/aca-content/src/lib/testing/app-testing.module.ts
@@ -25,25 +25,25 @@
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { TranslationService, TranslationMock, AuthenticationService, PageTitleService } from '@alfresco/adf-core';
+import { AuthenticationService, PageTitleService, TranslationMock, TranslationService } from '@alfresco/adf-core';
 import { AlfrescoApiService, AlfrescoApiServiceMock, DiscoveryApiService, SearchQueryBuilderService } from '@alfresco/adf-content-services';
 import { RepositoryInfo, VersionInfo } from '@alfresco/js-api';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { StoreModule } from '@ngrx/store';
 import { appReducer } from '../store/reducers/app.reducer';
 import { RouterTestingModule } from '@angular/router/testing';
 import { EffectsModule } from '@ngrx/effects';
 import { INITIAL_STATE } from '../store/initial-state';
-import { BehaviorSubject, Observable, Subject, of } from 'rxjs';
+import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
 import { ContentManagementService } from '../services/content-management.service';
 import { DocumentBasePageService } from '@alfresco/aca-shared';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
+  exports: [RouterTestingModule, TranslateModule],
  imports: [
    NoopAnimationsModule,
-    HttpClientModule,
    RouterTestingModule,
    TranslateModule.forRoot(),
    StoreModule.forRoot(
@@ -60,7 +60,6 @@ import { MatDialogModule } from '@angular/material/dialog';
    MatSnackBarModule,
    MatDialogModule
  ],
-  exports: [RouterTestingModule, TranslateModule],
  providers: [
    SearchQueryBuilderService,
    { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
@@ -96,7 +95,8 @@ import { MatDialogModule } from '@angular/material/dialog';
    {
      provide: PageTitleService,
      useValue: {}
-    }
+    },
+    provideHttpClient(withInterceptorsFromDi())
  ]
 })
 export class AppTestingModule {}
--- a/projects/aca-content/src/lib/ui/application.scss
+++ b/projects/aca-content/src/lib/ui/application.scss
@@ -11,7 +11,7 @@ body {

  font-size: 14px;
  font-family: 'Open Sans', serif;
-  color: mat.get-color-from-palette($foreground, text, 0.87);
+  color: mat.m2-get-color-from-palette($foreground, text, 0.87);
  margin: 0;

  & > main {
--- a/projects/aca-content/src/lib/ui/custom-theme.scss
+++ b/projects/aca-content/src/lib/ui/custom-theme.scss
@@ -6,25 +6,25 @@
@import './overrides/adf-about.theme';
@import './colors';

-$mat-primary-palette: mat.define-palette($aca-primary-blue, A100);
-$mat-accent-palette: mat.define-palette($aca-accent-green, A200);
-$mat-warn-palette: mat.define-palette($aca-warn, A100);
-$app-typography: mat.define-typography-config(
+$mat-primary-palette: mat.m2-define-palette($aca-primary-blue, A100);
+$mat-accent-palette: mat.m2-define-palette($aca-accent-green, A200);
+$mat-warn-palette: mat.m2-define-palette($aca-warn, A100);
+$app-typography: mat.m2-define-typography-config(
  $font-family: 'Open Sans',
-  $headline-1: mat.define-typography-level(112px, 112px, 300),
-  $headline-2: mat.define-typography-level(56px, 56px, 400),
-  $headline-3: mat.define-typography-level(45px, 48px, 400),
-  $headline-4: mat.define-typography-level(34px, 40px, 400),
-  $headline-5: mat.define-typography-level(24px, 32px, 400),
-  $headline-6: mat.define-typography-level(20px, 32px, 400),
-  $subtitle-1: mat.define-typography-level(16px, 28px, 400),
-  $subtitle-2: mat.define-typography-level(14px, 24px, 500),
-  $body-2: mat.define-typography-level(14px, 24px, 500),
-  $body-1: mat.define-typography-level(14px, 20px, 400),
-  $caption: mat.define-typography-level(12px, 20px, 400),
-  $button: mat.define-typography-level(14px, 14px, 500)
+  $headline-1: mat.m2-define-typography-level(112px, 112px, 300),
+  $headline-2: mat.m2-define-typography-level(56px, 56px, 400),
+  $headline-3: mat.m2-define-typography-level(45px, 48px, 400),
+  $headline-4: mat.m2-define-typography-level(34px, 40px, 400),
+  $headline-5: mat.m2-define-typography-level(24px, 32px, 400),
+  $headline-6: mat.m2-define-typography-level(20px, 32px, 400),
+  $subtitle-1: mat.m2-define-typography-level(16px, 28px, 400),
+  $subtitle-2: mat.m2-define-typography-level(14px, 24px, 500),
+  $body-2: mat.m2-define-typography-level(14px, 24px, 500),
+  $body-1: mat.m2-define-typography-level(14px, 20px, 400),
+  $caption: mat.m2-define-typography-level(12px, 20px, 400),
+  $button: mat.m2-define-typography-level(14px, 14px, 500)
 );
-$custom-theme: mat.define-light-theme(
+$custom-theme: mat.m2-define-light-theme(
  (
    color: (
      primary: $mat-primary-palette,
--- a/projects/aca-content/src/lib/ui/variables/variables.scss
+++ b/projects/aca-content/src/lib/ui/variables/variables.scss
@@ -4,10 +4,10 @@

 $foreground: map-get($custom-theme, foreground);
 $background: map-get($custom-theme, background);
-$background-color: mat.get-color-from-palette($background, background);
-$background-card-color: mat.get-color-from-palette($background, card);
-$text-color: mat.get-color-from-palette($foreground, text);
-$secondary-text: mat.get-color-from-palette($foreground, secondary-text);
+$background-color: mat.m2-get-color-from-palette($background, background);
+$background-card-color: mat.m2-get-color-from-palette($background, card);
+$text-color: mat.m2-get-color-from-palette($foreground, text);
+$secondary-text: mat.m2-get-color-from-palette($foreground, secondary-text);

 // Custom variables - ACA specific styling:
 $data-table-thumbnail-width: 35px;
@@ -44,7 +44,7 @@ $action-button-text-color: lighten($text-color, 35%);
 $page-layout-header-background-color: $background-card-color;
 $search-chip-icon-color: #757575;
 $disabled-chip-background-color: #f5f5f5;
-$contrast-gray: mat.get-color-from-palette($foreground, 'secondary-tex');
+$contrast-gray: mat.m2-get-color-from-palette($foreground, 'secondary-tex');
 $search-highlight-background-color: #ffd180;
 $info-snackbar-background: #1f74db;
 $text-light-color: rgba(33, 35, 40, 0.7);
@@ -57,22 +57,22 @@ $light-grey-3: #dedede;
 $defaults: (
  --theme-background-color: $background-color,
  --theme-search-background-color: darken($background-color, 1),
-  --theme-text-color: mat.get-color-from-palette($foreground, text, 0.54),
-  --theme-sidenav-text-color: mat.get-color-from-palette($foreground, text),
-  --theme-sidenav-hovered-text-color: mat.get-color-from-palette($foreground, text),
-  --theme-sidenav-user-menu-color: mat.get-color-from-palette($foreground, text),
-  --theme-tab-active-text-color: mat.get-color-from-palette($foreground, text),
-  --theme-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
-  --theme-title-color: mat.get-color-from-palette($foreground, text, 0.87),
-  --theme-text-disabled-color: mat.get-color-from-palette($foreground, text, 0.38),
-  --theme-border-color: mat.get-color-from-palette($foreground, text, 0.07),
-  --theme-card-background-color: mat.get-color-from-palette($background, card),
-  --theme-foreground-text-color: mat.get-color-from-palette($foreground, text, 0.72),
-  --theme-foreground-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
-  --theme-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text),
-  --theme-divider-color: mat.get-color-from-palette($foreground, divider, 0.07),
-  --theme-dialog-background-color: mat.get-color-from-palette($background, dialog),
-  --theme-header-text-color: mat.get-color-from-palette($foreground, text, 0.87),
+  --theme-text-color: mat.m2-get-color-from-palette($foreground, text, 0.54),
+  --theme-sidenav-text-color: mat.m2-get-color-from-palette($foreground, text),
+  --theme-sidenav-hovered-text-color: mat.m2-get-color-from-palette($foreground, text),
+  --theme-sidenav-user-menu-color: mat.m2-get-color-from-palette($foreground, text),
+  --theme-tab-active-text-color: mat.m2-get-color-from-palette($foreground, text),
+  --theme-text-bold-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
+  --theme-title-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
+  --theme-text-disabled-color: mat.m2-get-color-from-palette($foreground, text, 0.38),
+  --theme-border-color: mat.m2-get-color-from-palette($foreground, text, 0.07),
+  --theme-card-background-color: mat.m2-get-color-from-palette($background, card),
+  --theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text, 0.72),
+  --theme-foreground-text-bold-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
+  --theme-secondary-text-color: mat.m2-get-color-from-palette($foreground, secondary-text),
+  --theme-divider-color: mat.m2-get-color-from-palette($foreground, divider, 0.07),
+  --theme-dialog-background-color: mat.m2-get-color-from-palette($background, dialog),
+  --theme-header-text-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
  --new-button-font-size: 0.9rem,
  --theme-grey-text-background-color: $grey-text-background,
  --theme-grey-background-color: $grey-background,
@@ -86,10 +86,10 @@ $defaults: (
  --theme-dropdown-color: $theme-dropdown-background,
  --theme-dropdown-background-hover: $theme-dropdown-background-hover,
  --theme-grey-divider-color: $grey-divider,
-  --theme-pagination-background-color: mat.get-color-from-palette($background, background),
+  --theme-pagination-background-color: mat.m2-get-color-from-palette($background, background),
  --theme-about-panel-border-color: $grey-background,
-  --theme-about-panel-background-color: mat.get-color-from-palette($background, card),
-  --theme-about-panel-title-color: mat.get-color-from-palette($foreground, text),
+  --theme-about-panel-background-color: mat.m2-get-color-from-palette($background, card),
+  --theme-about-panel-title-color: mat.m2-get-color-from-palette($foreground, text),
  --theme-datetimepicker-font-color: $datetimepicker-font-color,
  --theme-datetimepicker-selected-date-background: $datetimepicker-selected-date-background,
  --theme-datetimepicker-cell-background: $datetimepicker-cell-background-color,
--- a/projects/aca-content/viewer/src/lib/services/viewer.service.spec.ts
+++ b/projects/aca-content/viewer/src/lib/services/viewer.service.spec.ts
@@ -29,7 +29,7 @@ import { FavoritePaging, NodePaging, SharedLinkPaging } from '@alfresco/js-api';
 import { ViewerService } from './viewer.service';
 import { of } from 'rxjs';
 import { TranslateModule } from '@ngx-translate/core';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

 const list = {
  list: {
@@ -69,8 +69,14 @@ describe('ViewerService', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), HttpClientModule],
-      providers: [{ provide: TranslationService, useClass: TranslationMock }, ViewerService, UserPreferencesService, ContentApiService]
+      imports: [TranslateModule.forRoot()],
+      providers: [
+        { provide: TranslationService, useClass: TranslationMock },
+        ViewerService,
+        UserPreferencesService,
+        ContentApiService,
+        provideHttpClient(withInterceptorsFromDi())
+      ]
    });

    preferences = TestBed.inject(UserPreferencesService);
--- a/projects/aca-shared/src/lib/routing/plugin-enabled.guard.spec.ts
+++ b/projects/aca-shared/src/lib/routing/plugin-enabled.guard.spec.ts
@@ -26,7 +26,8 @@ import { AppConfigService } from '@alfresco/adf-core';
 import { TestBed } from '@angular/core/testing';
 import { PluginEnabledGuard } from './plugin-enabled.guard';
 import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

 describe('PluginEnabledGuard', () => {
  let getSpy: jasmine.Spy<(key: string, defaultValue?: boolean) => boolean>;
@@ -34,7 +35,8 @@ describe('PluginEnabledGuard', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule]
+      imports: [],
+      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
    });
    getSpy = spyOn(TestBed.inject(AppConfigService), 'get');
    route = new ActivatedRouteSnapshot();
--- a/projects/aca-shared/src/lib/services/app.service.spec.ts
+++ b/projects/aca-shared/src/lib/services/app.service.spec.ts
@@ -26,15 +26,15 @@ import { AppService } from './app.service';
 import { TestBed } from '@angular/core/testing';
 import {
  AuthenticationService,
+  NotificationService,
  PageTitleService,
+  StorageService,
  TranslationMock,
  TranslationService,
-  UserPreferencesService,
-  NotificationService,
-  StorageService
+  UserPreferencesService
 } from '@alfresco/adf-core';
 import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import {
  AlfrescoApiService,
  AlfrescoApiServiceMock,
@@ -73,7 +73,7 @@ describe('AppService', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
-      imports: [CommonModule, HttpClientModule, TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), MatDialogModule, MatSnackBarModule],
+      imports: [CommonModule, TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), MatDialogModule, MatSnackBarModule],
      providers: [
        SearchQueryBuilderService,
        provideMockStore({}),
@@ -121,7 +121,8 @@ describe('AppService', () => {
            setStoragePrefix: () => null,
            getPropertyKey: (property: string) => `prefix__${property}`
          }
-        }
+        },
+        provideHttpClient(withInterceptorsFromDi())
      ]
    });

--- a/projects/aca-shared/src/lib/testing/lib-testing-module.ts
+++ b/projects/aca-shared/src/lib/testing/lib-testing-module.ts
@@ -27,7 +27,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateLoaderService, TranslationMock, TranslationService } from '@alfresco/adf-core';
 import { AlfrescoApiService, AlfrescoApiServiceMock } from '@alfresco/adf-content-services';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { RouterTestingModule } from '@angular/router/testing';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
@@ -93,10 +93,10 @@ export class DocumentBasePageServiceMock extends DocumentBasePageService {
 }

@NgModule({
+  exports: [TranslateModule],
  imports: [
    NoopAnimationsModule,
    CommonModule,
-    HttpClientModule,
    RouterTestingModule,
    MatIconTestingModule,
    StoreModule,
@@ -119,10 +119,10 @@ export class DocumentBasePageServiceMock extends DocumentBasePageService {
      }
    })
  ],
-  exports: [TranslateModule],
  providers: [
    { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
-    { provide: TranslationService, useClass: TranslationMock }
+    { provide: TranslationService, useClass: TranslationMock },
+    provideHttpClient(withInterceptorsFromDi())
  ]
 })
 export class LibTestingModule {}