Update to Angular 19, ngx-translate 16 & ng-select 14 #725

package.json

@@ -32,19 +32,19 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "18.2.8",
-    "@angular/common": "18.2.8",
-    "@angular/compiler": "18.2.8",
-    "@angular/core": "18.2.8",
-    "@angular/forms": "18.2.8",
-    "@angular/localize": "18.2.8",
-    "@angular/platform-browser": "18.2.8",
-    "@angular/platform-browser-dynamic": "18.2.8",
-    "@angular/router": "18.2.8",
+    "@angular/animations": "19.0.0",
+    "@angular/common": "19.0.0",
+    "@angular/compiler": "19.0.0",
+    "@angular/core": "19.0.0",
+    "@angular/forms": "19.0.0",
+    "@angular/localize": "19.0.0",
+    "@angular/platform-browser": "19.0.0",
+    "@angular/platform-browser-dynamic": "19.0.0",
+    "@angular/router": "19.0.0",
     "@ng-bootstrap/ng-bootstrap": "17.0.1",
-    "@ng-select/ng-select": "13.9.1",
-    "@ngx-translate/core": "15.0.0",
-    "@ngx-translate/http-loader": "8.0.0",
+    "@ng-select/ng-select": "14.0.2",
+    "@ngx-translate/core": "16.0.3",
+    "@ngx-translate/http-loader": "16.0.0",
     "@popperjs/core": "2.11.8",
     "bootstrap": "5.3.3",
     "date-fns": "4.1.0",
@@ -57,18 +57,18 @@
     "ngx-infinite-scroll": "18.0.0",
     "rxjs": "7.8.1",
     "tslib": "2.8.1",
-    "zone.js": "0.14.10"
+    "zone.js": "0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "18.2.8",
+    "@angular-devkit/build-angular": "19.0.1",
     "@angular-eslint/builder": "18.4.2",
     "@angular-eslint/eslint-plugin": "18.4.2",
     "@angular-eslint/eslint-plugin-template": "18.4.2",
     "@angular-eslint/schematics": "18.4.2",
     "@angular-eslint/template-parser": "18.4.2",
-    "@angular/cli": "18.2.8",
-    "@angular/compiler-cli": "18.2.8",
-    "@angular/language-service": "18.2.8",
+    "@angular/cli": "19.0.1",
+    "@angular/compiler-cli": "19.0.0",
+    "@angular/language-service": "19.0.0",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.15.0",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
@@ -91,7 +91,7 @@
     "karma-spec-reporter": "0.0.36",
     "lint-staged": "15.2.10",
     "prettier": "3.3.3",
-    "typescript": "5.4.5",
+    "typescript": "5.6.3",
     "typescript-eslint": "^8.15.0"
   },
   "lint-staged": {

src/app/app.component.ts

@@ -15,7 +15,6 @@ import { decode } from "./shared/utils/decode";
     '<bkd-toast aria-live="polite" aria-atomic="true"></bkd-toast><router-outlet></router-outlet>',
   styleUrls: ["./app.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [ToastComponent, RouterOutlet],
 })
 export class AppComponent {

src/app/app.config.ts

@@ -3,10 +3,10 @@ import {
   provideHttpClient,
   withInterceptors,
 } from "@angular/common/http";
-import { ApplicationConfig, importProvidersFrom } from "@angular/core";
+import { ApplicationConfig } from "@angular/core";
 import { provideAnimations } from "@angular/platform-browser/animations";
 import { provideRouter, withHashLocation } from "@angular/router";
-import { TranslateLoader, TranslateModule } from "@ngx-translate/core";
+import { TranslateLoader, provideTranslateService } from "@ngx-translate/core";
 import { TranslateHttpLoader } from "@ngx-translate/http-loader";
 import { routes } from "./app.routes";
 import { SETTINGS, Settings } from "./settings";
@@ -40,15 +40,14 @@ export const appConfig: ApplicationConfig = {
     ),
     provideAnimations(),
     provideGlobalErrorHandler(),
-    importProvidersFrom(
-      TranslateModule.forRoot({
-        loader: {
-          provide: TranslateLoader,
-          useFactory: HttpLoaderFactory,
-          deps: [HttpClient, SETTINGS],
-        },
-      }),
-    ),
+    provideTranslateService({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient, SETTINGS],
+      },
+    }),
+
     provideDetectedLocale(),
   ],
 };

