refactor: apply Angular 20 inject rules

backend/backend/package.json

@@ -100,7 +100,7 @@
     "supertest": "6.3.3",
     "ts-node": "10.9.2",
     "tsup": "8.5.0",
-    "typescript": "5.4.2"
+    "typescript": "5.5.4"
   },
   "tsup": {
     "entry": [

backend/proxy/package.json

@@ -51,7 +51,7 @@
     "is-cidr": "4.0.2",
     "mustache": "4.2.0",
     "semver": "7.6.0",
-    "typescript": "5.4.2"
+    "typescript": "5.5.4"
   },
   "devDependencies": {
     "@openstapps/api-cli": "workspace:*",

configuration/eslint-config/package.json

@@ -19,11 +19,11 @@
     "@openstapps/tsconfig": "workspace:*",
     "@types/node": "22.15.31",
     "eslint": "8.57.0",
-    "typescript": "5.4.2"
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
-    "@typescript-eslint/eslint-plugin": "7.11.0",
-    "@typescript-eslint/parser": "7.11.0",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jsdoc": "48.2.1",

configuration/prettier-config/index.js

@@ -9,7 +9,8 @@ const config = {
   trailingComma: 'all',
   bracketSpacing: false,
   arrowParens: 'avoid',
-  endOfLine: 'lf'
+  endOfLine: 'lf',
+  htmlWhitespaceSensitivity: 'strict'
 }
 
 module.exports = config;

configuration/projectmanagement/package.json

@@ -64,7 +64,7 @@
     "mocha-junit-reporter": "2.2.0",
     "ts-node": "10.9.2",
     "tsup": "8.5.0",
-    "typescript": "5.4.2"
+    "typescript": "5.5.4"
   },
   "tsup": {
     "entry": [

examples/minimal-connector/package.json

@@ -55,7 +55,7 @@
     "nock": "13.3.1",
     "ts-node": "10.9.2",
     "tsup": "8.5.0",
-    "typescript": "5.4.2"
+    "typescript": "5.5.4"
   },
   "tsup": {
     "entry": [

examples/minimal-plugin/package.json

@@ -44,7 +44,7 @@
     "@types/express": "4.17.17",
     "@types/node": "22.15.31",
     "tsup": "8.5.0",
-    "typescript": "5.4.2"
+    "typescript": "5.5.4"
   },
   "tsup": {
     "entry": [

frontend/app/.eslintrc.json

@@ -65,7 +65,8 @@
         ],
         "@typescript-eslint/lines-between-class-members": ["error", "always"],
         "@typescript-eslint/no-explicit-any": "error",
-        "@angular-eslint/use-lifecycle-interface": "error"
+        "@angular-eslint/use-lifecycle-interface": "error",
+        "@angular-eslint/prefer-standalone": "off"
       }
     },
     {

frontend/app/angular.json

@@ -40,6 +40,16 @@
                 "glob": "CHANGELOG.md",
                 "input": ".",
                 "output": "assets"
+              },
+              {
+                "glob": "maplibre-gl-worker.mjs",
+                "input": "node_modules/maplibre-gl/dist",
+                "output": "/"
+              },
+              {
+                "glob": "maplibre-gl-shared.mjs",
+                "input": "node_modules/maplibre-gl/dist",
+                "output": "/"
               }
             ],
             "styles": [
@@ -195,6 +205,30 @@
     },
     "@ionic/angular-toolkit:page": {
       "styleext": "scss"
+    },
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   }
 }

frontend/app/package.json

