Chore: update to Angular v18 (#7106)

2025-07-28 18:24:38 -05:00 · 2024-06-26 20:57:39 -07:00
parent 4f1185c65d
commit 3435ffd00c
93 changed files with 3461 additions and 2829 deletions
--- a/src-ui/src/app/components/common/input/date/date.component.spec.ts
+++ b/src-ui/src/app/components/common/input/date/date.component.spec.ts
@@ -5,7 +5,7 @@ import {
  ReactiveFormsModule,
 } from '@angular/forms'
 import { DateComponent } from './date.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
  NgbDateParserFormatter,
  NgbDatepickerModule,
@@ -13,6 +13,7 @@ import {
 import { RouterTestingModule } from '@angular/router/testing'
 import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('DateComponent', () => {
  let component: DateComponent
@@ -22,19 +23,20 @@ describe('DateComponent', () => {
  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [DateComponent],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgbDatepickerModule,
+        RouterTestingModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
      providers: [
        {
          provide: NgbDateParserFormatter,
          useClass: LocalizedDateParserFormatter,
        },
-      ],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        HttpClientTestingModule,
-        NgbDatepickerModule,
-        RouterTestingModule,
-        NgxBootstrapIconsModule.pick(allIcons),
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/input/document-link/document-link.component.spec.ts
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.spec.ts
@@ -1,4 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import {
  FormsModule,
@@ -10,6 +10,7 @@ import { of, throwError } from 'rxjs'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { DocumentLinkComponent } from './document-link.component'
 import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 const documents = [
  {
@@ -38,11 +39,10 @@ describe('DocumentLinkComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [DocumentLinkComponent],
-      imports: [
-        HttpClientTestingModule,
-        NgSelectModule,
-        FormsModule,
-        ReactiveFormsModule,
+      imports: [NgSelectModule, FormsModule, ReactiveFormsModule],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    })
    documentService = TestBed.inject(DocumentService)
--- a/src-ui/src/app/components/common/input/file/file.component.spec.ts
+++ b/src-ui/src/app/components/common/input/file/file.component.spec.ts
@@ -1,8 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'

 import { FileComponent } from './file.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('FileComponent', () => {
  let component: FileComponent
@@ -11,7 +12,11 @@ describe('FileComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [FileComponent],
-      imports: [FormsModule, ReactiveFormsModule, HttpClientTestingModule],
+      imports: [FormsModule, ReactiveFormsModule],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()

    fixture = TestBed.createComponent(FileComponent)
--- a/src-ui/src/app/components/common/input/monetary/monetary.component.spec.ts
+++ b/src-ui/src/app/components/common/input/monetary/monetary.component.spec.ts
@@ -4,9 +4,10 @@ import {
  NG_VALUE_ACCESSOR,
  ReactiveFormsModule,
 } from '@angular/forms'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { CurrencyPipe } from '@angular/common'
 import { MonetaryComponent } from './monetary.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('MonetaryComponent', () => {
  let component: MonetaryComponent
@@ -15,8 +16,12 @@ describe('MonetaryComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MonetaryComponent],
-      providers: [CurrencyPipe],
-      imports: [FormsModule, ReactiveFormsModule, HttpClientTestingModule],
+      imports: [FormsModule, ReactiveFormsModule],
+      providers: [
+        CurrencyPipe,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()

    fixture = TestBed.createComponent(MonetaryComponent)
--- a/src-ui/src/app/components/common/input/number/number.component.spec.ts
+++ b/src-ui/src/app/components/common/input/number/number.component.spec.ts
@@ -6,8 +6,9 @@ import {
 } from '@angular/forms'
 import { NumberComponent } from './number.component'
 import { DocumentService } from 'src/app/services/rest/document.service'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { of } from 'rxjs'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('NumberComponent', () => {
  let component: NumberComponent
@@ -18,8 +19,12 @@ describe('NumberComponent', () => {
  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [NumberComponent],
-      providers: [DocumentService],
-      imports: [FormsModule, ReactiveFormsModule, HttpClientTestingModule],
+      imports: [FormsModule, ReactiveFormsModule],
+      providers: [
+        DocumentService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()

    fixture = TestBed.createComponent(NumberComponent)
--- a/src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.spec.ts
+++ b/src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.spec.ts
@@ -9,8 +9,9 @@ import { SelectComponent } from '../../select/select.component'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
 import { PermissionsGroupComponent } from '../permissions-group/permissions-group.component'
 import { PermissionsUserComponent } from '../permissions-user/permissions-user.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { NgSelectModule } from '@ng-select/ng-select'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('PermissionsFormComponent', () => {
  let component: PermissionsFormComponent
@@ -24,14 +25,16 @@ describe('PermissionsFormComponent', () => {
        PermissionsGroupComponent,
        PermissionsUserComponent,
      ],
-      providers: [],
      imports: [
        FormsModule,
        ReactiveFormsModule,
        NgbAccordionModule,
-        HttpClientTestingModule,
        NgSelectModule,
      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()

    fixture = TestBed.createComponent(PermissionsFormComponent)
--- a/src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.spec.ts
+++ b/src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.spec.ts
@@ -5,10 +5,11 @@ import {
  ReactiveFormsModule,
 } from '@angular/forms'
 import { PermissionsGroupComponent } from './permissions-group.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { of } from 'rxjs'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('PermissionsGroupComponent', () => {
  let component: PermissionsGroupComponent
@@ -19,12 +20,11 @@ describe('PermissionsGroupComponent', () => {
  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [PermissionsGroupComponent],
-      providers: [GroupService],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        HttpClientTestingModule,
-        NgSelectModule,
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule],
+      providers: [
+        GroupService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.spec.ts
+++ b/src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.spec.ts
@@ -5,11 +5,12 @@ import {
  ReactiveFormsModule,
 } from '@angular/forms'
 import { PermissionsUserComponent } from './permissions-user.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { of } from 'rxjs'
 import { UserService } from 'src/app/services/rest/user.service'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('PermissionsUserComponent', () => {
  let component: PermissionsUserComponent
@@ -20,12 +21,11 @@ describe('PermissionsUserComponent', () => {
  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [PermissionsUserComponent],
-      providers: [UserService],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        HttpClientTestingModule,
-        NgSelectModule,
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule],
+      providers: [
+        UserService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -49,7 +49,7 @@
      @if (getSuggestions().length > 0) {
        <small class="position-absolute top-100">
          <span i18n>Suggestions:</span>&nbsp;
-          @for (tag of getSuggestions(); track tag) {
+          @for (tag of getSuggestions(); track tag.id) {
            <a (click)="addTag(tag.id)" [routerLink]="[]">{{tag?.name}}</a>&nbsp;
          }
        </small>
--- a/src-ui/src/app/components/common/input/tags/tags.component.spec.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.spec.ts
@@ -12,7 +12,7 @@ import {
 } from 'src/app/data/matching-model'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { RouterTestingModule } from '@angular/router/testing'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { of } from 'rxjs'
 import { TagService } from 'src/app/services/rest/tag.service'
 import {
@@ -31,6 +31,7 @@ import { PermissionsFormComponent } from '../permissions/permissions-form/permis
 import { SelectComponent } from '../select/select.component'
 import { SettingsService } from 'src/app/services/settings.service'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 const tags: Tag[] = [
  {
@@ -74,6 +75,16 @@ describe('TagsComponent', () => {
        ColorComponent,
        CheckComponent,
      ],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        RouterTestingModule,
+        NgbModalModule,
+        NgbAccordionModule,
+        NgbPopoverModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
      providers: [
        {
          provide: TagService,
@@ -90,17 +101,8 @@ describe('TagsComponent', () => {
              }),
          },
        },
-      ],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        RouterTestingModule,
-        HttpClientTestingModule,
-        NgbModalModule,
-        NgbAccordionModule,
-        NgbPopoverModule,
-        NgxBootstrapIconsModule.pick(allIcons),
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()