src/app/dashboard/components/dashboard-action/dashboard-action.component.ts

@@ -1,14 +1,13 @@
 import { NgTemplateOutlet } from "@angular/common";
 import { Component, Input } from "@angular/core";
 import { Params, RouterLink } from "@angular/router";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslatePipe } from "@ngx-translate/core";
 
 @Component({
   selector: "bkd-dashboard-action",
   templateUrl: "./dashboard-action.component.html",
   styleUrls: ["./dashboard-action.component.scss"],
-  standalone: true,
-  imports: [RouterLink, NgTemplateOutlet, TranslateModule],
+  imports: [RouterLink, NgTemplateOutlet, TranslatePipe],
 })
 export class DashboardActionComponent {
   @Input() label: string;

src/app/dashboard/components/dashboard-actions/dashboard-actions.component.ts

@@ -9,7 +9,6 @@ import { DashboardDeadlineComponent } from "../dashboard-deadline/dashboard-dead
   selector: "bkd-dashboard-actions",
   templateUrl: "./dashboard-actions.component.html",
   styleUrls: ["./dashboard-actions.component.scss"],
-  standalone: true,
   imports: [DashboardActionComponent, DashboardDeadlineComponent, AsyncPipe],
 })
 export class DashboardActionsComponent {

src/app/dashboard/components/dashboard-deadline/dashboard-deadline.component.ts

@@ -1,13 +1,12 @@
 import { Component, Input } from "@angular/core";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslatePipe } from "@ngx-translate/core";
 import { AddSpacePipe } from "../../../shared/pipes/add-space.pipe";
 
 @Component({
   selector: "bkd-dashboard-deadline",
   templateUrl: "./dashboard-deadline.component.html",
   styleUrls: ["./dashboard-deadline.component.scss"],
-  standalone: true,
-  imports: [TranslateModule, AddSpacePipe],
+  imports: [TranslatePipe, AddSpacePipe],
 })
 export class DashboardDeadlineComponent {
   @Input() count: number;

src/app/dashboard/components/dashboard-layout/dashboard-layout.component.ts

@@ -1,6 +1,6 @@
 import { AsyncPipe } from "@angular/common";
 import { ChangeDetectionStrategy, Component } from "@angular/core";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslatePipe } from "@ngx-translate/core";
 import { SpinnerComponent } from "../../../shared/components/spinner/spinner.component";
 import { DashboardService } from "../../services/dashboard.service";
 import { DashboardActionsComponent } from "../dashboard-actions/dashboard-actions.component";
@@ -12,14 +12,13 @@ import { DashboardTimetableComponent } from "../dashboard-timetable/dashboard-ti
   templateUrl: "./dashboard-layout.component.html",
   styleUrls: ["./dashboard-layout.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     SpinnerComponent,
     DashboardSearchComponent,
     DashboardActionsComponent,
     DashboardTimetableComponent,
     AsyncPipe,
-    TranslateModule,
+    TranslatePipe,
   ],
 })
 export class DashboardLayoutComponent {

src/app/dashboard/components/dashboard-search/dashboard-search.component.ts

@@ -8,7 +8,6 @@ import { StudentsRestService } from "../../../shared/services/students-rest.serv
   selector: "bkd-dashboard-search",
   templateUrl: "./dashboard-search.component.html",
   styleUrls: ["./dashboard-search.component.scss"],
-  standalone: true,
   imports: [TypeaheadComponent],
 })
 export class DashboardSearchComponent {

src/app/dashboard/components/dashboard-timetable-table/dashboard-timetable-table.component.ts

@@ -1,6 +1,6 @@
 import { AsyncPipe, DatePipe } from "@angular/common";
 import { Component, Inject, Input } from "@angular/core";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslatePipe } from "@ngx-translate/core";
 import { SETTINGS, Settings } from "src/app/settings";
 import { DashboardService } from "../../services/dashboard.service";
 import { DashboardTimetableEntry } from "../dashboard-timetable/dashboard-timetable.component";