@@ -48,37 +48,37 @@
     "test:integration": "sh integration-test.sh"
   },
   "dependencies": {
-    "@angular/animations": "18.2.13",
-    "@angular/cdk": "18.2.13",
-    "@angular/common": "18.2.13",
-    "@angular/core": "18.2.13",
-    "@angular/forms": "18.2.13",
-    "@angular/platform-browser": "18.2.13",
-    "@angular/router": "18.2.13",
+    "@angular/animations": "20.3.31",
+    "@angular/cdk": "20.2.14",
+    "@angular/common": "20.3.31",
+    "@angular/core": "20.3.31",
+    "@angular/forms": "20.3.31",
+    "@angular/platform-browser": "20.3.31",
+    "@angular/router": "20.3.31",
     "@awesome-cordova-plugins/calendar": "8.1.0",
     "@awesome-cordova-plugins/core": "8.1.0",
     "@capacitor-community/in-app-review": "8.0.0",
     "@capacitor-community/screen-brightness": "8.0.0",
     "@capacitor/app": "8.0.1",
-    "@capacitor/browser": "8.0.2",
+    "@capacitor/browser": "8.0.4",
     "@capacitor/clipboard": "8.0.1",
     "@capacitor/core": "8.2.0",
-    "@capacitor/device": "8.0.1",
+    "@capacitor/device": "8.0.3",
     "@capacitor/dialog": "8.0.1",
-    "@capacitor/filesystem": "8.1.2",
+    "@capacitor/filesystem": "8.1.3",
     "@capacitor/geolocation": "8.1.0",
-    "@capacitor/haptics": "8.0.1",
-    "@capacitor/keyboard": "8.0.1",
+    "@capacitor/haptics": "8.0.2",
+    "@capacitor/keyboard": "8.0.5",
     "@capacitor/local-notifications": "8.0.2",
     "@capacitor/network": "8.0.1",
     "@capacitor/preferences": "8.0.1",
     "@capacitor/screen-orientation": "8.0.1",
     "@capacitor/share": "8.0.1",
-    "@capacitor/splash-screen": "8.0.1",
-    "@ionic/angular": "8.7.16",
-    "@ionic/angular-server": "8.7.16",
+    "@capacitor/splash-screen": "8.0.2",
+    "@ionic/angular": "8.8.19",
+    "@ionic/angular-server": "8.8.19",
     "@ionic/storage-angular": "4.0.0",
-    "@maplibre/ngx-maplibre-gl": "17.4.1",
+    "@maplibre/ngx-maplibre-gl": "22.1.0",
     "@ngx-translate/core": "15.0.0",
     "@ngx-translate/http-loader": "8.0.0",
     "@openid/appauth": "1.3.2",
@@ -86,71 +86,71 @@
     "@openstapps/collection-utils": "workspace:*",
     "@openstapps/core": "workspace:*",
     "@transistorsoft/capacitor-background-fetch": "8.0.0",
-    "@types/dom-view-transitions": "1.0.4",
-    "capacitor-secure-storage-plugin": "0.12.0",
+    "@types/dom-view-transitions": "1.0.6",
+    "capacitor-secure-storage-plugin": "0.13.0",
     "cordova-plugin-calendar": "5.1.6",
     "date-fns": "3.6.0",
     "deepmerge": "4.3.1",
-    "form-data": "4.0.4",
+    "form-data": "4.0.6",
     "geojson": "0.5.0",
     "ionic-appauth": "2.1.0",
-    "ionicons": "8.0.13",
+    "ionicons": "8.1.0",
     "jsonpath-plus": "10.3.0",
-    "maplibre-gl": "4.0.2",
+    "maplibre-gl": "6.4.1",
     "material-symbols": "0.17.1",
     "moment": "2.30.1",
     "ngx-date-fns": "11.0.0",
     "ngx-logger": "5.0.12",
-    "ngx-markdown": "17.2.1",
+    "ngx-markdown": "18.1.0",
     "ngx-moment": "6.0.2",
     "opening_hours": "3.8.0",
     "pmtiles": "3.0.3",
     "prettier": "3.1.1",
-    "rxjs": "7.8.1",
+    "rxjs": "7.8.2",
     "semver": "7.6.0",
     "swiper": "8.4.5",
     "tslib": "2.6.2",
-    "zone.js": "0.14.10"
+    "zone.js": "0.16.2"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1802.20",
-    "@angular-devkit/build-angular": "18.2.20",
-    "@angular-devkit/core": "18.2.20",
-    "@angular-devkit/schematics": "18.2.20",
-    "@angular-eslint/builder": "18.4.3",
-    "@angular-eslint/eslint-plugin": "18.4.3",
-    "@angular-eslint/eslint-plugin-template": "18.4.3",
-    "@angular-eslint/schematics": "18.4.1",
-    "@angular-eslint/template-parser": "18.4.3",
-    "@angular/cli": "18.2.20",
-    "@angular/compiler": "18.2.13",
-    "@angular/compiler-cli": "18.2.13",
-    "@angular/language-server": "18.2.0",
-    "@angular/language-service": "18.2.13",
-    "@angular/platform-browser-dynamic": "18.2.13",
+    "@angular-devkit/architect": "0.2003.37",
+    "@angular-devkit/build-angular": "20.3.37",
+    "@angular-devkit/core": "20.3.37",
+    "@angular-devkit/schematics": "20.3.37",
+    "@angular-eslint/builder": "20.7.0",
+    "@angular-eslint/eslint-plugin": "20.7.0",
+    "@angular-eslint/eslint-plugin-template": "20.7.0",
+    "@angular-eslint/schematics": "20.7.0",
+    "@angular-eslint/template-parser": "20.7.0",
+    "@angular/cli": "20.3.37",
+    "@angular/compiler": "20.3.31",
+    "@angular/compiler-cli": "20.3.31",
+    "@angular/language-server": "20.3.0",
+    "@angular/language-service": "20.3.31",
+    "@angular/platform-browser-dynamic": "20.3.31",
     "@capacitor/android": "8.2.0",
     "@capacitor/assets": "3.0.5",
     "@capacitor/cli": "8.2.0",
     "@capacitor/ios": "8.2.0",
-    "@compodoc/compodoc": "1.1.23",
+    "@compodoc/compodoc": "1.2.1",
     "@cypress/schematic": "4.1.1",
     "@ionic/angular-toolkit": "12.3.0",
     "@ionic/cli": "7.2.1",
     "@openstapps/prettier-config": "workspace:*",
     "@openstapps/tsconfig": "workspace:*",
-    "@types/fontkit": "2.0.7",
+    "@types/fontkit": "2.0.9",
     "@types/geojson": "1.0.6",
     "@types/glob": "8.1.0",
     "@types/jasmine": "5.1.4",
     "@types/jasminewd2": "2.0.13",
     "@types/jsonpath": "0.2.0",
-    "@types/karma": "6.3.8",
+    "@types/karma": "6.3.9",
     "@types/karma-coverage": "2.0.3",
     "@types/karma-jasmine": "4.0.5",
     "@types/node": "22.15.31",
     "@types/semver": "7.5.8",
-    "@typescript-eslint/eslint-plugin": "7.11.0",
-    "@typescript-eslint/parser": "7.11.0",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
     "cordova-res": "0.15.4",
     "cypress": "15.0.0",
     "eslint": "8.57.0",
@@ -158,28 +158,28 @@
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-unicorn": "51.0.1",
     "fast-deep-equal": "3.1.3",
-    "fontkit": "2.0.2",
+    "fontkit": "2.0.4",
     "glob": "10.5.0",
     "http-server": "14.1.1",
     "is-docker": "2.2.1",
     "jasmine-core": "5.1.2",
     "jasmine-spec-reporter": "7.0.0",
     "junit-report-merger": "6.0.3",
-    "karma": "6.4.3",
+    "karma": "6.4.4",
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
     "karma-jasmine": "5.1.0",
     "karma-junit-reporter": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "license-checker": "25.0.1",
-    "stylelint": "16.3.1",
-    "stylelint-config-clean-order": "5.4.1",
+    "stylelint": "17.14.1",
+    "stylelint-config-clean-order": "10.0.0",
     "stylelint-config-prettier-scss": "1.0.0",
-    "stylelint-config-recommended-scss": "14.0.0",
-    "stylelint-config-standard-scss": "13.0.0",
+    "stylelint-config-recommended-scss": "17.0.1",
+    "stylelint-config-standard-scss": "17.0.0",
     "surge": "0.23.1",
     "ts-node": "10.9.2",
-    "typescript": "5.4.2"
+    "typescript": "5.9.3"
   },
   "cordova": {
     "plugins": {},

frontend/app/src/app/_helpers/data/sample-things.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {HttpClient} from '@angular/common/http';
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {
   SCAcademicEvent,
   SCArticle,
@@ -395,7 +395,9 @@ export class SampleThings {
    */
   http: HttpClient;
 
-  constructor(http: HttpClient) {
+  constructor() {
+    const http = inject(HttpClient);
+
     this.http = http;
   }
 

frontend/app/src/app/_helpers/service-handler.interceptor.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse} from '@angular/common/http';
 import {Observable, throwError} from 'rxjs';
 import {NGXLogger} from 'ngx-logger';
@@ -21,7 +21,7 @@ import {catchError} from 'rxjs/operators';
 
 @Injectable()
 export class ServiceHandlerInterceptor implements HttpInterceptor {
-  constructor(private readonly logger: NGXLogger) {}
+  private readonly logger = inject(NGXLogger);
 
   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
     return next.handle(request).pipe(

frontend/app/src/app/app-routing.module.ts

@@ -26,6 +26,7 @@ const routes: Routes = [{path: '', redirectTo: '/overview', pathMatch: 'full'}];
     RouterModule.forRoot(routes, {
       preloadingStrategy: PreloadAllModules,
       errorHandler: error => {
+        console.error(error);
         // Handle unknown routes, at the moment this can only be done via window.location
         if (error.message.includes('Cannot match any routes')) {
           window.location.href = '/overview';

frontend/app/src/app/app.component.spec.ts

@@ -72,6 +72,7 @@ describe('AppComponent', () => {
     configProvider.getAnyValue = jasmine.createSpy().and.callFake(function () {
       return sampleAuthConfiguration;
     });
+    inAppReviewProvider = jasmine.createSpyObj('InAppReviewProvider', ['init']);
     ngxLogger = jasmine.createSpyObj('NGXLogger', ['log', 'error', 'warn']);
     storageProvider = jasmine.createSpyObj('StorageProvider', ['init', 'get', 'has', 'put']);
     simpleBrowser = jasmine.createSpyObj('SimpleBrowser', ['open']);
@@ -108,11 +109,5 @@ describe('AppComponent', () => {
   it('should initialize the app', async () => {
     TestBed.createComponent(AppComponent);
     expect(platformSpy.ready).toHaveBeenCalled();
-    // await platformReadySpy;
-
-    // TODO: https://capacitorjs.com/docs/guides/mocking-plugins
-    // expect(splashScreenSpy.hide).toHaveBeenCalled();
   });
-
-  // TODO: add more tests!
 });

frontend/app/src/app/app.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {AfterContentInit, Component, NgZone} from '@angular/core';
+import {AfterContentInit, Component, NgZone, inject} from '@angular/core';
 import {Router} from '@angular/router';
 import {App, URLOpenListenerEvent} from '@capacitor/app';
 import {Platform, ToastController} from '@ionic/angular/standalone';
@@ -32,8 +32,27 @@ import {SplashScreen} from '@capacitor/splash-screen';
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
+  standalone: false,
 })
 export class AppComponent implements AfterContentInit {
+  private readonly platform = inject(Platform);
+
+  private readonly settingsProvider = inject(SettingsProvider);
+
+  private readonly inAppReviewProvider = inject(InAppReviewProvider);
+
+  private readonly router = inject(Router);
+
+  private readonly zone = inject(NgZone);
+
+  private readonly authHelper = inject(AuthHelperService);
+
+  private readonly toastController = inject(ToastController);
+
+  private readonly scheduleSyncService = inject(ScheduleSyncService);
+
+  private readonly versionService = inject(AppVersionService);
+
   /**
    * TODO
    */
@@ -53,17 +72,7 @@ export class AppComponent implements AfterContentInit {
    */
   ommitedEventSources = ['ion-input', 'ion-searchbar'];
 
-  constructor(
-    private readonly platform: Platform,
-    private readonly settingsProvider: SettingsProvider,
-    private readonly inAppReviewProvider: InAppReviewProvider,
-    private readonly router: Router,
-    private readonly zone: NgZone,
-    private readonly authHelper: AuthHelperService,
-    private readonly toastController: ToastController,
-    private readonly scheduleSyncService: ScheduleSyncService,
-    private readonly versionService: AppVersionService,
-  ) {
+  constructor() {
     void this.initializeApp();
   }
 

frontend/app/src/app/app.module.ts

@@ -15,7 +15,7 @@
 import {CommonModule, LocationStrategy, PathLocationStrategy, registerLocaleData} from '@angular/common';
 import {HTTP_INTERCEPTORS, HttpClient, provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
 import localeDe from '@angular/common/locales/de';
-import {APP_INITIALIZER, NgModule} from '@angular/core';
+import {APP_INITIALIZER, NgModule, inject} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {RouteReuseStrategy} from '@angular/router';
 import {IonicRouteStrategy, Platform, provideIonicAngular, IonApp} from '@ionic/angular/standalone';
@@ -65,7 +65,7 @@ import {setDefaultOptions} from 'date-fns';
 import {DateFnsConfigurationService} from 'ngx-date-fns';
 import {Capacitor} from '@capacitor/core';
 import {SplashScreen} from '@capacitor/splash-screen';
-import maplibregl from 'maplibre-gl';
+import * as maplibregl from 'maplibre-gl';
 import {Protocol} from 'pmtiles';
 
 registerLocaleData(localeDe);
@@ -87,6 +87,7 @@ export function initializerFactory(
 ) {
   return async () => {
     try {
+      maplibregl.setWorkerUrl(new URL('maplibre-gl-worker.mjs', document.baseURI).href);
       maplibregl.addProtocol('pmtiles', new Protocol().tile);
       initLogger(logger);
       await storageProvider.init();
@@ -215,5 +216,5 @@ export function createTranslateLoader(http: HttpClient) {
   ],
 })
 export class AppModule {
-  constructor(public debugDataCollectorService: DebugDataCollectorService) {}
+  debugDataCollectorService = inject(DebugDataCollectorService);
 }

frontend/app/src/app/modules/about/about-changelog.component.ts

@@ -21,6 +21,7 @@ import {ConfigProvider} from '../config/config.provider';
   templateUrl: 'about-changelog.html',
   styleUrls: ['about-changelog.scss', './about-page/about-page.scss', 'release-notes-markdown.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AboutChangelogComponent {
   config = inject(ConfigProvider);

frontend/app/src/app/modules/about/about-license-modal.component.ts

@@ -20,6 +20,7 @@ import {License} from './about-licenses.component';
   selector: 'about-license-modal',
   templateUrl: 'about-license-modal.html',
   styleUrls: ['about-license-modal.scss'],
+  standalone: false,
 })
 export class AboutLicenseModalComponent {
   @Input() license: License;

frontend/app/src/app/modules/about/about-licenses.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, inject} from '@angular/core';
 import {ModalController} from '@ionic/angular/standalone';
 import {AboutLicenseModalComponent} from './about-license-modal.component';
 import licensesFile from 'src/assets/about/licenses.json';
@@ -32,11 +32,12 @@ export interface License {
   selector: 'about-changelog',
   templateUrl: 'about-licenses.html',
   styleUrls: ['about-licenses.scss', './about-page/about-page.scss'],
+  standalone: false,
 })
 export class AboutLicensesComponent implements OnInit {
-  licenses: License[];
+  private modalController = inject(ModalController);
 
-  constructor(private modalController: ModalController) {}
+  licenses: License[];
 
   ngOnInit() {
     this.licenses = this.loadLicenses();

frontend/app/src/app/modules/about/about-page/about-page-content.component.ts

@@ -19,6 +19,7 @@ import {SCAboutPageContent} from '@openstapps/core';
   selector: 'about-page-content',
   templateUrl: 'about-page-content.html',
   styleUrls: ['about-page-content.scss'],
+  standalone: false,
 })
 export class AboutPageContentComponent {
   @Input() content: SCAboutPageContent;

frontend/app/src/app/modules/about/about-page/about-page.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, inject} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {SCAboutPage, SCAppConfiguration} from '@openstapps/core';
 import {ConfigProvider} from '../../config/config.provider';
@@ -25,8 +25,13 @@ import {Capacitor} from '@capacitor/core';
   selector: 'about-page',
   templateUrl: 'about-page.html',
   styleUrls: ['about-page.scss'],
+  standalone: false,
 })
 export class AboutPageComponent implements OnInit {
+  private readonly route = inject(ActivatedRoute);
+
+  private readonly configProvider = inject(ConfigProvider);
+
   content: SCAboutPage;
 
   name = config.appName;
@@ -35,11 +40,6 @@ export class AboutPageComponent implements OnInit {
 
   version: string;
 
-  constructor(
-    private readonly route: ActivatedRoute,
-    private readonly configProvider: ConfigProvider,
-  ) {}
-
   async ngOnInit() {
     const route = this.route.snapshot.url.map(it => it.path).join('/');
     this.content =

frontend/app/src/app/modules/about/about-page/about-page.scss

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../../../../theme/util/mixins';
+@use '../../../../theme/util/mixins';
 
 ion-text {
   margin-inline: var(--spacing-md);
@@ -64,7 +64,7 @@ ion-text {
   .about-changelog,
   .licenses-content,
   .page-content {
-    @include border-radius-in-parallax(var(--border-radius-default));
+    @include mixins.border-radius-in-parallax(var(--border-radius-default));
 
     display: flex;
     flex-direction: column;
@@ -76,7 +76,7 @@ ion-text {
     background: var(--ion-item-background);
 
     & > * {
-      @include border-radius-in-parallax(var(--border-radius-default));
+      @include mixins.border-radius-in-parallax(var(--border-radius-default));
 
       position: relative;
       overflow: hidden;

frontend/app/src/app/modules/about/about-release-notes.component.ts

@@ -21,6 +21,7 @@ import {ConfigProvider} from '../config/config.provider';
   templateUrl: 'about-release-notes.html',
   styleUrls: ['about-release-notes.scss', './about-page/about-page.scss', 'release-notes-markdown.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AboutReleaseNotesComponent {
   config = inject(ConfigProvider);

frontend/app/src/app/modules/about/about-release-notes.scss

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../../../theme/util/mixins';
+@use '../../../theme/util/mixins';
 
 ion-button {
   --color: var(--ion-color-primary-contrast);
@@ -22,7 +22,7 @@ ion-button {
 }
 
 .release-notes {
-  @include border-radius-in-parallax(var(--border-radius-default));
+  @include mixins.border-radius-in-parallax(var(--border-radius-default));
 
   display: block;
   margin: var(--spacing-md);

frontend/app/src/app/modules/about/app-version.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {StorageProvider} from '../storage/storage.provider';
 import {ConfigProvider} from '../config/config.provider';
 import {ModalController} from '@ionic/angular/standalone';
@@ -12,11 +12,11 @@ export const RELEASE_NOTES_SHOWN_KEY = 'release_notes_shown';
 
 @Injectable({providedIn: 'root'})
 export class AppVersionService {
-  constructor(
-    private storage: StorageProvider,
-    private config: ConfigProvider,
-    private modalController: ModalController,
-  ) {}
+  private storage = inject(StorageProvider);
+
+  private config = inject(ConfigProvider);
+
+  private modalController = inject(ModalController);
 
   /**
    * Get the latest release notes that have not been presented yet

frontend/app/src/app/modules/about/release-notes-markdown.scss

@@ -20,7 +20,7 @@
   }
 
   blockquote {
-    background: var(--ion-item-background);
     border-left: 0.25em solid var(--ion-color-medium);
+    background: var(--ion-item-background);
   }
 }

frontend/app/src/app/modules/about/release-notes.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, inject} from '@angular/core';
 import {SCAppVersionInfo} from '@openstapps/core';
 import {MarkdownModule} from 'ngx-markdown';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
@@ -17,7 +17,6 @@ import {UtilModule} from '../../util/util.module';
   selector: 'stapps-release-notes',
   templateUrl: 'release-notes.html',
   styleUrls: ['release-notes.scss', 'release-notes-markdown.scss'],
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     UtilModule,
@@ -32,7 +31,7 @@ import {UtilModule} from '../../util/util.module';
   ],
 })
 export class ReleaseNotesComponent {
-  @Input() versionInfos: SCAppVersionInfo[];
+  readonly modalController = inject(ModalController);
 
-  constructor(readonly modalController: ModalController) {}
+  @Input() versionInfos: SCAppVersionInfo[];
 }

frontend/app/src/app/modules/about/release-notes.scss

@@ -1,11 +1,11 @@
-@import '../../../theme/util/mixins';
+@use '../../../theme/util/mixins';
 
 ion-title {
   padding-block: var(--spacing-md);
 }
 
 .content-card {
-  @include border-radius-in-parallax(var(--border-radius-default));
+  @include mixins.border-radius-in-parallax(var(--border-radius-default));
 
   display: block;
   margin: var(--spacing-md);

frontend/app/src/app/modules/assessments/assessments.provider.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {ConfigProvider} from '../config/config.provider';
 import {SCAssessment, SCUuid} from '@openstapps/core';
 import {DefaultAuthService} from '../auth/default-auth.service';
@@ -51,6 +51,12 @@ export function toAssessmentMap(data: SCAssessment[]): Record<SCUuid, SCAssessme
   providedIn: 'root',
 })
 export class AssessmentsProvider {
+  readonly configProvider = inject(ConfigProvider);
+
+  readonly defaultAuth = inject(DefaultAuthService);
+
+  readonly http = inject(HttpClient);
+
   assessmentPath = 'assessments';
 
   // usually this wouldn't be necessary, but the assessment service
@@ -64,12 +70,6 @@ export class AssessmentsProvider {
   // 15 minutes
   cacheMaxAge = 15 * 60 * 1000;
 
-  constructor(
-    readonly configProvider: ConfigProvider,
-    readonly defaultAuth: DefaultAuthService,
-    readonly http: HttpClient,
-  ) {}
-
   async getAssessment(uid: SCUuid, accessToken?: string | null, forceFetch = false): Promise<SCAssessment> {
     await this.getAssessments(accessToken, forceFetch);
 

frontend/app/src/app/modules/assessments/detail/assessments-detail.component.ts

@@ -26,17 +26,20 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
   selector: 'assessments-detail',
   templateUrl: 'assessments-detail.html',
   styleUrls: ['assessments-detail.scss'],
+  standalone: false,
 })
 export class AssessmentsDetailComponent implements OnInit {
-  destroy$ = inject(DestroyRef);
+  readonly route = inject(ActivatedRoute);
 
-  constructor(
-    readonly route: ActivatedRoute,
-    readonly assessmentsProvider: AssessmentsProvider,
-    readonly dataRoutingService: DataRoutingService,
-    readonly navController: NavController,
-    readonly activatedRoute: ActivatedRoute,
-  ) {}
+  readonly assessmentsProvider = inject(AssessmentsProvider);
+
+  readonly dataRoutingService = inject(DataRoutingService);
+
+  readonly navController = inject(NavController);
+
+  readonly activatedRoute = inject(ActivatedRoute);
+
+  destroy$ = inject(DestroyRef);
 
   @Input() dataPathAutoRouting = true;
 

frontend/app/src/app/modules/assessments/list/assessments-data-list.component.ts

@@ -21,6 +21,7 @@ import {Observable} from 'rxjs';
   selector: 'assessments-data-list',
   templateUrl: './assessments-data-list.html',
   styleUrls: ['./assessments-data-list.scss'],
+  standalone: false,
 })
 export class AssessmentsDataListComponent {
   /**

frontend/app/src/app/modules/assessments/list/assessments-list-item.component.ts

@@ -20,6 +20,7 @@ import {SCThings} from '@openstapps/core';
   selector: 'assessments-list-item',
   templateUrl: 'assessments-list-item.html',
   styleUrls: ['assessments-list-item.scss'],
+  standalone: false,
 })
 export class AssessmentsListItemComponent {
   /**

frontend/app/src/app/modules/assessments/list/assessments-simple-data-list.component.ts

@@ -23,8 +23,15 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
   selector: 'assessments-simple-data-list',
   templateUrl: 'assessments-simple-data-list.html',
   styleUrls: ['assessments-simple-data-list.scss'],
+  standalone: false,
 })
 export class AssessmentsSimpleDataListComponent implements OnInit {
+  readonly dataRoutingService = inject(DataRoutingService);
+
+  readonly router = inject(Router);
+
+  readonly activatedRoute = inject(ActivatedRoute);
+
   /**
    * All SCThings to display
    */
@@ -46,12 +53,6 @@ export class AssessmentsSimpleDataListComponent implements OnInit {
 
   destroy$ = inject(DestroyRef);
 
-  constructor(
-    readonly dataRoutingService: DataRoutingService,
-    readonly router: Router,
-    readonly activatedRoute: ActivatedRoute,
-  ) {}
-
   ngOnInit() {
     this.dataRoutingService
       .itemSelectListener()

frontend/app/src/app/modules/assessments/list/assessments-tree-list.component.ts

@@ -20,6 +20,7 @@ import {SCThings} from '@openstapps/core';
   selector: 'assessments-tree-list',
   templateUrl: 'assessments-tree-list.html',
   styleUrls: ['assessments-tree-list.scss'],
+  standalone: false,
 })
 export class AssessmentsTreeListComponent {
   @Input() items?: Promise<SCThings[] | undefined>;

frontend/app/src/app/modules/assessments/page/assessments-page.component.ts

@@ -29,8 +29,21 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
   templateUrl: 'assessments-page.html',
   styleUrls: ['assessments-page.scss'],
   animations: [materialSharedAxisX],
+  standalone: false,
 })
 export class AssessmentsPageComponent implements OnInit, AfterViewInit {
+  readonly logger = inject(NGXLogger);
+
+  readonly assessmentsProvider = inject(AssessmentsProvider);
+
+  readonly dataProvider = inject(DataProvider);
+
+  readonly activatedRoute = inject(ActivatedRoute);
+
+  readonly dataRoutingService = inject(DataRoutingService);
+
+  readonly router = inject(Router);
+
   assessments: Promise<
     Record<
       string,
@@ -49,15 +62,6 @@ export class AssessmentsPageComponent implements OnInit, AfterViewInit {
 
   destroy$ = inject(DestroyRef);
 
-  constructor(
-    readonly logger: NGXLogger,
-    readonly assessmentsProvider: AssessmentsProvider,
-    readonly dataProvider: DataProvider,
-    readonly activatedRoute: ActivatedRoute,
-    readonly dataRoutingService: DataRoutingService,
-    readonly router: Router,
-  ) {}
-
   ngAfterViewInit() {
     this.segmentView.value = this.sharedAxisChoreographer.currentValue;
   }

frontend/app/src/app/modules/assessments/types/assessment/assessment-base-info.component.ts

@@ -20,6 +20,7 @@ import {SCAssessment} from '@openstapps/core';
   selector: 'assessment-base-info',
   templateUrl: 'assessment-base-info.html',
   styleUrls: ['assessment-base-info.scss'],
+  standalone: false,
 })
 export class AssessmentBaseInfoComponent {
   _item: SCAssessment;

frontend/app/src/app/modules/assessments/types/assessment/assessment-detail.component.ts

@@ -20,6 +20,7 @@ import {SCAssessment} from '@openstapps/core';
   selector: 'assessment-detail',
   templateUrl: 'assessment-detail.html',
   styleUrls: ['assessment-detail.scss'],
+  standalone: false,
 })
 export class AssessmentDetailComponent {
   @Input() item: SCAssessment;

frontend/app/src/app/modules/assessments/types/assessment/assessment-list-item.component.ts

@@ -20,6 +20,7 @@ import {SCAssessment} from '@openstapps/core';
   selector: 'stapps-assessment-list-item',
   templateUrl: './assessment-list-item.html',
   styleUrls: ['./assessment-list-item.scss'],
+  standalone: false,
 })
 export class AssessmentListItemComponent {
   @Input() item: SCAssessment;

frontend/app/src/app/modules/assessments/types/course-of-study/course-of-study-assessment.component.ts

@@ -20,6 +20,7 @@ import {SCAssessment, SCCourseOfStudyWithoutReferences} from '@openstapps/core';
   selector: 'course-of-study-assessment',
   templateUrl: 'course-of-study-assessment.html',
   styleUrls: ['course-of-study-assessment.scss'],
+  standalone: false,
 })
 export class CourseOfStudyAssessmentComponent {
   @Input() courseOfStudy?: SCCourseOfStudyWithoutReferences | null;

frontend/app/src/app/modules/auth/auth-callback/page/auth-callback-page.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {NavController} from '@ionic/angular/standalone';
 import {Router} from '@angular/router';
 import {AuthActions, IAuthAction} from 'ionic-appauth';
@@ -24,14 +24,18 @@ import {DefaultAuthService} from '../../default-auth.service';
 @Component({
   templateUrl: 'auth-callback-page.component.html',
   styleUrls: ['auth-callback-page.component.scss'],
+  standalone: false,
 })
 export class AuthCallbackPageComponent {
-  constructor(
-    private navCtrl: NavController,
-    private router: Router,
-    private authHelper: AuthHelperService,
-    private auth: DefaultAuthService,
-  ) {
+  private navCtrl = inject(NavController);
+
+  private router = inject(Router);
+
+  private authHelper = inject(AuthHelperService);
+
+  private auth = inject(DefaultAuthService);
+
+  constructor() {
     const events: Observable<IAuthAction> = this.auth.events$;
 
     events.pipe(takeUntilDestroyed()).subscribe((action: IAuthAction) => this.postCallback(action));

frontend/app/src/app/modules/auth/auth-guard.service.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {CanActivate, NavigationExtras, Router, RouterStateSnapshot} from '@angular/router';
 import {ActivatedProtectedRouteSnapshot} from './protected.routes';
 import {AuthHelperService} from './auth-helper.service';
@@ -22,10 +22,9 @@ import {AuthHelperService} from './auth-helper.service';
   providedIn: 'root',
 })
 export class AuthGuardService implements CanActivate {
-  constructor(
-    private authHelper: AuthHelperService,
-    private router: Router,
-  ) {}
+  private authHelper = inject(AuthHelperService);
+
+  private router = inject(Router);
 
   public async canActivate(route: ActivatedProtectedRouteSnapshot, _state: RouterStateSnapshot) {
     if (route.queryParamMap.get('token')) {
@@ -35,7 +34,7 @@ export class AuthGuardService implements CanActivate {
     try {
       await this.authHelper.getProvider().getValidToken();
     } catch {
-      const originNavigation = this.router.getCurrentNavigation();
+      const originNavigation = this.router.currentNavigation();
       let extras: NavigationExtras = {};
       if (originNavigation) {
         const url = originNavigation.extractedUrl.toString();

frontend/app/src/app/modules/auth/auth-helper.service.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {AuthActions, IAuthAction} from 'ionic-appauth';
 import {TranslateService} from '@ngx-translate/core';
 import {JSONPath} from 'jsonpath-plus';
@@ -35,16 +35,21 @@ const AUTH_ORIGIN_PATH = 'stapps.auth.origin_path';
   providedIn: 'root',
 })
 export class AuthHelperService {
+  private translateService = inject(TranslateService);
+
+  private configProvider = inject(ConfigProvider);
+
+  private storageProvider = inject(StorageProvider);
+
+  private defaultAuth = inject(DefaultAuthService);
+
+  private browser = inject(SimpleBrowser);
+
+  private alertController = inject(AlertController);
+
   userConfigurationMap: SCUserConfigurationMap;
 
-  constructor(
-    private translateService: TranslateService,
-    private configProvider: ConfigProvider,
-    private storageProvider: StorageProvider,
-    private defaultAuth: DefaultAuthService,
-    private browser: SimpleBrowser,
-    private alertController: AlertController,
-  ) {
+  constructor() {
     this.userConfigurationMap =
       (
         this.configProvider.getAnyValue('auth') as {

frontend/app/src/app/modules/auth/default-auth.service.ts

@@ -26,7 +26,7 @@ import {AuthActionBuilder, Browser, DefaultBrowser, EndSessionHandler, UserInfoH
 import {ConfigProvider} from '../config/config.provider';
 import {SCAuthorizationProvider} from '@openstapps/core';
 import {getClientConfig, getEndpointsConfig} from './auth.provider.methods';
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {AuthService} from './auth.service';
 
 const TOKEN_RESPONSE_KEY = 'token_response';
@@ -35,6 +35,14 @@ const TOKEN_RESPONSE_KEY = 'token_response';
   providedIn: 'root',
 })
 export class DefaultAuthService extends AuthService {
+  protected browser: Browser;
+
+  protected storage: StorageBackend;
+
+  protected requestor: Requestor;
+
+  private readonly configProvider = inject(ConfigProvider);
+
   public localConfiguration: AuthorizationServiceConfiguration;
 
   protected tokenHandler: TokenRequestHandler;
@@ -45,13 +53,16 @@ export class DefaultAuthService extends AuthService {
 
   protected endSessionHandler: EndSessionHandler;
 
-  constructor(
-    protected browser: Browser = new DefaultBrowser(),
-    protected storage: StorageBackend = new LocalStorageBackend(),
-    protected requestor: Requestor = new JQueryRequestor(),
-    private readonly configProvider: ConfigProvider,
-  ) {
+  constructor() {
+    const browser = inject(Browser) ?? new DefaultBrowser();
+    const storage = inject(StorageBackend) ?? new LocalStorageBackend();
+    const requestor = inject(Requestor) ?? new JQueryRequestor();
+
     super(browser, storage, requestor);
+
+    this.browser = browser;
+    this.storage = storage;
+    this.requestor = requestor;
   }
 
   get configuration(): Promise<AuthorizationServiceConfiguration> {

frontend/app/src/app/modules/auth/factories/http.factory.ts

@@ -13,11 +13,10 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {HttpClient} from '@angular/common/http';
 import {Platform} from '@ionic/angular/standalone';
 import {CapacitorRequestor} from '../capacitor-requestor';
 import {NgHttpService} from '../ng-http.service';
 
-export const httpFactory = (platform: Platform, httpClient: HttpClient) => {
-  return platform.is('capacitor') ? new CapacitorRequestor() : new NgHttpService(httpClient);
+export const httpFactory = (platform: Platform) => {
+  return platform.is('capacitor') ? new CapacitorRequestor() : new NgHttpService();
 };

frontend/app/src/app/modules/auth/ng-http.service.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {Requestor} from '@openid/appauth';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {XhrSettings} from 'ionic-appauth/lib/cordova';
@@ -23,7 +23,7 @@ import {firstValueFrom, Observable} from 'rxjs';
   providedIn: 'root',
 })
 export class NgHttpService implements Requestor {
-  constructor(private http: HttpClient) {}
+  private http = inject(HttpClient);
 
   public async xhr<T>(settings: XhrSettings): Promise<T> {
     if (!settings.method) {

frontend/app/src/app/modules/background/schedule/schedule-sync.service.ts

@@ -40,16 +40,19 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 @Injectable()
 export class ScheduleSyncService {
-  destroy$ = inject(DestroyRef);
+  private scheduleProvider = inject(ScheduleProvider);
 
-  constructor(
-    private scheduleProvider: ScheduleProvider,
-    private storageProvider: StorageProvider,
-    private translator: ThingTranslateService,
-    private dateFormatPipe: DateFormatPipe,
-    private durationFormatPipe: DurationPipe,
-    private calendar: CalendarService,
-  ) {}
+  private storageProvider = inject(StorageProvider);
+
+  private translator = inject(ThingTranslateService);
+
+  private dateFormatPipe = inject(DateFormatPipe);
+
+  private durationFormatPipe = inject(DurationPipe);
+
+  private calendar = inject(CalendarService);
+
+  destroy$ = inject(DestroyRef);
 
   init() {
     this.scheduleProvider.uuids$

frontend/app/src/app/modules/calendar/add-event-review-modal.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnInit, inject} from '@angular/core';
 import {
   getICalExport,
   getNativeCalendarExport,
@@ -42,8 +42,15 @@ interface ICalInfo {
   selector: 'add-event-review-modal',
   templateUrl: 'add-event-review-modal.html',
   styleUrls: ['add-event-review-modal.scss'],
+  standalone: false,
 })
 export class AddEventReviewModalComponent implements OnInit {
+  readonly calendarService = inject(CalendarService);
+
+  readonly translator = inject(ThingTranslateService);
+
+  readonly translateService = inject(TranslateService);
+
   moment = moment;
 
   @Input() dismissAction: () => void;
@@ -56,12 +63,6 @@ export class AddEventReviewModalComponent implements OnInit {
 
   isWeb = true;
 
-  constructor(
-    readonly calendarService: CalendarService,
-    readonly translator: ThingTranslateService,
-    readonly translateService: TranslateService,
-  ) {}
-
   ngOnInit() {
     Device.getInfo().then(it => {
       this.isWeb = it.platform === 'web';

frontend/app/src/app/modules/calendar/calendar.service.ts

@@ -14,7 +14,7 @@
  */
 
 import {Calendar} from '@awesome-cordova-plugins/calendar/ngx';
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {ICalEvent} from './ical/ical';
 import moment, {duration, Moment, unitOfTime} from 'moment';
 import {Dialog} from '@capacitor/dialog';
@@ -31,6 +31,10 @@ const RECURRENCE_PATTERNS: Partial<Record<unitOfTime.Diff, string | undefined>>
 
 @Injectable()
 export class CalendarService {
+  readonly calendar = inject(Calendar);
+
+  private readonly configProvider = inject(ConfigProvider);
+
   goToDate = new Subject<number>();
 
   goToDateClicked = this.goToDate.asObservable();
@@ -38,10 +42,7 @@ export class CalendarService {
   calendarName = 'StApps';
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  constructor(
-    readonly calendar: Calendar,
-    private readonly configProvider: ConfigProvider,
-  ) {
+  constructor() {
     this.calendarName = (this.configProvider.getValue('name') as string) ?? 'StApps';
   }
 

frontend/app/src/app/modules/calendar/schedule.provider.ts

@@ -68,6 +68,8 @@ export type DateSeriesRelevantData = Pick<SCDateSeries, DateSeriesRelevantKeys>;
  */
 @Injectable()
 export class ScheduleProvider implements OnDestroy {
+  private readonly dataProvider = inject(DataProvider);
+
   // tslint:disable:prefer-function-over-method
 
   private static partialEventsStorageKey = 'schedule::partial_events';
@@ -76,7 +78,7 @@ export class ScheduleProvider implements OnDestroy {
 
   destroy$ = inject(DestroyRef);
 
-  constructor(private readonly dataProvider: DataProvider) {
+  constructor() {
     window.addEventListener('storage', this.storageListener);
   }
 

frontend/app/src/app/modules/catalog/catalog.component.html

@@ -23,7 +23,7 @@
   </ion-toolbar>
   <ion-toolbar color="primary" mode="md">
     <ion-segment (ionChange)="segmentChanged($event)" [value]="selectedSemesterUID" mode="md">
-      @for (semester of availableSemesters; track semester) {
+      @for (semester of availableSemesters; track semester.uid) {
         <ion-segment-button [value]="semester.uid">
           <ion-label>{{ semester.acronym }}</ion-label>
         </ion-segment-button>
@@ -35,7 +35,7 @@
 <ion-content>
   @if (catalogs && catalogs.length > 0) {
     <ion-list>
-      @for (catalog of catalogs; track catalog) {
+      @for (catalog of catalogs; track catalog.uid) {
         <ion-item button="true" lines="inset" (click)="notifySelect(catalog)">
           <ion-label>
             <h2>{{ catalog.name }}</h2>
@@ -46,7 +46,7 @@
   }
   @if (!catalogs) {
     <ion-list>
-      @for (skeleton of [].constructor(10); track skeleton) {
+      @for (skeleton of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track skeleton) {
         <stapps-skeleton-list-item> </stapps-skeleton-list-item>
       }
     </ion-list>

frontend/app/src/app/modules/catalog/catalog.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, inject} from '@angular/core';
 import {Router, ActivatedRoute} from '@angular/router';
 import {SCCatalog, SCSemester} from '@openstapps/core';
 import moment from 'moment';
@@ -26,8 +26,21 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
   selector: 'app-catalog',
   templateUrl: './catalog.component.html',
   styleUrls: ['./catalog.component.scss'],
+  standalone: false,
 })
 export class CatalogComponent implements OnInit {
+  private readonly route = inject(ActivatedRoute);
+
+  private readonly catalogProvider = inject(CatalogProvider);
+
+  private readonly dataRoutingService = inject(DataRoutingService);
+
+  private readonly logger = inject(NGXLogger);
+
+  protected router = inject(Router);
+
+  location = inject(Location);
+
   /**
    * SCSemester to show
    */
@@ -53,14 +66,7 @@ export class CatalogComponent implements OnInit {
    */
   superCatalog: SCCatalog;
 
-  constructor(
-    private readonly route: ActivatedRoute,
-    private readonly catalogProvider: CatalogProvider,
-    private readonly dataRoutingService: DataRoutingService,
-    private readonly logger: NGXLogger,
-    protected router: Router,
-    public location: Location,
-  ) {
+  constructor() {
     this.dataRoutingService
       .itemSelectListener()
       .pipe(takeUntilDestroyed())

frontend/app/src/app/modules/catalog/catalog.provider.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {
   SCCatalogWithoutReferences,
   SCSearchFilter,
@@ -28,7 +28,7 @@ import {DataProvider} from '../data/data.provider';
   providedIn: 'root',
 })
 export class CatalogProvider {
-  constructor(private readonly dataProvider: DataProvider) {}
+  private readonly dataProvider = inject(DataProvider);
 
   /**
    * Get news messages

frontend/app/src/app/modules/config/config.provider.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {Client} from '@openstapps/api';
 import {SCAppConfiguration, SCIndexResponse} from '@openstapps/core';
 import {CORE_VERSION} from '@openstapps/core';
@@ -44,6 +44,12 @@ export const STORAGE_KEY_CONFIG = 'stapps.config';
   providedIn: 'root',
 })
 export class ConfigProvider {
+  private readonly storageProvider = inject(StorageProvider);
+
+  private readonly logger = inject(NGXLogger);
+
+  private readonly internetConnectionService = inject(InternetConnectionService);
+
   /**
    * Api client
    */
@@ -66,16 +72,10 @@ export class ConfigProvider {
 
   /**
    * Constructor, initialise api client
-   * @param storageProvider StorageProvider to load persistent configuration
-   * @param swHttpClient Api client
-   * @param logger An angular logger
    */
-  constructor(
-    private readonly storageProvider: StorageProvider,
-    swHttpClient: StAppsWebHttpClient,
-    private readonly logger: NGXLogger,
-    private readonly internetConnectionService: InternetConnectionService,
-  ) {
+  constructor() {
+    const swHttpClient = inject(StAppsWebHttpClient);
+
     console.log('config init');
     this.client = new Client(swHttpClient, environment.backend_url, environment.backend_version);
   }

frontend/app/src/app/modules/dashboard/dashboard.collapse.component.scss

@@ -13,9 +13,9 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../../theme/util/mixins';
+@use '../../../theme/util/mixins';
 
-@include ion-md-down {
+@include mixins.ion-md-down {
   ion-toolbar,
   .logo,
   .schedule,

frontend/app/src/app/modules/dashboard/dashboard.component.html

@@ -21,7 +21,7 @@
 <div #schedule class="schedule">
   <a [routerLink]="['/schedule/weekly-view']">
     <ion-icon [size]="36" [weight]="300" name="calendar_month"></ion-icon>
-    <ion-label [innerHTML]="'schedule.recurring' | translate"></ion-label>
+    <ion-label>{{ 'schedule.recurring' | translate }}</ion-label>
   </a>
   <!-- Avoid structural directives here, they might interfere with the collapse animation -->
   <a

frontend/app/src/app/modules/dashboard/dashboard.component.scss

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../../theme/util/mixins';
+@use '../../../theme/util/mixins';
 
 :host ion-header {
   z-index: 1;
@@ -59,15 +59,6 @@ ion-content {
 }
 
 .schedule {
-  @include ion-md-up {
-    position: unset;
-
-    width: unset;
-    height: calc(var(--tablet-top-bar-height) + (2 * var(--spacing-xl)));
-    margin: 0;
-    padding: var(--spacing-xl);
-  }
-
   z-index: 3;
 
   display: flex;
@@ -82,6 +73,15 @@ ion-content {
 
   background: var(--ion-color-primary);
 
+  @include mixins.ion-md-up {
+    position: unset;
+
+    width: unset;
+    height: calc(var(--tablet-top-bar-height) + (2 * var(--spacing-xl)));
+    margin: 0;
+    padding: var(--spacing-xl);
+  }
+
   a {
     display: flex;
     flex-direction: column;
@@ -89,18 +89,13 @@ ion-content {
     height: auto;
     min-height: 80px;
     padding: var(--spacing-sm);
+    border-radius: var(--border-radius-default);
 
     color: var(--ion-color-primary-contrast);
     text-decoration: none;
-
-    border-radius: var(--border-radius-default);
   }
 
   a:first-child {
-    @include phone-landscape {
-      height: auto;
-    }
-
     overflow: hidden;
     flex: 0 0 auto;
     gap: var(--spacing-sm);
@@ -108,27 +103,22 @@ ion-content {
     justify-content: center;
 
     height: 100%;
+    border: 2px solid var(--ion-color-primary-tint);
 
     text-align: center;
 
-    border: 2px solid var(--ion-color-primary-tint);
+    @include mixins.phone-landscape {
+      height: auto;
+    }
 
     ion-label {
       font-size: var(--font-size-xxs);
       font-weight: var(--font-weight-semi-bold);
-      word-break: break-word;
+      word-break: overflow-wrap;
     }
   }
 
   a:last-child {
-    @include ion-md-up {
-      flex: 1 1 100%;
-    }
-
-    @include phone-landscape {
-      flex: 1 1 85%;
-    }
-
     z-index: 1;
 
     flex: 1 1 65%;
@@ -138,6 +128,14 @@ ion-content {
 
     background: var(--linear-gradient);
 
+    @include mixins.ion-md-up {
+      flex: 1 1 100%;
+    }
+
+    @include mixins.phone-landscape {
+      flex: 1 1 85%;
+    }
+
     ion-label {
       font-size: var(--font-size-xxs);
       font-weight: var(--font-weight-bold);

frontend/app/src/app/modules/dashboard/dashboard.component.ts

@@ -38,8 +38,23 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss', './dashboard.collapse.component.scss'],
+  standalone: false,
 })
 export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
+  private readonly dataRoutingService = inject(DataRoutingService);
+
+  private scheduleProvider = inject(ScheduleProvider);
+
+  protected router = inject(Router);
+
+  location = inject(Location);
+
+  private animationControl = inject(AnimationController);
+
+  private breakpointObserver = inject(BreakpointObserver);
+
+  private zone = inject(NgZone);
+
   @ViewChild('toolbar', {read: ElementRef}) toolbarRef: ElementRef;
 
   @ViewChild('schedule', {read: ElementRef}) scheduleRef: ElementRef;
@@ -60,15 +75,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
 
   destroy$ = inject(DestroyRef);
 
-  constructor(
-    private readonly dataRoutingService: DataRoutingService,
-    private scheduleProvider: ScheduleProvider,
-    protected router: Router,
-    public location: Location,
-    private animationControl: AnimationController,
-    private breakpointObserver: BreakpointObserver,
-    private zone: NgZone,
-  ) {
+  constructor() {
     this.dataRoutingService
       .itemSelectListener()
       .pipe(takeUntilDestroyed())

frontend/app/src/app/modules/dashboard/dashboard.provider.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Injectable} from '@angular/core';
+import {inject, Injectable} from '@angular/core';
 import {
   SCBooleanFilterArguments,
   SCMessage,
@@ -28,7 +28,9 @@ import {DataProvider} from '../data/data.provider';
   providedIn: 'root',
 })
 export class DashboardProvider {
-  constructor(private readonly dataProvider: DataProvider) {}
+  private readonly dataProvider = inject(DataProvider);
+
+  constructor() {}
 
   /**
    * Get news messages

frontend/app/src/app/modules/dashboard/sections/favorites-section/favorites-section.component.html

@@ -19,7 +19,7 @@
   </ion-button>
   @if (items | async; as items) {
     <simple-swiper @fade>
-      @for (item of items; track item) {
+      @for (item of items; track item.uid) {
         <stapps-data-list-item
           [hideThumbnail]="true"
           [listItemEndInteraction]="false"

frontend/app/src/app/modules/dashboard/sections/favorites-section/favorites-section.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {filter, map} from 'rxjs/operators';
 import {FavoritesService} from '../../../favorites/favorites.service';
 import {fadeAnimation} from '../../fade.animation';
@@ -27,12 +27,13 @@ import {isMensaThing} from '../../mensa-filters';
   styleUrls: ['favorites-section.component.scss'],
   animations: [fadeAnimation],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class FavoritesSectionComponent {
+  private favoritesService = inject(FavoritesService);
+
   items = this.favoritesService.favoriteThings$.pipe(
     map(favorites => favorites.filter(it => !isMensaThing(it))),
     filter(favorites => favorites.length > 0),
   );
-
-  constructor(private favoritesService: FavoritesService) {}
 }

frontend/app/src/app/modules/dashboard/sections/jobs-section/job-section.component.html

@@ -19,7 +19,7 @@
   </ion-button>
   @if (jobs | async; as jobs) {
     <simple-swiper @fade>
-      @for (item of jobs; track item) {
+      @for (item of jobs; track item.uid) {
         <stapps-data-list-item
           [hideThumbnail]="true"
           [item]="item"

frontend/app/src/app/modules/dashboard/sections/jobs-section/job-section.component.scss

@@ -29,8 +29,8 @@ simple-swiper {
 
   &::part(native) {
     height: 100%;
-    background: none;
     border-radius: var(--border-radius-default);
+    background: none;
   }
 
   ion-label {

frontend/app/src/app/modules/dashboard/sections/jobs-section/job-section.component.ts

@@ -26,6 +26,7 @@ import {fadeAnimation} from '../../fade.animation';
   styleUrls: ['job-section.component.scss'],
   animations: [fadeAnimation],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class JobSectionComponent {
   jobs = inject(DataProvider)

frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section-content.component.html

@@ -16,7 +16,7 @@
 @if (dishes | async; as dishes) {
   @if (dishes.length > 0) {
     <simple-swiper @fade>
-      @for (dish of dishes; track dish) {
+      @for (dish of dishes; track dish.uid) {
         <stapps-data-list-item
           [hideThumbnail]="true"
           [item]="dish"

frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section-content.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, inject} from '@angular/core';
 import {SCDish, SCPlace, SCThings} from '@openstapps/core';
 import {PlaceMensaService} from '../../../data/types/place/special/mensa/place-mensa-service';
 import {fadeAnimation} from '../../fade.animation';
@@ -27,8 +27,11 @@ import {isToday} from 'date-fns';
   styleUrls: ['mensa-section-content.component.scss'],
   animations: [fadeAnimation],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class MensaSectionContentComponent {
+  private readonly mensaService = inject(PlaceMensaService);
+
   /**
    * Map of dishes for each day
    */
@@ -41,6 +44,4 @@ export class MensaSectionContentComponent {
       return closestDayWithDishes ? it[closestDayWithDishes] : [];
     });
   }
-
-  constructor(private readonly mensaService: PlaceMensaService) {}
 }

frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section.component.html

@@ -15,7 +15,7 @@
 
 @if (items | async; as items) {
   @if (items.length !== 0) {
-    @for (item of items; track item) {
+    @for (item of items; track item.uid) {
       <stapps-section @fade [item]="item" [title]="'name' | thingTranslate: item">
         <ion-button slot="button-end" fill="clear" color="medium" (click)="favoritesService.delete(item)">
           <ion-icon slot="icon-only" name="delete" [size]="24"></ion-icon>

frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {map} from 'rxjs/operators';
 import {FavoritesService} from '../../../favorites/favorites.service';
 import {fadeAnimation} from '../../fade.animation';
@@ -27,9 +27,10 @@ import {isMensaThing} from '../../mensa-filters';
   styleUrls: ['mensa-section.component.scss'],
   animations: [fadeAnimation],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class MensaSectionComponent {
-  items = this.favoritesService.favoriteThings$.pipe(map(favorites => favorites.filter(isMensaThing)));
+  protected favoritesService = inject(FavoritesService);
 
-  constructor(protected favoritesService: FavoritesService) {}
+  items = this.favoritesService.favoriteThings$.pipe(map(favorites => favorites.filter(isMensaThing)));
 }

frontend/app/src/app/modules/dashboard/sections/news-section/news-section.component.scss

@@ -23,8 +23,8 @@ simple-swiper {
 
   &::part(native) {
     height: 100%;
-    background: none;
     border-radius: var(--border-radius-default);
+    background: none;
   }
 
   ion-label {
@@ -64,10 +64,9 @@ simple-swiper {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
 
     white-space: break-spaces;
-
-    -webkit-line-clamp: 3;
   }
 
   .title-sub {

frontend/app/src/app/modules/dashboard/sections/news-section/news-section.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {NewsProvider} from '../../../news/news.provider';
 import {fadeAnimation} from '../../fade.animation';
 
@@ -25,12 +25,13 @@ import {fadeAnimation} from '../../fade.animation';
   styleUrls: ['news-section.component.scss'],
   animations: [fadeAnimation],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class NewsSectionComponent {
+  readonly newsProvider = inject(NewsProvider);
+
   news = this.newsProvider
     .getCurrentFilters()
     // eslint-disable-next-line unicorn/prefer-top-level-await,unicorn/consistent-function-scoping
     .then(filters => this.newsProvider.getList(5, 0, filters));
-
-  constructor(readonly newsProvider: NewsProvider) {}
 }

frontend/app/src/app/modules/dashboard/sections/search-section/search-section.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {AnimationController} from '@ionic/angular/standalone';
 import {homePageSearchTransition} from './search-route-transition';
 
@@ -23,9 +23,10 @@ import {homePageSearchTransition} from './search-route-transition';
   selector: 'stapps-search-section',
   templateUrl: 'search-section.component.html',
   styleUrls: ['search-section.component.scss'],
+  standalone: false,
 })
 export class SearchSectionComponent {
-  routeTransition = homePageSearchTransition(this.animationController);
+  private animationController = inject(AnimationController);
 
-  constructor(private animationController: AnimationController) {}
+  routeTransition = homePageSearchTransition(this.animationController);
 }

frontend/app/src/app/modules/data/chips/action-chip-list.component.ts

@@ -22,6 +22,7 @@ import {SCDateSeries, SCThingType, SCThings} from '@openstapps/core';
   selector: 'stapps-action-chip-list',
   templateUrl: 'action-chip-list.html',
   styleUrls: ['action-chip-list.scss'],
+  standalone: false,
 })
 export class ActionChipListComponent {
   private _item: SCThings;

frontend/app/src/app/modules/data/chips/data/add-event-action-chip.component.ts

@@ -36,8 +36,17 @@ import {MaterialSymbol} from 'material-symbols';
   templateUrl: 'add-event-action-chip.html',
   styleUrls: ['add-event-action-chip.scss'],
   animations: [chipSkeletonTransition, chipTransition],
+  standalone: false,
 })
 export class AddEventActionChipComponent {
+  readonly dataProvider = inject(CoordinatedSearchProvider);
+
+  readonly modalController = inject(ModalController);
+
+  readonly scheduleProvider = inject(ScheduleProvider);
+
+  readonly routerOutlet = inject(IonRouterOutlet);
+
   /**
    * Associated date series
    */
@@ -93,13 +102,6 @@ export class AddEventActionChipComponent {
 
   destroy$ = inject(DestroyRef);
 
-  constructor(
-    readonly dataProvider: CoordinatedSearchProvider,
-    readonly modalController: ModalController,
-    readonly scheduleProvider: ScheduleProvider,
-    readonly routerOutlet: IonRouterOutlet,
-  ) {}
-
   /**
    * Apply state
    */

frontend/app/src/app/modules/data/chips/data/locate-action-chip.component.ts

@@ -22,6 +22,7 @@ import {SCThing} from '@openstapps/core';
 @Component({
   selector: 'stapps-locate-action-chip',
   templateUrl: 'locate-action-chip.html',
+  standalone: false,
 })
 export class LocateActionChipComponent {
   /**

frontend/app/src/app/modules/data/chips/data/navigate-action-chip.component.ts

@@ -19,6 +19,7 @@ import {SCPlaceWithoutReferences, SCThings} from '@openstapps/core';
   selector: 'stapps-navigate-action-chip',
   templateUrl: 'navigate-action-chip.html',
   styleUrls: ['navigate-action-chip.scss'],
+  standalone: false,
 })
 export class NavigateActionChipComponent {
   place: SCPlaceWithoutReferences;

frontend/app/src/app/modules/data/chips/edit-event-selection.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, inject} from '@angular/core';
 import {ModalController} from '@ionic/angular/standalone';
 import {SCDateSeries} from '@openstapps/core';
 import {
@@ -38,8 +38,17 @@ import {SelectionValue, TreeNode} from './tree-node';
   selector: 'stapps-edit-event-selection',
   templateUrl: 'edit-event-selection.html',
   styleUrls: ['edit-event-selection.scss'],
+  standalone: false,
 })
 export class EditEventSelectionComponent implements OnInit {
+  readonly ref = inject(ChangeDetectorRef);
+
+  readonly scheduleProvider = inject(ScheduleProvider);
+
+  readonly calendar = inject(CalendarService);
+
+  readonly modalController = inject(ModalController);
+
   /**
    * The item the action belongs to
    */
@@ -58,13 +67,6 @@ export class EditEventSelectionComponent implements OnInit {
   @Output()
   modified = new EventEmitter();
 
-  constructor(
-    readonly ref: ChangeDetectorRef,
-    readonly scheduleProvider: ScheduleProvider,
-    readonly calendar: CalendarService,
-    readonly modalController: ModalController,
-  ) {}
-
   ngOnInit() {
     this.partialDateSeries = this.scheduleProvider.partialEvents$.value;
     this.reset();

frontend/app/src/app/modules/data/chips/filter/chip-filter.component.ts

@@ -21,6 +21,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
   selector: 'stapps-chip-filter',
   templateUrl: './chip-filter.component.html',
   styleUrls: ['./chip-filter.component.scss'],
+  standalone: false,
 })
 export class ChipFilterComponent {
   /**

frontend/app/src/app/modules/data/coordinated-search.provider.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {SCSearchRequest, SCSearchResponse} from '@openstapps/core';
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {DataProvider} from './data.provider';
 
 /**
@@ -50,7 +50,7 @@ interface OngoingQuery {
   providedIn: 'root',
 })
 export class CoordinatedSearchProvider {
-  constructor(readonly dataProvider: DataProvider) {}
+  readonly dataProvider = inject(DataProvider);
 
   /**
    * Queue of ongoing queries

frontend/app/src/app/modules/data/data-icon.pipe.ts

@@ -21,6 +21,7 @@ import {DataIcons} from './data-icon.config';
  */
 @Pipe({
   name: 'dataIcon',
+  standalone: false,
 })
 export class DataIconPipe implements PipeTransform {
   /**

frontend/app/src/app/modules/data/data.provider.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {Client} from '@openstapps/api';
 import {
   SCFacet,
@@ -141,12 +141,10 @@ export class DataProvider {
     return facet;
   }
 
-  /**
-   * TODO
-   * @param stAppsWebHttpClient TODO
-   * @param storageProvider TODO
-   */
-  constructor(stAppsWebHttpClient: StAppsWebHttpClient, storageProvider: StorageProvider) {
+  constructor() {
+    const stAppsWebHttpClient = inject(StAppsWebHttpClient);
+    const storageProvider = inject(StorageProvider);
+
     this.client = new Client(stAppsWebHttpClient, this.backendUrl, this.appVersion);
     this.storageProvider = storageProvider;
   }

frontend/app/src/app/modules/data/debug-data-collector.service.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {SCFeedbackRequestMetaData} from '@openstapps/core';
 import {Platform} from '@ionic/angular/standalone';
 import {DataProvider} from './data.provider';
@@ -23,6 +23,14 @@ import {SettingsProvider} from '../settings/settings.provider';
   providedIn: 'root',
 })
 export class DebugDataCollectorService {
+  private platform = inject(Platform);
+
+  private dataProvider = inject(DataProvider);
+
+  private router = inject(Router);
+
+  private settingsProvider = inject(SettingsProvider);
+
   /**
    * Previously visited route
    */
@@ -33,12 +41,9 @@ export class DebugDataCollectorService {
    */
   currentRoute: string;
 
-  constructor(
-    private platform: Platform,
-    private dataProvider: DataProvider,
-    private router: Router,
-    private settingsProvider: SettingsProvider,
-  ) {
+  constructor() {
+    const router = this.router;
+
     this.currentRoute = this.router.url;
     router.events.subscribe(event => {
       if (event instanceof NavigationEnd) {

frontend/app/src/app/modules/data/detail/data-detail-content.component.ts

@@ -12,7 +12,7 @@
  *  You should have received a copy of the GNU General Public License along with
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input, TemplateRef} from '@angular/core';
+import {Component, Input, TemplateRef, inject} from '@angular/core';
 import {SCThings} from '@openstapps/core';
 import {DataListContext} from '../list/data-list.component';
 import {ModalController} from '@ionic/angular/standalone';
@@ -24,8 +24,11 @@ import {ModalController} from '@ionic/angular/standalone';
   selector: 'stapps-data-detail-content',
   styleUrls: ['data-detail-content.scss'],
   templateUrl: 'data-detail-content.html',
+  standalone: false,
 })
 export class DataDetailContentComponent {
+  readonly modalController = inject(ModalController);
+
   /**
    * TODO
    */
@@ -36,6 +39,4 @@ export class DataDetailContentComponent {
   @Input() openAsModal = false;
 
   @Input() showModalHeader = false;
-
-  constructor(readonly modalController: ModalController) {}
 }

frontend/app/src/app/modules/data/detail/data-detail-content.scss

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../../../../theme/util/mixins';
+@use '../../../../theme/util/mixins';
 
 :host {
   display: contents;
@@ -34,8 +34,8 @@ stapps-origin-detail {
   padding: 0 var(--spacing-md);
 
   ::ng-deep > * {
-    @include border-radius-in-parallax(var(--border-radius-default));
-    @include content-padding;
+    @include mixins.border-radius-in-parallax(var(--border-radius-default));
+    @include mixins.content-padding;
 
     position: relative;
 

frontend/app/src/app/modules/data/detail/data-detail.component.ts

@@ -12,7 +12,16 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef} from '@angular/core';
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  TemplateRef,
+  inject,
+} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ModalController} from '@ionic/angular/standalone';
 import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
@@ -36,8 +45,17 @@ export interface ExternalDataLoadEvent {
   selector: 'stapps-data-detail',
   styleUrls: ['data-detail.scss'],
   templateUrl: 'data-detail.html',
+  standalone: false,
 })
 export class DataDetailComponent implements OnInit {
+  protected readonly route = inject(ActivatedRoute);
+
+  private readonly dataProvider = inject(DataProvider);
+
+  private readonly favoritesService = inject(FavoritesService);
+
+  readonly modalController = inject(ModalController);
+
   /**
    * The associated item
    *
@@ -86,15 +104,11 @@ export class DataDetailComponent implements OnInit {
     return (thing as SCSaveableThing).data !== undefined;
   }
 
-  constructor(
-    protected readonly route: ActivatedRoute,
-    router: Router,
-    private readonly dataProvider: DataProvider,
-    private readonly favoritesService: FavoritesService,
-    readonly modalController: ModalController,
-    translateService: TranslateService,
-  ) {
-    this.inputItem = router.getCurrentNavigation()?.extras.state?.item;
+  constructor() {
+    const router = inject(Router);
+    const translateService = inject(TranslateService);
+
+    this.inputItem = router.currentNavigation()?.extras.state?.item;
     if (!this.inputItem?.origin) {
       // We received a ThingWithoutReferences.
       // This can happen, for example, when detail views use `inPlace` list items

frontend/app/src/app/modules/data/detail/data-path.component.ts

@@ -26,8 +26,17 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
   selector: 'stapps-data-path',
   templateUrl: './data-path.html',
   styleUrls: ['./data-path.scss'],
+  standalone: false,
 })
 export class DataPathComponent implements OnInit {
+  readonly dataRoutingService = inject(DataRoutingService);
+
+  readonly navController = inject(NavController);
+
+  readonly routeStack = inject(RoutingStackService);
+
+  readonly dataProvider = inject(DataProvider);
+
   path: Promise<SCThingWithoutReferences[]>;
 
   $width: Observable<number>;
@@ -65,13 +74,6 @@ export class DataPathComponent implements OnInit {
 
   destroy$ = inject(DestroyRef);
 
-  constructor(
-    readonly dataRoutingService: DataRoutingService,
-    readonly navController: NavController,
-    readonly routeStack: RoutingStackService,
-    readonly dataProvider: DataProvider,
-  ) {}
-
   ngOnInit() {
     this.$width = fromEvent(window, 'resize').pipe(
       map(() => window.innerWidth),

frontend/app/src/app/modules/data/elements/address-detail.component.ts

@@ -21,6 +21,7 @@ import {SCPostalAddress} from '@openstapps/core';
 @Component({
   selector: 'stapps-address-detail',
   templateUrl: 'address-detail.html',
+  standalone: false,
 })
 export class AddressDetailComponent {
   /**

frontend/app/src/app/modules/data/elements/certifications-in-detail.component.ts

@@ -19,6 +19,7 @@ import {SCCertificationWithoutReferences} from '@openstapps/core';
   selector: 'stapps-certifications-in-detail',
   templateUrl: 'certifications-in-detail.html',
   styleUrls: ['certifications-in-detail.scss'],
+  standalone: false,
 })
 export class CertificationsInDetailComponent {
   @Input() certifications: SCCertificationWithoutReferences[] = [];

frontend/app/src/app/modules/data/elements/external-link.component.ts

@@ -13,21 +13,22 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Component, Input} from '@angular/core';
+import {Component, Input, inject} from '@angular/core';
 import {SimpleBrowser} from '../../../util/browser.factory';
 
 @Component({
   selector: 'stapps-external-link',
   templateUrl: './external-link.html',
   styleUrls: ['./external-link.scss'],
+  standalone: false,
 })
 export class ExternalLinkComponent {
+  private browser = inject(SimpleBrowser);
+
   @Input() link: string;
 
   @Input() text: string;
 
-  constructor(private browser: SimpleBrowser) {}
-
   onLinkClick(url: string) {
     // make sure if the url is valid and then open it in the browser (prevent problem in iOS)
     this.browser.open(new URL(url).href);

frontend/app/src/app/modules/data/elements/favorite-button.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, inject} from '@angular/core';
 import {SCIndexableThings} from '@openstapps/core';
 import {FavoritesService} from '../../favorites/favorites.service';
 import {Observable} from 'rxjs';
@@ -26,8 +26,11 @@ import {map, take} from 'rxjs/operators';
   templateUrl: './favorite-button.component.html',
   styleUrls: ['./favorite-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class FavoriteButtonComponent {
+  private favoritesService = inject(FavoritesService);
+
   /**
    * Item getter
    */
@@ -57,8 +60,6 @@ export class FavoriteButtonComponent {
    */
   isFavorite$: Observable<boolean>;
 
-  constructor(private favoritesService: FavoritesService) {}
-
   /**
    * Add or remove the thing from favorites (depending on its current status)
    * @param event A click event

frontend/app/src/app/modules/data/elements/long-inline-text.component.ts

@@ -20,6 +20,7 @@ import {Component, Input} from '@angular/core';
 @Component({
   selector: 'stapps-long-inline-text',
   templateUrl: 'long-inline-text.html',
+  standalone: false,
 })
 export class LongInlineTextComponent {
   /**

frontend/app/src/app/modules/data/elements/long-inline-text.html

@@ -13,20 +13,20 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 @if (text !== undefined) {
-  <span class="ion-hide-sm-up">
-    {{ text | slice: 0 : size }}
+  <span class="ion-hide-sm-up"
+    >{{ text | slice: 0 : size }}
     @if (text.length > size) {
       <span class="ion-hide-sm-up">…</span>
     }
   </span>
-  <span class="ion-hide-sm-down ion-hide-md-up">
-    {{ text | slice: 0 : size * 2 }}
+  <span class="ion-hide-sm-down ion-hide-md-up"
+    >{{ text | slice: 0 : size * 2 }}
     @if (text.length > size * 2) {
       <span class="ion-hide-sm-down ion-hide-md-up"> … </span>
     }
   </span>
-  <span class="ion-hide-md-down">
-    {{ text | slice: 0 : size * 3 }}
+  <span class="ion-hide-md-down"
+    >{{ text | slice: 0 : size * 3 }}
     @if (text.length > size * 3) {
       <span class="ion-hide-md-down">…</span>
     }

frontend/app/src/app/modules/data/elements/offers-detail.component.ts

@@ -18,6 +18,7 @@ import {SCAcademicPriceGroup, SCThingThatCanBeOfferedOffer} from '@openstapps/co
 @Component({
   selector: 'stapps-offers-detail',
   templateUrl: 'offers-detail.html',
+  standalone: false,
 })
 export class OffersDetailComponent {
   @Input() offers: Array<SCThingThatCanBeOfferedOffer<SCAcademicPriceGroup>>;

frontend/app/src/app/modules/data/elements/offers-in-list.component.ts

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input} from '@angular/core';
+import {Component, Input, inject} from '@angular/core';
 import {
   SCAcademicPriceGroup,
   SCThingThatCanBeOfferedAvailability,
@@ -24,8 +24,11 @@ import {SettingsProvider} from '../../settings/settings.provider';
   selector: 'stapps-offers-in-list',
   templateUrl: 'offers-in-list.html',
   styleUrls: ['offers-in-list.scss'],
+  standalone: false,
 })
 export class OffersInListComponent {
+  readonly settingsProvider = inject(SettingsProvider);
+
   @Input() set offers(it: Array<SCThingThatCanBeOfferedOffer<SCAcademicPriceGroup>>) {
     this._offers = it;
     this.price = it[0].prices?.default;
@@ -43,6 +46,4 @@ export class OffersInListComponent {
   availability: SCThingThatCanBeOfferedAvailability;
 
   _offers: Array<SCThingThatCanBeOfferedOffer<SCAcademicPriceGroup>>;
-
-  constructor(readonly settingsProvider: SettingsProvider) {}
 }

frontend/app/src/app/modules/data/elements/origin-detail.component.ts

@@ -22,6 +22,7 @@ import {SCThingUserOrigin, SCThingRemoteOrigin} from '@openstapps/core';
   selector: 'stapps-origin-detail',
   templateUrl: 'origin-detail.html',
   styleUrl: 'origin-detail.scss',
+  standalone: false,
 })
 export class OriginDetailComponent {
   /**

frontend/app/src/app/modules/data/elements/origin-in-list.component.ts

@@ -21,6 +21,7 @@ import {SCThingUserOrigin, SCThingRemoteOrigin} from '@openstapps/core';
 @Component({
   selector: 'stapps-origin-in-list',
   templateUrl: 'origin-in-list.html',
+  standalone: false,
 })
 export class OriginInListComponent {
   /**

frontend/app/src/app/modules/data/elements/rating.component.ts

@@ -13,7 +13,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {ChangeDetectionStrategy, Component, ElementRef, HostListener, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, inject} from '@angular/core';
 import {SCDish, SCRatingRequest} from '@openstapps/core';
 import {RatingProvider} from '../rating.provider';
 import {ratingAnimation} from './rating.animation';
@@ -26,8 +26,13 @@ import {catchError, map} from 'rxjs/operators';
   styleUrls: ['rating.scss'],
   animations: [ratingAnimation],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class StappsRatingComponent {
+  readonly elementRef = inject(ElementRef);
+
+  readonly ratingProvider = inject(RatingProvider);
+
   performRating = new BehaviorSubject(false);
 
   userRating = new BehaviorSubject<number | undefined>(undefined);
@@ -51,11 +56,6 @@ export class StappsRatingComponent {
     this.dish.next(value);
   }
 
-  constructor(
-    readonly elementRef: ElementRef,
-    readonly ratingProvider: RatingProvider,
-  ) {}
-
   @HostListener('document:mousedown', ['$event'])
   clickOutside(event: MouseEvent) {
     if (this.userRating.value) return;

frontend/app/src/app/modules/data/elements/rating.scss

@@ -34,9 +34,9 @@ ion-button {
   justify-content: flex-start;
 
   padding-inline: var(--spacing-xl);
+  border-radius: var(--border-radius-default);
 
   background: var(--ion-color-light);
-  border-radius: var(--border-radius-default);
 
   > ion-icon {
     &:active,

frontend/app/src/app/modules/data/elements/share-button.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, inject} from '@angular/core';
 import {ToastController} from '@ionic/angular/standalone';
 import {environment} from '../../../../environments/environment';
 
@@ -6,16 +6,17 @@ import {environment} from '../../../../environments/environment';
   selector: 'stapps-share-button',
   templateUrl: 'share-button.html',
   styleUrls: ['share-button.scss'],
+  standalone: false,
 })
 export class ShareButtonComponent {
+  readonly toastController = inject(ToastController);
+
   canShare = false;
 
   @Input({required: true}) title: string;
 
   @Input() url: string;
 
-  constructor(readonly toastController: ToastController) {}
-
   share(): boolean {
     const url = this.url ?? new URL(window.location.pathname, `https://${environment.app_host}`);
 

frontend/app/src/app/modules/data/elements/simple-card.component.ts

@@ -18,6 +18,7 @@ import {SCThingWithoutReferences} from '@openstapps/core';
 @Component({
   selector: 'stapps-simple-card',
   templateUrl: 'simple-card.html',
+  standalone: false,
 })
 export class SimpleCardComponent {
   areThings = false;

frontend/app/src/app/modules/data/elements/simple-card.html

@@ -24,7 +24,7 @@
       }
     } @else {
       @if (content && isThing(content[0])) {
-        @for (thing of $any(content); track thing) {
+        @for (thing of $any(content); track thing.uid) {
           <a [routerLink]="['/data-detail', thing.uid]">
             <p>{{ 'name' | thingTranslate: thing }}</p>
           </a>

frontend/app/src/app/modules/data/elements/skeleton-list-item.component.ts

@@ -21,6 +21,7 @@ import {Component, Input} from '@angular/core';
   selector: 'stapps-skeleton-list-item',
   templateUrl: 'skeleton-list-item.html',
   styleUrls: ['skeleton-list-item.scss'],
+  standalone: false,
 })
 export class SkeletonListItemComponent {
   @Input() hideThumbnail = false;