@@ -9,8 +9,7 @@ import { DashboardTimetableEntry } from "../dashboard-timetable/dashboard-timeta
   selector: "bkd-dashboard-timetable-table",
   templateUrl: "./dashboard-timetable-table.component.html",
   styleUrls: ["./dashboard-timetable-table.component.scss"],
-  standalone: true,
-  imports: [AsyncPipe, DatePipe, TranslateModule],
+  imports: [AsyncPipe, DatePipe, TranslatePipe],
 })
 export class DashboardTimetableTableComponent {
   @Input()

src/app/dashboard/components/dashboard-timetable/dashboard-timetable.component.ts

@@ -1,6 +1,6 @@
 import { AsyncPipe, DatePipe } from "@angular/common";
 import { Component } from "@angular/core";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslatePipe } from "@ngx-translate/core";
 import { addDays, format, startOfDay, subDays } from "date-fns";
 import {
   BehaviorSubject,
@@ -39,13 +39,12 @@ const CALENDAR_SUBSCRIBE_KEY = "cal";
   selector: "bkd-dashboard-timetable",
   templateUrl: "./dashboard-timetable.component.html",
   styleUrls: ["./dashboard-timetable.component.scss"],
-  standalone: true,
   imports: [
     DashboardTimetableTableComponent,
     SpinnerComponent,
     AsyncPipe,
     DatePipe,
-    TranslateModule,
+    TranslatePipe,
     SafePipe,
   ],
 })

src/app/dashboard/components/dashboard/dashboard.component.ts

@@ -8,7 +8,6 @@ import { DashboardService } from "../../services/dashboard.service";
   templateUrl: "./dashboard.component.html",
   styleUrls: ["./dashboard.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [RouterOutlet],
   providers: [DashboardService, ConfirmAbsencesSelectionService],
 })

src/app/edit-absences/components/edit-absences-edit/edit-absences-edit.component.ts

@@ -14,7 +14,7 @@ import {
   Validators,
 } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
-import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { TranslatePipe, TranslateService } from "@ngx-translate/core";
 import { uniq } from "lodash-es";
 import { BehaviorSubject, Observable, Subject } from "rxjs";
 import {
@@ -46,8 +46,7 @@ import {
   templateUrl: "./edit-absences-edit.component.html",
   styleUrls: ["./edit-absences-edit.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, AsyncPipe, TranslateModule],
+  imports: [FormsModule, ReactiveFormsModule, AsyncPipe, TranslatePipe],
 })
 export class EditAbsencesEditComponent implements OnInit, OnDestroy {
   absenceTypes$ = this.presenceTypesService.confirmationTypes$;

src/app/edit-absences/components/edit-absences-header/edit-absences-header.component.ts

@@ -11,7 +11,7 @@ import {
   NgbDateNativeAdapter,
   NgbDateParserFormatter,
 } from "@ng-bootstrap/ng-bootstrap";
-import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { TranslatePipe, TranslateService } from "@ngx-translate/core";
 import { startOfDay } from "date-fns";
 import { map } from "rxjs/operators";
 import {
@@ -42,13 +42,12 @@ import {
   templateUrl: "./edit-absences-header.component.html",
   styleUrls: ["./edit-absences-header.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     TypeaheadComponent,
     DateSelectComponent,
     MultiselectComponent,
     AsyncPipe,
-    TranslateModule,
+    TranslatePipe,
   ],
   providers: [
     { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter },

src/app/edit-absences/components/edit-absences-list/edit-absences-list.component.ts

@@ -7,7 +7,7 @@ import {
   OnInit,
 } from "@angular/core";
 import { ActivatedRoute, Params, RouterLink } from "@angular/router";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslatePipe } from "@ngx-translate/core";
 import { InfiniteScrollDirective } from "ngx-infinite-scroll";
 import { Subject } from "rxjs";
 import { filter, map, take, takeUntil } from "rxjs/operators";
@@ -28,15 +28,14 @@ import { EditAbsencesHeaderComponent } from "../edit-absences-header/edit-absenc
   styleUrls: ["./edit-absences-list.component.scss"],
   providers: [EditAbsencesSelectionService],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     EditAbsencesHeaderComponent,
     InfiniteScrollDirective,
     RouterLink,
     SpinnerComponent,
     AsyncPipe,
     DatePipe,
-    TranslateModule,
+    TranslatePipe,
   ],
 })
 export class EditAbsencesListComponent

src/app/edit-absences/components/edit-absences/edit-absences.component.ts

@@ -9,7 +9,6 @@ import { EditAbsencesStateService } from "../../services/edit-absences-state.ser
   templateUrl: "./edit-absences.component.html",
   styleUrls: ["./edit-absences.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [RouterOutlet],
   providers: [
     EditAbsencesStateService,

src/app/evaluate-absences/components/evaluate-absences-header/evaluate-absences-header.component.ts

@@ -5,7 +5,7 @@ import {
   Input,
   Output,
 } from "@angular/core";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslatePipe } from "@ngx-translate/core";
 import { StudentsRestService } from "src/app/shared/services/students-rest.service";
 import { StudyClassesRestService } from "src/app/shared/services/study-classes-rest.service";
 import { TypeaheadComponent } from "../../../shared/components/typeahead/typeahead.component";
@@ -17,8 +17,7 @@ import { EvaluateAbsencesFilter } from "../../services/evaluate-absences-state.s
   templateUrl: "./evaluate-absences-header.component.html",
   styleUrls: ["./evaluate-absences-header.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [TypeaheadComponent, TranslateModule],
+  imports: [TypeaheadComponent, TranslatePipe],
 })
 export class EvaluateAbsencesHeaderComponent {
   @Input()

src/app/evaluate-absences/components/evaluate-absences-list/evaluate-absences-list.component.ts

@@ -7,7 +7,7 @@ import {
 } from "@angular/core";
 import { ActivatedRoute, Params, RouterLink } from "@angular/router";
 import { NgbTooltip } from "@ng-bootstrap/ng-bootstrap";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslatePipe } from "@ngx-translate/core";
 import { InfiniteScrollDirective } from "ngx-infinite-scroll";
 import { Observable } from "rxjs";
 import { map, shareReplay, switchMap, take } from "rxjs/operators";
@@ -38,7 +38,6 @@ interface Column {
   templateUrl: "./evaluate-absences-list.component.html",
   styleUrls: ["./evaluate-absences-list.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     EvaluateAbsencesHeaderComponent,
     ReportsLinkComponent,
@@ -48,7 +47,7 @@ interface Column {
     RouterLink,
     SpinnerComponent,
     AsyncPipe,
-    TranslateModule,
+    TranslatePipe,
   ],
 })
 export class EvaluateAbsencesListComponent implements OnInit, AfterViewInit {

src/app/evaluate-absences/components/evaluate-absences/evaluate-absences.component.ts

@@ -9,7 +9,6 @@ import { EvaluateAbsencesStateService } from "../../services/evaluate-absences-s
   templateUrl: "./evaluate-absences.component.html",
   styleUrls: ["./evaluate-absences.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [RouterOutlet],
   providers: [
     EvaluateAbsencesStateService,

src/app/events/components/events-current/events-current.component.ts

@@ -1,13 +1,12 @@
 import { Component } from "@angular/core";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslatePipe } from "@ngx-translate/core";
 import { EventsListComponent } from "../events-list/events-list.component";
 
 @Component({
   selector: "bkd-events-current",
   templateUrl: "./events-current.component.html",
   styleUrls: ["./events-current.component.scss"],
-  standalone: true,
-  imports: [EventsListComponent, TranslateModule],
+  imports: [EventsListComponent, TranslatePipe],
 })
 export class EventsCurrentComponent {
   constructor() {}

src/app/events/components/events-list-entry/events-list-entry.component.ts

@@ -1,13 +1,12 @@
 import { DatePipe } from "@angular/common";
 import { Component, Input } from "@angular/core";
 import { RouterLink } from "@angular/router";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslatePipe } from "@ngx-translate/core";
 import { EventEntry } from "../../services/events-state.service";
 
 @Component({
   selector: "bkd-events-list-entry",
-  standalone: true,
-  imports: [RouterLink, DatePipe, TranslateModule],
+  imports: [RouterLink, DatePipe, TranslatePipe],
   templateUrl: "./events-list-entry.component.html",
   styleUrl: "./events-list-entry.component.scss",
 })